API Docs for:
Show:

File: src/main/resources/js/d.js

/**
 * DOM functions for TiledImage
 * @version $Id: d.js 16 2013-04-13 09:02:12Z nazotoko $
 * Copyright 2013 Shun N. Watanabe <nazotoko (a+) users.sourceforge.net>
 * @module d.js
 */

/**
  Global Object for DOM tools. javascript has DOM functions to change the HTML
  elements dynamically. However, the commands name is long and not useful. This
  object provides short names and useful functions.
  @public
  @class d
  @static
  @global
*/
var d={
    /**
     * abbreviation of document
     * @public
     * @property d
     * @type {DOM Element}
     * @default document
     * @readonly
     */
    d:document,
    /**
     * root path of script codes.
     * @public
     * @property root
     * @type {String}
     */
    root:'js/',
    /**
     * A Flag for Old Internet Explores.
     * <dl>
     * <dt>0</dt><dd>mozilla.org gecco engine (fireforx, seamonkey or some)</dd>
     * <dt>1</dt><dd>InternetExplore older than Ver. 9</dd>
     * <dt>2</dt><dd>InternetExplore after ver. 9 or opera</dd>
     * </dl>
     * @public
     * @property ie
     * @type {Integer}
     */
    ie:(document.addEventListener)?((navigator.appName.charAt(0)=="N")?0:2):1,
    /**
     * Get a DOM element named id.
     * @public
     * @method get
     * @param id {String} Id of the element.
     */
    get:function(id){
	return this.d.getElementById(id);
    },
/*    includes:function(srcs){ // do not use
        var i=srcs.length;
	while(--i>=0){
	    var e=this.d.createElement('script');
	    e.src=this.root+srcs[i]+'.js';
	    this.d.body.appendChild(e);
	    this.ilist[this.ilist.length]=src;
	}
    },*/
    /**
     * insert new DOM Element as a first child of __par__ Element.
     * @example
     <div id="debug"></div>
     <script>
     d.prep(d.get("debug"),"p",{innerHTML:"123"});
     </script>

     * @public
     * @method prep
     * @param par {DOMElement} Parent DOM Element.
     * @param t {String} target element DOM Element.
     * @param opt {Object} attribute and childs. See d.mod .
     * @return DOMElement created and prepended
     */
    prep:function(par,t,opt){
	var e=this.d.createElement(t);
	this.mod(e,opt);
	par.insertBefore(e,par.firstChild);
	return e;
    },
    /**
     * append new DOM Element as the last child of __par__ Element .
     * @public
     * @method app
     * @param par {DOMElement} Parent DOM Element.
     * @param t {String} target element DOM Element.
     * @param opt {Object} attribute and childs. See d.mod .
     * @return DOMElement created and appended
     */
    app:function(par,t,opt){
	var e=this.d.createElement(t);
	this.mod(e,opt);
	par.appendChild(e);
	return e;
    },
    /**
     * append or modify childs of __e__ object by __opt__ object.
     If __e__ and __opt__ has a child of the same name, it is overwrite by __opt__'s.
     This is well used for attribute setting of DOM Element and setting method functions
     in a new object. Thus, this function does not copy recursively. There is one
     exception. if __opt__ has the child "style" and pass both of the "style" child to
     d.style method.
     * @public
     * @method mod
     * @param e {DOMElement} Parent DOM Element.
     * @param opt {Object} object of modifing childs.
     * @return DOMElement created and appended
     */
    mod:function(e,opt){
	for(var k in opt){
	    if(k=='style'){
		this.style(e[k],opt[k]);
	    }else 
		e[k]=opt[k];
	}
	return e;
    },
    /**
     * concat two array. __a__ array added all of __b__ array at the end of __a__ array.
     * @public
     * @method cat
     * @param a {Array} Array to modified
     * @param b {Array} Array which has childs to add
     * @return {Array} Modified __a__ array.
     */
    cat:function(a,b){
	for(var i=0;i<b.length;i++){
	    a[a.length]=b[i];
	}
	return a;
    },
    /**
     * set style of DOM element.
     * @public
     * @method style
     * @param {object} e style arribute of A DOM Element.
     * @param {object} sty object of strings for styling.
     */
    style:function(e,sty){
	for(var k in sty){
	    if(k=='opacity'){
		if(d.ie==1)
		    e.filter='alpha(opacity='+(sty[k]*100)+')';
		else
		    e[k]=sty[k];
	    } else
		e[k]=sty[k];
	}
    },
    /**
     * remove all the children of the DOM element.
     * @public
     * @method removeAll
     * @param {DOMElement} e A DOM Element.
     */
    removeAll:function(e){
	while(e.hasChildNodes()){
	    e.removeChild(e.firstChild);
	}
    },
    /**
     * Move DOM Element to there. The DOM must has style.position
     * "absolute" or "relative".
     * @public
     * @method go
     * @param {DOMElement} e A DOM Element.
     * @param {Array[Number]} pos Array of [left,top].
     */
    go:function(e,pos){
	var t=e.style;
	t.left=pos[0]+'px';
	t.top=pos[1]+'px';
    },
    /**
     * Add an event listener to A DOM Element.
     * @public
     * @method addEv
     * @param hash {Object} t: target DOM, m: event messeage without "on", f:function.
     */
    addEv:function(hash){
	(d.ie==1)? hash.t.attachEvent('on' + hash.m, hash.f)
	    : hash.t.addEventListener(
		(d.ie!=0 || hash.m!='mousewheel')?hash.m:'DOMMouseScroll', hash.f, false);
    },
    /**
     * Remove an event listener to A DOM Element.
     * @public
     * @method rmEv
     * @param hash {Object} t: target DOM, m: event messeage without "on", f:function.
     */
    rmEv:function(hash){
	(d.ie==1)? hash.t.detachEvent('on' + hash.m, hash.f)
	    : hash.t.removeEventListener(hash.m,hash.f,false);
    },
    /**
     * Create DOM Elements under the __e__ element.
     * This is an enhansment of d.app.
     * order of json become the order of child.
     * The children of Array must be 3 type.
     * <ul>
     * <li>String: the string become text node. Note that you cannot add HTML tags here.</li>
     * <li>Array: Become an element. [0] becomes tag name (must be String.),
     * [1] becomes child nodes. (it must be Array as the parameter __json__.) </li>
     * <li>Object:
     * 0: as the same with Array's 0.
     * 1: as the same with Array's 1.
     * the others: become the attribute of the element. See d.mod for detail.  </li>
     * </ul>
     * @public
     * @method json2html
     * @param {DOMElement} e A DOM Element.
     * @param {Array} json representation of HTML.
     */
    json2html:function(e,json){
	var o,n=json.length,i;
	for(i=0;i<n;i++){//array
	    o=json[i];
	    if(typeof o=='object'){
		var atr={},k,m;
		for(k in o){
		    if(k!=0 && k!=1){
			atr[k]=o[k];
		    }
		}
		m=d.app(e,o[0],atr); // 0: tag name, other: atributes obj
		if(o[1])d.json2html(m,o[1]); //1:child's array
	    } else {// text node
		e.appendChild(d.d.createTextNode(o));
	    }
	}
    }
};