diff --git a/css/VisualEvent.css b/css/VisualEvent.css index a556d75..8c969cc 100644 --- a/css/VisualEvent.css +++ b/css/VisualEvent.css @@ -302,3 +302,8 @@ div.Event_LabelColour { #Event_Display div.Event_bg_black:hover { border: rgba(190, 190, 190, 1) 2px solid; } + +#Event_Display div.EventLabel { + position: absolute; + font: 14px sans-serif; +} diff --git a/js/VisualEvent.js b/js/VisualEvent.js index 46595e0..cb75c7d 100644 --- a/js/VisualEvent.js +++ b/js/VisualEvent.js @@ -16,37 +16,37 @@ (function(window, document, $){ -/** +/** * Visual Event will show, visually, which DOM elements on a web-page have events attached to - * them, information about those events and the code accossiated with each handler for the + * them, information about those events and the code associated with each handler for the * event. It does this by parsing through the cache of Javascript libraries (as there is no DOM * method to get the information required), thus a major part of Visual Event are the library * parsers. A result of this is that universal display of events is not possible - there must * be a parser available. - * + * * Visual Event's display is broken into four major areas: * - Label - The information toolbar at the bottom of the window (fixed) showing Visual Event * controls (close and help), the name of the program and information about the events that have * been found on the page. - * + * * - Help - The help view is a completely blocking layer which shows information about Visual * Event and how to use it. A single click will remove the help layer and restore the standard * Visual Event view. - * - * - Display - A layer which provides a background to Visual Event (thus when Visual Event is + * + * - Display - A layer which provides a background to Visual Event (thus when Visual Event is * active is it blocking to the web-page below it) and acts as a container for the boxes (DIVs) * which serve as a visual indicator that there is an event attached to the element below it * (sized to match the element with the event attached). - * + * * - Lightbox - The event information and code display of attached events. - * - * Note that currently there can only be one instance of Visual Event at a time, due to + * + * Note that currently there can only be one instance of Visual Event at a time, due to * practicality (no point in showing the same thing twice, at the same time) and the use of * element IDs in the script. - * + * * @class VisualEvent * @constructor - * + * * @example * new VisualEvent(); */ @@ -57,21 +57,21 @@ window.VisualEvent = function () alert( "VisualEvent warning: Must be initialised with the 'new' keyword." ); return; } - + // Only one instance of VisualEvent at a time, in the current running mode. So if there is a // current instance, shut it down first if ( VisualEvent.instance !== null ) { VisualEvent.instance.close(); } VisualEvent.instance = this; - - + + /** * Settings object containing customisable information for the class instance * @namespace */ this.s = { - /** + /** * Array of objects containing information about the nodes which have been found to have * events attached to them. Each object contains the following parameters: * {element} node The DOM element in question @@ -84,16 +84,16 @@ window.VisualEvent = function () * @default null */ "elements": null, - - /** + + /** * setTimeout reference for delayed hiding of the lightbox layer * @type int * @default null * @private */ "mouseTimer": null, - - /** + + /** * Counter for the number of events which have been found from a JS library's cache, but * are not currently available in the document's DOM * @type int @@ -101,8 +101,8 @@ window.VisualEvent = function () * @private */ "nonDomEvents": 0, - - /** + + /** * Array of objects holding information about each SCRIPT tag that is found in the DOM. Each * object contains the parameters: * {string} src The URL of the script source (or inline string if no src attribute) @@ -113,7 +113,7 @@ window.VisualEvent = function () */ "scripts": [] }; - + /** * DOM elements used by the class instance * @namespace @@ -134,14 +134,14 @@ window.VisualEvent = function () ' nodes. '+ ' events were attached to elements not currently in the document.'+ '')[0], - + /** * Display layer - background layer and container for Visual Event visual node indicators * @type element * @default See code */ "display": $('
')[0], - + /** * Lightbox layer - Template for information display about a given node, and the code for * a given event handler @@ -160,7 +160,7 @@ window.VisualEvent = function () ''+ ''+ '')[0], - + /** * Help layer - information about Visual Event and how to use it * @type element @@ -227,7 +227,7 @@ window.VisualEvent = function () 'Click anywhere to close this help box.
'+ ''+ '')[0], - + /** * Reference to the visual event node indicator - so we have a reference to what node we are @@ -237,7 +237,7 @@ window.VisualEvent = function () */ "activeEventNode": null }; - + this._construct(); }; @@ -246,7 +246,7 @@ VisualEvent.prototype = { /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * API methods */ - + /** * Shutdown Visual Event and return to the original page * @param {event} e Event object @@ -261,15 +261,15 @@ VisualEvent.prototype = { $(this.dom.lightbox).remove(); $(this.dom.label).remove(); $(this.dom.help).remove(); - + if ( typeof VisualEvent_Loader !== 'undefined' && !VisualEvent_Loader.jQueryPreLoaded ) { $.noConflict(); } - + VisualEvent.instance = null; }, - - + + /** * Reinitialise Visual Event (i.e. bring it up-to-date with any new events which might have * been added @@ -287,15 +287,15 @@ VisualEvent.prototype = { this.s.elements.splice(0, this.s.elements.length); this.s.nonDomEvents = 0; - + this._construct(); }, - - + + /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Private methods */ - + /** * Visual Event constructor * @private @@ -306,15 +306,15 @@ VisualEvent.prototype = { var i, iLen; var windowHeight = $(document).height(); var windowWidth = $(document).width(); - + /* Prep the DOM */ this.dom.display.style.width = windowWidth+'px'; this.dom.display.style.height = windowHeight+'px'; - + document.body.appendChild( this.dom.display ); document.body.appendChild( this.dom.lightbox ); document.body.appendChild( this.dom.label ); - + /* Event handlers */ $(this.dom.lightbox).bind('mouseover.VisualEvent', function (e) { that._timerClear( e ); @@ -323,12 +323,12 @@ VisualEvent.prototype = { } ).bind( 'mouseout.VisualEvent', function (e) { that._lightboxHide(); } ); - + $('div.Event_NodeRemove', this.dom.lightbox).bind('click.VisualEvent', function (e) { that.dom.activeEventNode.style.display = "none"; that.dom.lightbox.style.display = "none"; } ); - + $(document).bind( 'keydown.VisualEvent', function( e ) { if ( e.which === 0 || e.which === 27 ) { // esc that.close(); @@ -349,24 +349,24 @@ VisualEvent.prototype = { that.reInit(); } } ); - + /* Build the events list and display */ this.s.elements = this._eventsLoad(); for ( i=0, iLen=this.s.elements.length ; i'+type+
' event subscribed by '+source+'
'+
this._scriptSource( func )+
- '
'+type+ @@ -767,7 +794,7 @@ VisualEvent.prototype = { '