Permalink
Browse files

Reved version to 1.0.0.

Added code to pause/resume trigger-tracker output.
Added code for easier access to the include and exclude lists.
Validated against jQuery 2.x.
Added a package.json and gulpfile.js for easier building.
Added a smile test file for validating against jQuery versions.
Moved IE console polyfill code out of trigger-tracker.js and into trigger-tracker-poly.js
Rebuilt new version creating non-versioned files and minified files.
Updated readme.md to include up-to-date docs
Updated the license to GNU GPL v3.0
  • Loading branch information...
intervalia committed Sep 27, 2014
1 parent 6defe0a commit 12280858e38dd2edb4a3d79a09b3b4b7dd4f6a25
Showing with 976 additions and 309 deletions.
  1. +95 −7 README.md
  2. +39 −0 gulpfile.js
  3. +31 −0 package.json
  4. +39 −0 test.html
  5. +317 −0 trigger-tracker-1.0.0.js
  6. +0 −13 trigger-tracker-min.js
  7. +88 −0 trigger-tracker-poly-1.0.0.js
  8. +88 −0 trigger-tracker-poly.js
  9. +11 −0 trigger-tracker-poly.min.js
  10. +255 −289 trigger-tracker.js
  11. +13 −0 trigger-tracker.min.js
View
102 README.md
@@ -3,16 +3,16 @@ jQuery triggerTracker
TriggerTracker is a tool for tracking jQuery events. It is a single JavaScript file that, when loaded, provides output to the browser's console related to jQuery event triggering and event handlers.
### Compatibility
## Compatability
triggerTracker has been tested with jQuery versions 1.7.0 through 1.11.0. I have not yet (March 13, 2014) tested with jQuery 2.x.
triggerTracker has been tested with jQuery versions 1.7.0 through 1.11.1. And jQuery 2.0.0 to 2.1.1.
### How to use triggerTracker
## How to use triggerTracker
Just load triggerTracker as soon as possible after loading jQuery.
```html
<script src="jQuery-1.11.0.min.js"></script>
<script src="jQuery-1.11.1.min.js"></script>
<script src="trigger-tracker.js"></script>
```
@@ -30,7 +30,7 @@ Below is some sample code to conditionaly load triggerTracker within the client-
background-color: #FFFFDD;
}
</style>
<script src="js/jQuery-1.11.0.js"></script>
<script src="js/jQuery-1.11.1.js"></script>
<script>
function addTriggerTracker() {
var tag = document.createElement("script"),
@@ -73,7 +73,7 @@ Below is some sample code to conditionaly load triggerTracker within the client-
The function `addTriggerTracker()` created the `<script src="trigger-tracker.js"></script>` tag and appends it to the `<head>` tag. *An optimization would be to have the code place the new `<script>` tag directly after the running code*
### How triggerTracker works
## How triggerTracker works
Copy the above code and create a stand-alone HTML file. Load this file into your browser. Make sure that **jQuery** and **triggerTracker** are in the correct folder so they get loaded.
@@ -129,7 +129,7 @@ Click on the arrow just to the left of the `TRIGGER: (selected) body` to open th
$body.trigger("selected");
}
}
1) Duration of trigger: 0.000ms
1) Duration of trigger: 0.000ms
Returned: undefined
1) Duration of handler: 2.000ms
```
@@ -140,4 +140,92 @@ Browser originating triggers do not show in triggerTracker. So we did not see a
More information can be found in the wiki: https://github.com/intervalia/triggerTracker/wiki
## New functions in version 1.0.0
I added a few new functions to version 1.0.0 that allows the user to pause and resume the trigger tracker output. As well as easier code to create an event include and exclude list.
All of these functions are accessed from the window.ttrack object.
### To pause the trigger-tracker output call the pause function from the browser's console:
```javascript
ttrack.pause();
```
### To resume the trigger-tracker output call the pause function from the browser's console:
```javascript
ttrack.resume();
```
### Limiting the events you see
To limit the events that trigger-tracker displays in the console you can use either `ttrack.addExcludeEvent()` or `ttrack.addIncludeEvent()`.
Say you didn't want to see any `mousemove` events. From the console you would type:
```javascript
ttrack.addExcludeEvent('mousemove');
```
If you wanted to exclude all mouse events, in the current version, you would have to call ttrack.addExcludeEvent() once per event.
```javascript
ttrack.addExcludeEvent('mousemove');
ttrack.addExcludeEvent('mouseup');
ttrack.addExcludeEvent('mousedown');
ttrack.addExcludeEvent('mouseover');
ttrack.addExcludeEvent('mouseout');
```
I play to add reqular expressions to these list in the future.
If you only wanted to see your custom event 'close-dialog' then you would enter the following from the console:
```javascript
ttrack.addIncludeEvent('close-dialog');
```
If you set values for both the include list and the exclude list you may not get any events since the lists are mutually exclusive.
To clear the two event list you can call either `ttrack.clearExcludeList()` or `ttrack.clearIncludeList()`. These two commands clear out their associated list of events.
If your include an exclude lists become a confusing mess, then you can clear them by entering the following in the console:
```javascript
ttrack.clearExcludeList();
ttrack.clearIncludeList();
```
#### $.triggerTrackerExcludeList and $.triggerTrackerIncludeList
The event lists are stored in the jQuery variables $.triggerTrackerExcludeList and $.triggerTrackerIncludeList. You can always manipulate these variables directly to remove an individual entry or just to have more control over the list.
**Again, at this time [2014-09-27], the entries in these lists must be exact matches of the event names, includeing case. I will improve this to use regular expressions and ignore case in the future.**
## IE and trigger-tracker-poly.
To help reduce the size of trigger-tracker I moved some polyfill code out of trigger-tracker.js and placed it into the file trigger-tracker-poly.js.
trigger-tracker-poly is **only** needed to polyfill some of the console output commands in the various version of IE.
If you are planning to run trigger-tracker in IE, then include trigger-tracker-poly.js before including trigger-tracker.js
```html
<script src="jQuery-1.11.1.min.js"></script>
<script src="trigger-tracker-poly.min.js"></script>
<script src="trigger-tracker.min.js"></script>
```
If you are not planning to run trigger-tracker on IE, then you don't need to include trigger-tracker-poly.js.
```html
<script src="jQuery-1.11.1.min.js"></script>
<script src="trigger-tracker.min.js"></script>
```
## gulpfile.js
I added a new gulpfile.js to allow for simple builds. This will auto-build trigger-tracker and trigger-tracker-poly.
The build process takes the current version, as of 2014-09-27 that is 1.0.0 and make a non-versioned copy of it. Then it minifies the code and saves it with the .min.js extension.
View
@@ -0,0 +1,39 @@
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var version = "1.0.0";
// Lint Task
gulp.task('lint', function() {
return gulp.src('./*-'+version+'.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
gulp.task('ttrack', function() {
return gulp.src('./trigger-tracker-'+version+'.js')
.pipe(rename('trigger-tracker.js'))
.pipe(gulp.dest('.'))
.pipe(rename('trigger-tracker.min.js'))
.pipe(uglify({preserveComments: 'some'}))
.pipe(gulp.dest('.'));
});
gulp.task('ttrackPoly', function() {
return gulp.src('./trigger-tracker-poly-'+version+'.js')
.pipe(rename('trigger-tracker-poly.js'))
.pipe(gulp.dest('.'))
.pipe(rename('trigger-tracker-poly.min.js'))
.pipe(uglify({preserveComments: 'some'}))
.pipe(gulp.dest('.'));
});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch("./*-"+version+".js", ['lint', 'ttrack', 'ttrackPoly']);
});
// Default Task
gulp.task('default', ['lint', 'ttrack', 'ttrackPoly', 'watch']);
View
@@ -0,0 +1,31 @@
{
"name": "triggerTracker",
"version": "1.0.0",
"description": "Module to track events in jQuery",
"main": "test.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/intervalia/triggerTracker.git"
},
"keywords": [
"jQuery",
"events",
"tracking"
],
"author": "Michael Collins",
"license": "GNU GLP v3.0",
"bugs": {
"url": "https://github.com/intervalia/triggerTracker/issues"
},
"homepage": "https://github.com/intervalia/triggerTracker",
"devDependencies": {
"gulp": "^3.8.8",
"gulp-jshint": "^1.8.4",
"gulp-uglify": "^1.0.1",
"gulp-rename": "^1.2.0",
"gulp-sourcemaps": "^1.2.2"
}
}
View
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<title>Trigger Tracker Test</title>
<!-- script src="http://code.jquery.com/jquery-1.11.1.min.js"></script -->
<!-- script src="http://code.jquery.com/jquery-2.0.0.min.js"></script -->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="trigger-tracker-poly-1.0.0.js"></script>
<script src="trigger-tracker-1.0.0.js"></script>
</head>
<body>
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<script>
var $doc = $(document);
function docClickHandler(evt) {
$target = $(evt.target);
if ($target.is(".one")) {
return false;
}
if ($target.is(".three")) {
$doc.trigger("mine");
}
}
function docMineHandler(evt) {
}
$doc.ready(function() {
$doc.on("click", docClickHandler);
$doc.on("mine", docMineHandler);
});
</script>
</body>
</html>
Oops, something went wrong.

0 comments on commit 1228085

Please sign in to comment.