Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Spelling #70

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions Readme.markdown
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Visual Event - visually inspect Javascript events
# Visual Event - visually inspect JavaScript events

Visual Event is a Javascript bookmarklet which provides debugging information about events that have been attached to DOM elements. Visual Event shows:
Visual Event is a JavaScript bookmarklet which provides debugging information about events that have been attached to DOM elements. Visual Event shows:

* Which elements have events attached to them
* The type of events attached to an element
Expand All @@ -15,7 +15,7 @@ In addition to being useful for debugging your own code, Visual Event can be use
As Visual Event is a bookmarklet, installing and running it on any web-page is extremely simple:

* Open the [Visual Event bookmarklet page](http://sprymedia.co.uk/VisualEvent) and drag the "Visual Event" link to your bookmark bar
* Load a web-page which uses one of the supported Javascript libraries
* Load a web-page which uses one of the supported JavaScript libraries
* Click "Visual Event" in your bookmark bar
* View the event handlers which are attached to the document elements.

Expand All @@ -24,9 +24,9 @@ A demo of Visual Event that is automatically loaded is [available](http://spryme

## How it works

It turns out that there is no standard method provided by the W3C recommended DOM interface to find out what event listeners are attached to a particular element. While this may appear to be an oversight, there was a proposal to include a property called [eventListenerList](http://www.w3.org/TR/2002/WD-DOM-Level-3-Events-20020208/changes.html) to the level 3 DOM specification, but was unfortunately been removed in later drafts. As such we are forced to looked at the individual Javascript libraries, which typically maintain a cache of attached events (so they can later be removed and perform other useful abstractions).
It turns out that there is no standard method provided by the W3C recommended DOM interface to find out what event listeners are attached to a particular element. While this may appear to be an oversight, there was a proposal to include a property called [eventListenerList](http://www.w3.org/TR/2002/WD-DOM-Level-3-Events-20020208/changes.html) to the level 3 DOM specification, but was unfortunately been removed in later drafts. As such we are forced to looked at the individual JavaScript libraries, which typically maintain a cache of attached events (so they can later be removed and perform other useful abstractions).

As such, in order for Visual Event to show events, it must be able to parse the event information out of a Javascript library. Currently the following libraries are supported by Visual Event:
As such, in order for Visual Event to show events, it must be able to parse the event information out of a JavaScript library. Currently the following libraries are supported by Visual Event:

* DOM 0 events
* jQuery 1.2+
Expand All @@ -40,9 +40,9 @@ As such, in order for Visual Event to show events, it must be able to parse the

Any help with improvements and suggestions for Visual Event are very welcome indeed! If you hit a specific problem, then please open an issue on GitHub for the problem you are encountering, including a link to the page where the problem occurs. Forks and pull requests are also very much encouraged!

One area which may be of interest to you is how to add support for additional Javascript libraries. The key thing that is needed is access to the event cache that the library uses, since without that it is impossible to determine what nodes have events and the attached code.
One area which may be of interest to you is how to add support for additional JavaScript libraries. The key thing that is needed is access to the event cache that the library uses, since without that it is impossible to determine what nodes have events and the attached code.

The VisualEvent class has a static array called `VisualEvent.parsers` which is an array of functions - to add a new parser, just push your function onto this array. The function must return a Javascript array of objects with the following parameters:
The VisualEvent class has a static array called `VisualEvent.parsers` which is an array of functions - to add a new parser, just push your function onto this array. The function must return a JavaScript array of objects with the following parameters:

```javascript
[
Expand All @@ -64,7 +64,7 @@ The VisualEvent class has a static array called `VisualEvent.parsers` which is a

## Building Visual Event

In order to run a local copy of Visual Event you must build it, since this process does file concatenation, which brings in the library parsers to the main file. The build process will also build the JSDoc documentation and compress the Javascript files (unless made with debug).
In order to run a local copy of Visual Event you must build it, since this process does file concatenation, which brings in the library parsers to the main file. The build process will also build the JSDoc documentation and compress the JavaScript files (unless made with debug).

To build Visual Event, all you need is a system which will run bash scripts and enter the command `./build.sh debug` in your terminal. This will create a new directory in the "builds" directory with the correct loader and the build Visual Event directory (note the timestamp is used to help prevent caching issues for the bookmarklet, both during development and when deployed). The following is the usage for the build script:

Expand All @@ -76,7 +76,7 @@ Visual Event build script - usage:
automatically prepended. For example:
localhost/VisualEvent/builds - default if no option is provided
sprymedia.co.uk/VisualEvent/builds
debug - Debug indicator. Will not compress the Javascript
debug - Debug indicator. Will not compress the JavaScript

Example deploy build:
./build.sh sprymedia.co.uk/VisualEvent/builds
Expand Down
4 changes: 2 additions & 2 deletions bookmarklet.html
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,11 @@
<h1>Visual Event bookmarklet generator</h1>
<p>
Visual Event is a bookmarklet which will visually show you which elements on an HTML
page have Javascript events assigned to them. This page can be used to generate the
page have JavaScript events assigned to them. This page can be used to generate the
bookmarklet that you want to use for testing or deployment of Visual Event.
</p>
<p>
To generate a bookmarklet, modify the Javascript in the textarea below, the
To generate a bookmarklet, modify the JavaScript in the textarea below, the
bookmarklet link will be updated as you type (typically you will only need to
change the URL to load Visual Event) and then click and drag the
<i>Visual Event</i> link to your bookmarklet bar.
Expand Down
8 changes: 4 additions & 4 deletions build.sh
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ if [ "$1" = "-h" ]; then
directory name is automatically appended. For example:
localhost/VisualEvent/builds - default if no option is provided
sprymedia.co.uk/VisualEvent/builds
debug - Debug indicator. Will not compress the Javascript
debug - Debug indicator. Will not compress the JavaScript

Example deploy build:
./build.sh sprymedia.co.uk/VisualEvent/builds
Expand Down Expand Up @@ -57,16 +57,16 @@ mkdir -p "$BUILD"


# JAVASCRIPT
echo " Javascript"
echo " JavaScript"
mkdir "$BUILD_JS"

echo " Combining Javascript files"
echo " Combining JavaScript files"
cp "$JS/VisualEvent_Loader.js" "$BUILD_BASE/VisualEvent_Loader.js"
cat "$JS/jquery.js" "$JS/shCore.js" "$JS/VisualEvent.js" "$JS"/parsers/*.js > "$BUILD_JS/VisualEvent-jQuery.js"
cat "$JS/shCore.js" "$JS/VisualEvent.js" "$JS"/parsers/*.js > "$BUILD_JS/VisualEvent.js"

if [ "$DEBUG" != "debug" -a -e $UGLIFYJS ]; then
echo " Compressing Javascript"
echo " Compressing JavaScript"
$UGLIFYJS $BUILD_BASE/VisualEvent_Loader.js > $BUILD_BASE/VisualEvent_Loader.min.js
$UGLIFYJS $BUILD_JS/VisualEvent-jQuery.js > $BUILD_JS/VisualEvent-jQuery.min.js
$UGLIFYJS $BUILD_JS/VisualEvent.js > $BUILD_JS/VisualEvent.min.js
Expand Down
26 changes: 13 additions & 13 deletions js/VisualEvent.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* @summary Visual Event
* @description Visual Event - show Javascript events which have been attached to objects, and
* @description Visual Event - show JavaScript events which have been attached to objects, and
* the event's associated function code, visually.
* @file VisualEvent_Loader.js
* @author Allan Jardine (www.sprymedia.co.uk)
Expand All @@ -20,8 +20,8 @@

/**
* 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
* event. It does this by parsing through the cache of Javascript libraries (as there is no DOM
* 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.
Expand Down Expand Up @@ -172,11 +172,11 @@ window.VisualEvent = function ()
'<div id="Event_Help">'+
'<div class="Event_HelpInner">'+
'<h1>Visual Event help</h1>'+
'<p>Visual Event will show which elements on any given page have Javascript events attached '+
'<p>Visual Event will show which elements on any given page have JavaScript events attached '+
'to them, what those events are and the code associated with the events. In Webkit '+
'browsers and Opera, Visual Event will also indicate where the code in question was '+
'defined.</p>'+
'<p>Note that Visual Event is only able to show events for Javascript libraries for which '+
'<p>Note that Visual Event is only able to show events for JavaScript libraries for which '+
'it has a parser. This is currently: DOM0 events, Glow, jQuery, MooTools, Prototype and YUI2.</p>'+
'<p>Commands:</p>'+
'<table cellpadding="0" cellspacing="0" border="0">'+
Expand Down Expand Up @@ -225,7 +225,7 @@ window.VisualEvent = function ()
'</table>'+
'<p>Visual Event is open source software (GPLv2). If you would like to contribute an '+
'enhancement, please fork the project on '+
'<a href="https://github.com/DataTables/VisualEvent" target="_blank">Github</a>!</p>'+
'<a href="https://github.com/DataTables/VisualEvent" target="_blank">GitHub</a>!</p>'+
'<p class="Event_HelpClose">Click anywhere to close this help box.</p>'+
'</div>'+
'</div>')[0],
Expand Down Expand Up @@ -360,7 +360,7 @@ VisualEvent.prototype = {

this._renderLabel();

/* Load the text of all the Javascript on the page so we can try to find source */
/* Load the text of all the JavaScript on the page so we can try to find source */
this._scriptsLoad();
},

Expand All @@ -379,7 +379,7 @@ VisualEvent.prototype = {


/**
* Hide hte help box
* Hide the help box
* @private
*/
"_hideHelp": function () {
Expand All @@ -389,11 +389,11 @@ VisualEvent.prototype = {


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Javascript source handling
* JavaScript source handling
*/

/**
* Parse the DOM for script tags and store the Javascript that is found. For any scripts which
* Parse the DOM for script tags and store the JavaScript that is found. For any scripts which
* have a 'src' attribute, add them to a queue for Ajax loading and then start the queue running
* @private
*/
Expand Down Expand Up @@ -511,7 +511,7 @@ VisualEvent.prototype = {


/**
* Get the name of a file from a URL (i.e. the last part in a slash seperated string)
* Get the name of a file from a URL (i.e. the last part in a slash separated string)
* @param {string} src URL to get the file name from
* @returns {string} File name
* @private
Expand Down Expand Up @@ -553,7 +553,7 @@ VisualEvent.prototype = {

/* Add the API array information - if it is available */
if ( typeof VisualEvents == 'object' ) {
if ( this._ceckIntegrity( VisualEvents ) ) {
if ( this._checkIntegrity( VisualEvents ) ) {
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't tell if this is really a thing or just a typo...

elements = this._combineEvents( elements, VisualEvents );
}
}
Expand Down Expand Up @@ -1161,7 +1161,7 @@ VisualEvent.prototype = {
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/**
* Javascript library parsers which will find information about the nodes and events which are
* JavaScript library parsers which will find information about the nodes and events which are
* used in the page. This is an array of functions which must return an array of objects with
* the following parameters
* {element} node The DOM element in question
Expand Down
8 changes: 4 additions & 4 deletions js/VisualEvent_Loader.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* @summary VisualEvent_Loader
* @description Loader for VisualEvent - injects the required CSS and Javascript into a page
* @description Loader for VisualEvent - injects the required CSS and JavaScript into a page
* @file VisualEvent_Loader.js
* @author Allan Jardine (www.sprymedia.co.uk)
* @license GPL v2
Expand All @@ -19,7 +19,7 @@
if ( typeof VisualEvent_Loader == 'undefined' ) {

/**
* VisualEvent_Loader is a class which will provide pre-loading of Javascript and CSS files
* VisualEvent_Loader is a class which will provide pre-loading of JavaScript and CSS files
* for VisualEvent based on the environment the script is running in (for example if jQuery is
* already available or not).
*
Expand Down Expand Up @@ -70,7 +70,7 @@ window.VisualEvent_Loader = function ()

VisualEvent_Loader.prototype = {
/**
* Constrctor - show a loading element to the end user and then load up the various files
* Constructor - show a loading element to the end user and then load up the various files
* that are needed
* @returns {undefined}
* @private
Expand Down Expand Up @@ -136,7 +136,7 @@ VisualEvent_Loader.prototype = {

/**
* Load a new file into the DOM, and have it processed based on its type. This can be a
* Javascript file, a CSS file or an image
* JavaScript file, a CSS file or an image
* @param {string} file URL to the file to load
* @param {string} type The file type. Can be "css", "js" or "image"
* @returns {undefined}
Expand Down