/**
* Simple Javascript eXtension - 1.0
* (c) 2011 - 2015 Steve L. Nyemba, steve@the-phi.com
* License GPL version 3.0
*
* 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.
* Architecturally the namespace serves as a wrapper around common DOM based tasks and can/should be cross-browser compatible because based on W3C standards
*
* 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){
var jx = {}
}
jx.dom = {} ;
/**
* Determines if a DOM object exists or not
* @param {type} id
* @returns {Boolean}
*/
jx.dom.exists = function(id){
return document.getElementById(id) != null ;
}
/**
* This function will remove a node given it's identifier
* @pre jx.dom.exists(id)
* @param {type} id
* @returns {undefined}
*/
jx.dom.remove = function(id){
var _item = null;
if (id.constructor == String){
_item = jx.dom.get.instance(id)
}else{
_item = id ;
}
_item.parentNode.removeChild(_item) ;
return _item ;
}
/**
* Append a child to DOM to a given DOM object provided the identifier
* @pre jx.dom.exists(id) && _child != null
* @param id identifier of the DOM object
* @param _child child dom object
*/
jx.dom.append = function(id,_child){
var _parent = jx.dom.get.instance(id) ;
_parent.appendChild(_child) ;
}
/**
* This function will show a DOM object (assuming the DOM was hidden or not)
* @pre jx.dom.exiss(_id)
* @param _id DOM object identifier
*/
jx.dom.show = function(_id){
_dom = jx.dom.get.instance(_id) ;
_dom.style.display = null;
}
/**
* This function will hide a DOM object (assuming the DOM is visible or not)
* @pre jx.dom.exiss(_id)
* @param _id DOM object identifier
*/
jx.dom.hide = function(_id){
_dom = jx.dom.get.instance(_id) ;
_dom.style.display = 'none' ;
}
/**
* 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
* @param {type} id
* @param {type} field
* @returns {Array|jx.dom.get.dropdown.value}
*/
_getdropdownvalue = function(id,field){
var _dom = document.getElementById(id) ;
field = (field)?field:'value'
var value = null;
if(field!= null && _dom != null){
value = []
var option = 0;
for(var i=0; i < _dom.options.length; i++){
option = _dom.options[i] ;
if(option.selected){
value.push(option[field])
}
}
}
if(value.length == 0){
value = 0
}else if (value.length == 1){
value = value[0]
}
return value;
}
/**
* This function returns a value for checkboxes given a name
* @param {type} id name of the checkboxes
* @returns {value}
*/
_getcheckboxvalue = function(id){
ldoms = document.getElementsByName(id) ;
value = null;
for(var i=0; i < ldoms.length; i++){
if(ldoms[i].checked == true){
value = ldoms[i].value;
break;
}
}
return value;
}
_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}
*/
_getinputvalue = function(id){
_input = document.getElementById(id) ;
return _input.value ;
}
/**
* This function returns the value of a SPAN|DIV
* @pre jx.dom.exists(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}
*/
jx.dom.get.value = function(id){
obj = document.getElementById(id) ;
if(obj == null){
obj = document.getElementsByName(id) ;
if (obj != null){
obj = obj[0] ;
}
}
//-- at this point we've tried two methods
tag = obj.tagName ;
if(tag.match(/input/i)){
if(obj.type.match(/text|password/i)){
key = 'INPUT'
}else {
key = obj.type ;
}
}else{
key = tag ;
}
key = key.toUpperCase();
pointer = {} ;
pointer['SELECT'] = _getdropdownvalue ;
pointer['SPAN'] = _getspanvalue;
pointer['DIV'] = _getspanvalue;
pointer['CHECKBOX']= _getcheckboxvalue;
pointer['RADIO'] = _getradiovalue ;
pointer['INPUT'] = _getinputvalue;
return pointer[key](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)
if (_dom[field] != null) {
return _dom[field]
}
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 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) ;
if(obj != null){
key = obj.tagName ;
}else {
obj = document.getElementsByName(id)
if(obj != null){
key = obj[0].tagName ;
}
}
if(key.match(/div|span|textarea/i) || (key.match(/input/i)&& obj.type.match(/text|password/i) ) ){
if(key.match(/input/i) == null){
obj.innerHTML = value ;
}else{
obj.value = value;
}
}
}
/**
* 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);
if (value.constructor == Object) {
_dom[field] = value
} else {
_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.css = function(id,value){
_dom = jx.dom.get.instance(id) ;
_dom.className = value;
}
/**
* This function will set the focus on a given DOM object
* @param {type} id
* @returns {undefined}
*/
jx.dom.set.focus = function(id){
_dom = jx.dom.get.instance(id) ;
_dom.focus();
}