diff --git a/dom.js b/dom.js index 72ed108..be236be 100644 --- a/dom.js +++ b/dom.js @@ -1,10 +1,16 @@ /** - * The Phi Technology LLC, Steve L. Nyemba - * 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 * - * 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(//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; +} \ No newline at end of file