library
/
jx
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

implemented setters on attributes, styles, classname

Browse Source
master
steve 10 years ago
parent b43462ad76
commit 22d6e85d5b
1 changed files with 172 additions and 27 deletions
Show Stats Download Patch File Download Diff File

199
dom.js
Unescape View File

@ -1,10 +1,16 @@
/**
* The Phi Technology LLC, Steve L. Nyemba <steve@the-phi.com>
* Javascript-x framework version 0.1
* Javascript-x framework version 1.0,
* (c) 2012 - 2014, The Phi Technology LLC, https://the-phi.com
* Steve L. Nyemba <steve@the-phi.com>
*
* Handling of DOM objects will rely on DOM object identifiers (ID) with a few exceptions
* This file handles DOM objects with a namespace implementation.
* The basic design is a wrapper around WC3 standard interface for a dom
* Handling of DOM objects will rely on DOM object identifiers (ID) with a few exceptions.
* The focus of a dom object is mostly centered around a single DOM object,
* We advise using utils.js in order to handle collections of DOM objects as utils.js implements various utilities and industry standard design patterns
*
* This implementation is designed by W3C specifications of HTML5 and will integrate well with other frameworks that do so.
* In addition we tried to mildly specify preconditions for executions of functions
* LICENSE: GPLv3
* This program comes with absolute NO WARRANTY or implied warranty and is free to use for any purpose: modified, integrated, distributed at will.
*/
if(!jx){
@ -19,6 +25,20 @@ jx.dom = {} ;
jx.dom.exists = function(id){
return document.getElement(id) != null || document.getElementsByName(id) != null ;
}
/**
* This function will remove a node given it's identifier
* @param {type} id
* @returns {undefined}
*/
jx.dom.remove = function(id){
if (id.constructor == String){
item = jx.dom.get.instance(id)
}else{
item = id ;
}
item.parentNode.removeChild(item) ;
}
/**
* This function allow extraction from an select tag, if mutil selection is enabled an array is returned otherwise a scalar or string
* The function also supports accessing a user defined attribute if specified otherwise it will use the default 'value', text can be specified
@ -26,7 +46,7 @@ jx.dom.exists = function(id){
* @param {type} field
* @returns {Array|jx.dom.get.dropdown.value}
*/
_dropdownvalue = function(id,field){
_getdropdownvalue = function(id,field){
var _dom = document.getElementById(id) ;
field = (field)?field:'value'
var value = null;
@ -54,7 +74,7 @@ _dropdownvalue = function(id,field){
* @param {type} id name of the checkboxes
* @returns {value}
*/
_checkboxvalue = function(id){
_getcheckboxvalue = function(id){
ldoms = document.getElementsByName(id) ;
value = null;
for(var i=0; i < ldoms.length; i++){
@ -65,27 +85,50 @@ _checkboxvalue = function(id){
}
return value;
}
_radiovalue = function(id){
return _checkboxvalue(id);
_getradiovalue = function(id){
return _getcheckboxvalue(id);
}
/**
* Returns the input value of an input with type == text|password
* @param {type} id
* @returns {document@call;getElementById.value}
*/
_inputvalue = function(id){
_getinputvalue = function(id){
_input = document.getElementById(id) ;
return _input.value ;
}
_spanvalue = function(id){
_getspanvalue = function(id){
_input = document.getElementById(id) ;
return _input.innerHTML ;
}
jx.dom.get = {} ;
/**
* This function will return either a newly created dom object or an existing one if passed an identifier {name|id}
* @pre : jx.dom.exists(id) == true || id.match(/<htmlTag>/i)
* @post: jx.dom.get.instance(id) != null
* @returns {NodeList|obj|Element}
*/
jx.dom.get.instance = function(id){
if(jx.dom.exists(id)){
obj = (document.getElementById(id)) ;
if(obj == null){
obj = document.getElementsByName(id)
if(obj.length == 1){
obj = obj[0]
}else{
obj = null;
}
}
}else{
obj = document.createElement(id)
}
return obj ;
}
/**
* This function will return the value of a dom object regardless of the object
* @pre : jx.dom.exists(id) == true
* @post: No Exception is Thrown
* @param {type} id
* @returns {undefined}
*/
@ -98,9 +141,7 @@ jx.dom.get.value = function(id){
}
}
//-- at this point we've tried two methods
if(obj == null){
return null;
}
tag = obj.tagName ;
if(tag.match(/input/i)){
if(obj.type.match(/text|password/i)){
@ -115,28 +156,132 @@ jx.dom.get.value = function(id){
key = key.toUpperCase();
pointer = {} ;
pointer['SELECT'] = _dropdownvalue ;
pointer['SPAN'] = _spanvalue;
pointer['DIV'] = _spanvalue;
pointer['SELECT'] = _getdropdownvalue ;
pointer['SPAN'] = _getspanvalue;
pointer['DIV'] = _getspanvalue;
pointer['CHECKBOX']= _checkboxvalue;
pointer['RADIO'] = _radiovalue ;
pointer['INPUT'] = _inputvalue;
pointer['CHECKBOX']= _getcheckboxvalue;
pointer['RADIO'] = _getradiovalue ;
pointer['INPUT'] = _getinputvalue;
return pointer[key](id)
}
jx.dom.get.children = function(id){}
/**
* This function returns an attribute for a given DOM object
* @pre jx.dom.exists(id)
* @post: none
*/
jx.dom.get.attribute = function(id,field){
_dom = jx.dom.get.instance(id)
return _dom.getAttribute(field) ;
}
/**
* This function returns a list of children nodes provided an existing node identifier
* @pre : jx.dom.exists(id) || jx.dom.get.instance(id) != null
* @post: jx.dom.get.children(id).length >= 0
* @param {type} id
* @returns {Array|list}
*/
jx.dom.get.children = function(id){
list = [] ;
if(id.constructor == String){
nodes = document.getElementById(id).childNodes ;
}else{
nodes = id.childNodes;
}
for(var i=0; i < nodes.length; i++){
node = nodes[i];
if(node.nodeName.match('^#.*') == null){
list.push(node) ;
}
}
return list ;
}
_setinputvalue = function(id,value){
_input = document.getElementById(id) ;
if(_input.value == null){
_input.innerHTML = value
}else{
_input.value = value;
}
}
/**
* ref _setinputvalue
* The following are aliases intended for a more readable codebase, the just set a value to {DIV,SPAN,INPUT(text|password)}
*/
_setspanvalue = _setinputvalue;
_setdivalue = _setinputvalue
_setcheckbox = function(id,value){
_checkboxes = document.getElementsByName(id)
for(i in _checkboxes){
if(checkbox.value == value){
checkbox.checked = true;
break;
}
}
}
_setradiobox = _setcheckbox ;
_setdropdown = function(id,field,value){
_select = document.getElementById(id) ;
if(value == null && field != null){
aux = field ;
field = 'value' ;
value = aux ;
}
options = _select.options;
for(i in options){
if(options[i][field] == value){
options[i].selected = true ;
break;
}
}
}
jx.dom.set = {} ;
/**
* This function will set a value to a dom object
* @param {type} id
* @param {type} value
* @returns {undefined}
* This function will set a value to a dom object on a page
* @pre : jx.dom.exists(id) == true
* @post: No Exceptio is Thrown
*/
jx.dom.set.value= function(id,value){
obj = document.getElementById(id) ;
tag = obj.tagName ;
if(obj != null){
key = obj.tagName ;
}else {
obj = document.getElementsByName(id)
if(obj != null){
key = obj[0].tagName ;
}
}
}
/**
* This function sets an attribute a value to a given attribute or creates and sets it otherwise
* @pre : jx.dom.exists(id)
* @post: jx.dom.get.attribute(id,field) == value || or none
*/
jx.dom.set.attribute = function(id,field,value){
_dom = jx.dom.get.instance(id) ;
_dom.setAttribute(field,value) ;
}
/**
* This function acts as a wrapper to set the style of a dom object
* @returns {undefined}
*/
jx.dom.set.style = function(id,field,value){
_dom = jx.dom.get.instance(id) ;
_dom.style[field] = value;
}
/**
* This function will set the css class name of a DOM object and override any existing one
* @pre : jx.dom.exists(id)
* @post: jx.dom.get.attribute(id,'className') == value
* @returns {undefined}
*/
jx.dom.set.class = function(id,value){
_dom = jx.dom.get.instance(id) ;
_dom.className = value;
}
Write Preview
Loading…
Cancel
Save