Created
October 21, 2013 07:41
-
-
Save dzenkovich/7079997 to your computer and use it in GitHub Desktop.
JS Core: Task 4. Objects Session
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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)}); | |
| } | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment