JS Core: Task 4. Objects Session

dom_sniffer.js

/**
 * This self-invoking anonymous function consists of:
 *  - DOM_Sniffer which inspects the DOM of the page;
 *  - the helper function for adding event listeners;
 *  - the InfoBlock constructor: the element which contains data of sniffed object
 *
 * It encloses variables and functions in it's scope and helps us keep them out of Global
 * This is the most simple scenario of Module pattern.
 *
 */
(function(){

	var infoBox, // the DOM object that will contains the information about a sniffed element
		DOM_Sniffer = {}, //the object which manages the sniffing actions on the page,it uses Singleton pattern
		advanced = true; // the value that switches red overlay ("true" - the red overlay is shown on the sniffed objects, "false" - red overlay is absent)

	
	/**
     * Helper function to create event listeners
     * @param element - DOM object that is the event target
     * @param event - a string representing the event type to listen for
     * @param func - the event listener function that is called when the event occurs
     */
	function addEvents(element, event, func){
		if(element.addEventListener)
		{
			element.addEventListener(event, func, false);
		}
		else if(element.attachEvent)
		{
			element.attachEvent('on' + event, func); //IE browser
		}
	}
	
	DOM_Sniffer.overlay = null; //overlay which is created when "advanced" variable is true
	
	/**
     * Fires when the mousemove event occures. Gets the object data and inserts it into infoBox.
	 * The code is written in such a way to append the object information to the DOM only once. If every attribute is appended to the DOM separately it will be an unprofitable operation
     * @param e - event object
     * @param advancedOverlay - responsible for the displaying the overlay on the sniffed element
     */
	DOM_Sniffer.sniffElement = function(e, advancedOverlay) {
		
		var eventTarget, 
			objectInfo, 
			attrList = '<span class="itemTitle">Attributes: </span>', //attributes title in the infoBox
			dimensionsList = '<span class="itemTitle">Dimensions: </span>', // dimensions title in the infoBox
			typeName = '<span class="itemTitle">Object Type: </span>'; // object type title in the infoBox
		
		if (!e) {
			e = window.event; // gets event object in IE (window.event contains the last event that took place)
		}
		else if (e.target) { //gets event target 
			eventTarget = e.target;
		}
	    else if (e.srcElement) { //gets event target in IE browser
			eventTarget = e.srcElement;
		}	
			
		// checks if the object exists
		if (!infoBox) {
			infoBox = new InfoBlock().element; 
		}
		
		infoBox.innerHTML = ''; //makes the inner html to be an empty string
		
		objectInfo = (advancedOverlay) ? DOM_Sniffer.getElementInfoWithOverlay(e, eventTarget) : DOM_Sniffer.getElementInfo(eventTarget); //gets the object type, its attributes, dimensions and coordinates
		
		attrLength = objectInfo.attrs.length; //gets the amount of attributes of the object		
		typeName += objectInfo.objType; // writes the type of the object
				
		// checks if the amount of attributes is not zero
		if (attrLength) {
			//loops through the attributes of the object and writes them into "attrList" variable
			for (var i = 0; i < attrLength; i++) {
				attrList += objectInfo.attrs[i].name + ' = ' + objectInfo.attrs[i].value;
				if (i < attrLength - 1) {
						attrList += ',<br/>'
				}
			}
		}
		else {
			attrList += 'don\'t exist';
		}
		
		dimensionsList += 'height = ' + objectInfo.dimensions.objectHeight + '; width = ' + objectInfo.dimensions.objectWidth; //gets the dimensions (height and width) of the element
		 
		infoBox.innerHTML += typeName + '<br/>' + attrList + '<br/>' + dimensionsList; //inserts the object's information to the infoBox element
	}
	
	/**
     * Gets the object data (atrributes, dimensions, type and coordinates), also creates the overlay for the object
     * @param event - 
     * @param object - the object that is sniffed 
	 * @returns {Object}  - its properties are atrributes, dimensions, type and coordinates of the sniffed element
     */
	DOM_Sniffer.getElementInfoWithOverlay = function(event, object) {
		
		var objInfo;
		
		// checks if the "DOM_Sniffer.overlay" object exists, if not - it is created and appended  with the class name "snifferOverlay" to the body element
		if (!DOM_Sniffer.overlay){
			DOM_Sniffer.overlay = document.createElement('div');
			document.body.appendChild(DOM_Sniffer.overlay);
			DOM_Sniffer.overlay.className = 'snifferOverlay';
		}
			
		// if the overlay is captured by a mouse, it hides the overlay and reassign the object value
		if (object.className === 'snifferOverlay') {
			DOM_Sniffer.overlay.style.display = 'none';
			object = document.elementFromPoint(event.clientX, event.clientY); //returns the element from the document whose elementFromPoint method is being called which is the topmost element which lies under the given point
		}
		
		objInfo = DOM_Sniffer.getElementInfo(object); 
		
		//sets the position of the overlay and makes it visible
		DOM_Sniffer.overlay.style.top = objInfo.coords.yPosition + 'px';
		DOM_Sniffer.overlay.style.left = objInfo.coords.xPosition + 'px';
		DOM_Sniffer.overlay.style.height = objInfo.dimensions.objectHeight + 'px';
		DOM_Sniffer.overlay.style.width = objInfo.dimensions.objectWidth + 'px';
		DOM_Sniffer.overlay.style.display = 'block';
		
		return objInfo;
	}
	
	/**
     * Gets the object data (atrributes, dimensions, type and coordinates)
     * @param object - the object that is sniffed 
	 * @returns {Object}  - its properties are atrributes, dimensions, type and coordinates of the sniffed element
     */
	DOM_Sniffer.getElementInfo = function(object) {
		return {
			objType: DOM_Sniffer.getObjectType(object),
			attrs: DOM_Sniffer.getObjectAttributes(object),
			dimensions: DOM_Sniffer.getDimensions(object),
			coords: DOM_Sniffer.getObjectCoordinates(object)
		}
	} 
	
	/**
     * Gets the object atrributes
     * @param object - the object that is sniffed 
	 * @returns {Object}  - atrributes list of the sniffed element
     */
	DOM_Sniffer.getObjectAttributes = function (object) {
		return object.attributes;
	}
	
	/**
     * Gets the object dimensions
     * @param object - the object that is sniffed 
	 * @returns {Object}  - height and width properties of the sniffed element
     */
	DOM_Sniffer.getDimensions = function(object) {
		return {
			objectHeight: object.clientHeight || object.offsetHeight,
			objectWidth: object.clientWidth || object.offsetWidth
		}
	}
	
	/**
     * Gets the object type
     * @param object - the object that is sniffed 
	 * @returns {String}  - tag name of the sniffed element
     */
	DOM_Sniffer.getObjectType = function(object) {
		return object.tagName;
	}
	
	/**
     * Gets the object coordinates
     * @param object - the object that is sniffed 
	 * @returns {Object}  - coordinates of the sniffed element
     */
	DOM_Sniffer.getObjectCoordinates = function(object) {
		for (var x = 0, y = 0; object !== null; x += object.offsetLeft, y += object.offsetTop, object = object.offsetParent);
		return {xPosition: x, yPosition: y};
	}	
	
	/**
     * Constructor function, creates the DOM element DIV, that constains information about any sniffed element
     * @constructor
     */
	function InfoBlock () {
	
		var self = this; //this variable is created to use the RequestsQueue object reference in the inner function
		this.element = document.createElement('div');
		
		/**
         * Appends the element to the body and creates class name attribute for it
         * @private
         */
		function _init() { 
			document.body.appendChild(self.element);
			self.element.className = 'infoBox';
		}
		
		_init();
	
	}
	
	addEvents(window, 'load', snifferDOM);
	
	/**
     * Runs when the DOM is loaded. Creates event listener to the mouse move event in the document
     */
	function  snifferDOM() {	
		addEvents(document, 'mousemove', function(e){DOM_Sniffer.sniffElement(e, advanced)});
	}

})();