• Demo and Introduction
  • The HTML and CSS Files
  • The jsLib_event.js and jsLib_dom_ready.js Files
  • The report_library.js File
  • The report_library.js File Continued
  • The Complete report_library.js File and the report.js File
  • About the jsLib_event.js and jsLib_dom_ready.js files

    For the TableSort application to work properly, you will need to include both of these files.

    The jsLib_event.js File

    This file provides a standardized method of attaching and detaching events. It provides for the inconsistent way that browsers handle events so that you don't have to write extra code every time you want to create an event handler. With this file, you can use the simple add method to attach and detach events to an element. It also allows you to attach more than one event to the same element. Below is the whole file. I've highlighted the beginning of the add method. You don't need to change anything on this file for your application to work properly.

    //if the jsLib object doesn't exist
    if ( ! jsLib ) {
        //create a new object named jsLib
    	var jsLib = {};
    }
    //if the event object doesn't exist in the jsLib object
    if ( ! jsLib.event ) {
         //create a new object in the jsLib object named event
    	jsLib.event = {};
    }
    
    //the handlerId property of the event property is 1
    jsLib.event.handlerId = 1;
    
    //the add method of the event object takes three parameters: element, type, handler
    jsLib.event.add = function (element, type, handler) {
        //if handlerid property of handler doesn't exist
        if (!handler.handlerId) {
            //the handlerId property of handler is the handlerId property of the event property incremented by 1
    		handler.handlerId = jsLib.event.handlerId++;
        }
        
        //the value of the variable oldHandlerName is "jsLib_old_" plus  the value of type plus the value of the handlerId property of handler
        var oldHandlerName = "jsLib_old_" + type + "_" + handler.handlerId;
        //the value of the variable newHandlerName is "jsLib_new_" plus the value of type plus the value of the handlerId property of handler
    	var newHandlerName = "jsLib_new_" + type + "_" + handler.handlerId;
    
        //if element has the addEventListener method
        if ( element.addEventListener ) {   
            //the value of the oldHandlerName item within element is the value handler
    		element[oldHandlerName] = handler;
             //the value of the newHandlerName item within element is a new event handler
    		element[newHandlerName] = function(evt) {
                //use the fixEvent method to standardize the old event handler
    			element[oldHandlerName](jsLib.event.fixEvent(evt));
            }
            //add an event listener to element with the parameters type, element[newHandlerName], false
    		element.addEventListener( type, element[newHandlerName], false);
            //return a value of true
    		return true;    
        //if element has the attachEvent method
        } else if ( element.attachEvent ) { 
             //the value of the oldHandlerName item within element is the value handler
    		element[oldHandlerName] = handler;
             //the value of the newHandlerName item within element is a new event handler
    		element[newHandlerName] = function() {
                //use the fixEvent method to standardize the old event handler
    			element[oldHandlerName](jsLib.event.fixEvent(window.event));
            }
    		//attach an event listener with the parameters "on"+type, element[newHandlerName]
            element.attachEvent("on"+type, element[newHandlerName]);
            //return a value of true
    		return true;
        }
        //return a value of true
    	return false;
    }
    
    //the remove method of the event object takes three parameters: element, type, handler
    jsLib.event.remove = function (element, type, handler) {
        //the value of the variable oldHandlerName is "jsLib_old_" plus  the value of type plus the value of the handlerId property of handler
    	var oldHandlerName = "jsLib_old_" + type + "_" + handler.handlerId;
         //the value of the variable newHandlerName is "jsLib_new_" plus the value of type plus the value of the handlerId property of handler
    	var newHandlerName = "jsLib_new_" + type + "_" + handler.handlerId;
    
        //if element has the removeEventListener property
        if ( element.removeEventListener ) {
            //remove the event listener from the element using the paramters type, element[newHandlerName], false
    		element.removeEventListener(type, element[newHandlerName], false);
            //the value of the newHandlerName item within element is null
    		element[newHandlerName] = null;
            //the value of the oldHandlerName item within element is null
    		element[oldHandlerName] = null;
            //return a value of true
    		return true;
        //otherwise if element has the removeEventListener property
        } else if ( element.detachEvent ) {
            //detach the event from the element using the paramters "on"+type, element[newHandlerName] 
    		element.detachEvent( "on"+type, element[newHandlerName] );
             //the value of the newHandlerName item within element is null
    		element[newHandlerName] = null;
            //the value of the oldHandlerName item within element is null
    		element[oldHandlerName] = null;
            //return a value of true
    		return true;
        }
    	//return a value of false
        return false;
    }
    
    //the fixEvent method of the event object takes one parameter: oEvt
    jsLib.event.fixEvent = function (oEvt) {
        // if the Event object has already been fixed, exit this method
        if ( oEvt.fixed === true ) return oEvt;
    
        //the variable evt is an object
        var evt = {};
        //the fixed property of the the evt object is true
    	evt.fixed = true;
    
        //the oEvt property of the evt object is oEvt
        evt.oEvt = oEvt;
        //the type property of the evt object is type property of oEvt 
    	evt.type = oEvt.type;
    
        //if oEvt contains a "target" property
        if ( "target" in oEvt ) {
            //the value of the target property of evt is the value of the target property of oEvt
    		evt.target =  oEvt.target;
        //otherwise if oEvt contains a "srcElement" property
    	} else if ( "srcElement" in oEvt ) {
            //the value of the target property of evt is the value of the srcElement property of oEvt
    		evt.target =  oEvt.srcElement;
        //otherwise
    	} else {
            //the value of the target property of evt is the document
    		evt.target = document;
        }
        //if the target property of evt is null //the value of the target property of evt is the document
    	if ( evt.target == null ) evt.target = document;
        //if the target nodetype property of evt is 3
    	if ( evt.target.nodeType == 3 ) {       // Fix Safari "span" problem
            //the value of the target property of evt is the target parentNode property of evt
    		evt.target = evt.target.parentNode;
        }
    
        //if oEvt contains a "timeStamp" property
        if ( "timeStamp" in oEvt ) {
            //the timestamp property of evt equals the timestamp property of oEvt
    		evt.timeStamp = oEvt.timeStamp;
        //otherwise
    	} else {
            //the timestamp property of evt equals the valueOf method of a new Date object
    		evt.timeStamp = new Date().valueOf();
        }
    
        //the shiftKey property of evt  equals the shiftKey property of oEvt
        evt.shiftKey = oEvt.shiftKey;
        //the ctrlKey property of evt  equals the ctrlKey property of oEvt
    	evt.ctrlKey = oEvt.ctrlKey;
        //the altKey property of evt  equals the altKey property of oEvt
    	evt.altKey = oEvt.altKey;
        //the value of the metaKey property of evt  is the metaKey property of oEvt if the metaKey property exists or the 
    	//ctrlKey property of oEvt if it doesn't
    	evt.metaKey = ( "metaKey" in oEvt ) ? oEvt.metaKey : oEvt.ctrlKey;
    
    	//the preventDefault method of evt is 
        evt.preventDefault = function () {
            //if the preventDefault method exists in oEvt
    		if ( "preventDefault" in oEvt ) {    // DOM Standard
                //execute the preventDefault method of oEvt
    			oEvt.preventDefault();     
            //otherwise if the returnDefault method exists in oEvt
    		} else if ( "returnValue" in oEvt) { // IE
                //the returnValue property of oEvt is false
    			oEvt.returnValue = false;  
            }
        }
        
        //the stopPropagation method of evt is 
        evt.stopPropagation = function () {
            //if the stopPropagation method exists in oEvt
    		if ( "stopPropagation" in oEvt ) {     // DOM Standard
               //execute the stopPropagation method of oEvt
    		   oEvt.stopPropagation();    
             //otherwise if the cancelBubble method exists in oEvt
    		} else if ( "cancelBubble" in oEvt ) { // IE
                //the cancelBubble property of oEvt is true
    			oEvt.cancelBubble = true;  
            }
        }
        
        //if the jsLib.event.mouse object and the jsLib.event.mouse.fixMouse method exist
        if ( jsLib.event.mouse && jsLib.event.mouse.fixMouse ) {
            //execute the fixMouse method with the parameters of oEvt and evt
    		jsLib.event.mouse.fixMouse( oEvt, evt );
        }
        
        //if the jsLib.event.keyboard object and the jsLib.event.mouse.fixKeys method exist
        if ( jsLib.event.keyboard && jsLib.event.keyboard.fixKeys ) {
            //execute the fixKeys method with the parameters of oEvt and evt
    		jsLib.event.keyboard.fixKeys( oEvt, evt );
        }
        
    	//return the value of evt
        return evt;
    }
    

    The jsLib_dom_ready.js File

    This file helps to create a better user experience. It detects when the DOM is ready for use and then loads the javascript application. This way, the items in your application will still work even if larger files on your page such as photos haven't loaded yet. The ready method in this file is meant to be used in place of the window.onload function that calls the application to load when the page has loaded.

    	//if the jsLib object doesn't exist, create a new object named jsLib 
    if ( ! jsLib ) { var jsLib = {}; }
    //if the jsLib.dom object doesn't exist, create a new object named jsLib .dom
    if ( ! jsLib.dom ) { jsLib.dom = {}; }
    
    //the readyList property of the jsLib.dom object is an empty array
    jsLib.dom.readyList = [];
    
    //the isReady property of the jsLib.dom object has a value of false
    jsLib.dom.isReady = false;
    
    //the ready method of the jsLib.dom object is a function with one parameter: fn
    jsLib.dom.ready = function ( fn ) {
        //if fn is a function
    	if ( fn instanceof Function ) {
            //if the value of the jsLib.dom isReady property is true
    		if ( jsLib.dom.isReady ) {
                //execute the call method of fn with the parameter document
    			fn.call(document);
            //otherwise
    		} else {
                //add the value of fn to the end of the readyList array
    			jsLib.dom.readyList.push( fn );
            }
        //otherwise
    	} else {
            //if the isReady property of the jsLib.dom object is true
    		if ( jsLib.dom.isReady ) {
                //while the length of the readList array is greater than 0
    			while ( jsLib.dom.readyList.length > 0 ) {
                    //the value of fn is the last element in the readList array, which has been removed
    				fn = jsLib.dom.readyList.pop();
                    //execute the call method of fn with the parameter of document
    				fn.call(document);
                }
            }
        }
    }
    
    //the readyInit method of the jsLib.dom object is a function 
    jsLib.dom.readyInit = function () {
        //if the addEventListener method exists 
    	if ( document.addEventListener ) {   // DOM event model
            //attach an event listener to the document with the parameters "DOMContentLoaded" and a function that is defined as
    		document.addEventListener(
                "DOMContentLoaded",
                function () {
                    //the value of the isReady property of the jsLib.dom object is true
    				jsLib.dom.isReady = true;
                    //execute the ready method of the  jsLib.dom object
    				jsLib.dom.ready();
                },
                //return a value of false
    			false
            );
        //otherwise if the attachEvent method exists
    	} else if ( document.attachEvent ) { // IE event model
            //if the doScroll method exists and the value of window equals window.top
            if ( document.documentElement.doScroll && window == window.top ) {   // Are we in an iframe?
                // No, we're not in an iframe. Use doScroll polling to
                // simulate DOMContentLoaded. By Diego Perini at
                // http://javascript.nwbox.com/IEContentLoaded/
                
    			//the variable doScrollPoll is a function
    			var doScrollPoll = function () {
                    //if the value of the isReady property of the jsLib dom object is true, return to the calling function
    				if ( jsLib.dom.isReady ) return;
                    //try this set of actions
    				try {
                        //execute the the doScroll method of the documentElement property with a parameter of "left"
    					document.documentElement.doScroll("left");
                    //if there is an error, catch the error
    				} catch( error ) {
                        //set a timer with the parameters of the doScrollPoll function and a delay time of 0
    					setTimeout( doScrollPoll, 0 );
                        //return to the calling function
    					return;
                    }
                    //the value of the isReady property of the jsLib.dom object is true
    				jsLib.dom.isReady = true;
                    //execute the ready method of the  jsLib.dom object
    				jsLib.dom.ready();
                }
                //execute the doScrollPoll function
    			doScrollPoll();
            //otherwise
    		} else {
                // Yes, we are in an iframe or doScroll isn't supported.
                // Use the onreadystatechange event
                //attach an event to the document with the parameters of "onreadystatechange" and a function that is defined as
    			document.attachEvent(
                    "onreadystatechange",
                    function () {
                        //if the value of the readyState property of the document is "complete"
    					if ( document.readyState === "complete" ) {
                            //the value of the isReady property of the jsLib.dom object is true
    						jsLib.dom.isReady = true;
                            //execute the ready method of the  jsLib.dom object
    						jsLib.dom.ready();
                        }
                    }
                );
            }
            
            // Use the onload event as a last resort
    		//if the attachEvent method exists
            if ( window.attachEvent ) {   
                //execute the attachEvent method with the parameters of onload and a function that is defined as 
    			window.attachEvent(
                    "onload",
                    function () {
                        //the value of the isReady property of the jsLib.dom object is true
    					jsLib.dom.isReady = true;
                        //execute the ready method of the  jsLib.dom object
    					jsLib.dom.ready();
                    }
                );
            }
        }
    }
    
    // Call the method that initializes the DOM library
    jsLib.dom.readyInit();
    	

    Previous Next