Permalink
Browse files

Fixed delegation, changed syntax

  • Loading branch information...
averyvery committed Jan 4, 2012
1 parent 9637666 commit e28e9ea70f9adb92d0508d9418fc19aa45489d9a
Showing with 87 additions and 40 deletions.
  1. +5 −5 README.mdown
  2. +17 −9 index.html
  3. +14 −1 test/tests.js
  4. +49 −23 trackiffer.js
  5. +2 −2 trackiffer.min.js
View
@@ -1,4 +1,4 @@
-# Trackiffer 0.3
+# Trackiffer 0.3.1
Trackiffer is a dead-simple, yet suprisingly powerful, drop-in script for tracking
[GA events](http://code.google.com/apis/analytics/docs/tracking/eventTrackerGuide.html),
@@ -61,9 +61,9 @@ in the example, we're recording the value of a particular input at the moment th
## Extra Configuration
trackiffer({
- 'a' : {
+ 'body' : {
delay : false,
- delegate : 'body',
+ delegate : 'a',
rule : ['_trackEvent', 'Link', 'Social', '{{text}}', 1]
}
});
@@ -73,8 +73,8 @@ By assigning an object literal to your selector, you get two new options ('rule'
- delay - by setting delay to <code>false</code>, you override trackiffer's default outbound behavior. The event will no longer cancel, and the user
will no longer be forwarded to a new URL after 100ms.
- delegate - setting a <code>delegate</code> option allows you to bind events to DOM elements that might not exist yet on the page.
-Read more about delegate [here](http://api.jquery.com/delegate/). At the moment, these links WILL NOT be highlighted, but you can still
-test them by interacting and reading the console.
+Read more about delegate [here](http://api.jquery.com/delegate/). At the moment, these links WILL NOT be highlighted, but their element you delegate
+from will have a faint highlight. You can still test these elements by interacting with them and reading the console.
## Debug mode
View
@@ -113,24 +113,32 @@ <h3>100ms Delays</h3>
'.delay form' : ['_trackEvent', 'Delayed Link', 'Submit', 'Should submit 100ms after click']
});</pre>
</div>
- <div class="section config">
- <h3>Configuration</h3>
- <p>
- <a href="http://example.com" class="outbound">You can also configure outbound links NOT to delay and forward.</a>
- </p>
+ <div class="section">
+ <div class="config">
+ <h3>Configuration</h3>
+ <p>
+ <a href="http://example.com" class="outbound">You can also configure outbound links NOT to delay and forward.</a>
+ </p>
+ </div>
+ <script type="text/javascript">
+ var delegate_link = '<a href="http://example.com" class="delegated">You can also use \'delegate\' to track links that don\'t exist at execution time.</a>';
+ </script>
<pre>
trackiffer({
'.config a.outbound' : {
delay : false,
rule : ['_trackEvent', 'Not Delayed', 'Click', 'Should _not_ forward user user 100ms after click']
},
- 'a.delegated' : {
- delegate : '.config',
+ '.config' : {
+ delegate : 'a.delegated',
rule : ['_trackEvent', 'Delayed Link', 'Click', 'Should detect links added to the page after execution time']
}
});
-$('.config pre')
- .before('<a href="http://example.com" class="delegated">You can also use \'delegate\' to track links that don\'t exist at execution time.</a>');
+setTimeout(function(){
+ var delegate_link_example =
+ '&lt;a href="http://example.com" class="delegated"&gt;You can also use \'delegate\' to track links that don\'t exist at execution time.&lt;/a&gt;';
+ $('.config p').before(delegate_link);
+}, 1000);
</pre>
</div>
</div>
View
@@ -162,9 +162,14 @@
var $elem = $('<a href="http://example.com"></a>');
spyOn($elem, 'bind').andCallThrough();
T.bindEvent({rule : [], delegate : 'body'}, $elem, 'a');
- window.console && console.log && console.log($elem);
expect($elem.bind.callCount).toEqual(2);
});
+ it('delegates when told', function(){
+ var $body = $('body');
+ spyOn($body, 'delegate').andCallThrough();
+ T.bindEvent({rule : [], delegate : 'a'}, $body, 'body');
+ expect($body.delegate.callCount).toEqual(1);
+ });
});
describe('Debugging', function(){
@@ -242,6 +247,14 @@
T.highlightAllElements();
expect(T.highlightElement.callCount).toEqual(2);
});
+ it('acts on tracked AND delegated objects', function(){
+ spyOn(T, 'actOnTrackedElements');
+ spyOn(T, 'actOnDelegatedElements');
+ T.unHighlightAllElements();
+ T.highlightAllElements();
+ expect(T.actOnTrackedElements.callCount).toEqual(2);
+ expect(T.actOnDelegatedElements.callCount).toEqual(2);
+ });
it('unhighlights all elements', function(){
T.unHighlightAllElements();
T.undebug();
View
@@ -1,5 +1,5 @@
/*
- * Trackiffer v0.3
+ * Trackiffer v0.3.1
* Easy GA event tracking and debugging
* https://github.com/averyvery/trackiffer
*
@@ -19,7 +19,7 @@
/* @group setup */
- version : '0.3',
+ version : '0.3.1',
is_oldbrowser :
(navigator.userAgent.indexOf('MSIE 6') != -1) ||
@@ -32,6 +32,8 @@
tracked_elems : {},
+ delegated_elems : {},
+
event_types : {
'form' : 'submit',
'select' : 'change'
@@ -218,11 +220,14 @@
},
bindRulesToSelector : function(selector){
- var $elems = jQuery(selector);
- $elems.each(function(i){
- i === 0 && _t.log('| ' + $elems.length + 'x ' + selector);
- _t.bindEvent(_t.rules[selector], jQuery(this), selector);
- });
+ var $elems = jQuery(selector),
+ rule = _t.rules[selector],
+ logAndBind = function(i){
+ i === 0 && _t.log('| ' + $elems.length + 'x ' + selector);
+ _t.bindEvent(rule, jQuery(this), selector);
+ };
+ $elems.each(logAndBind);
+ rule && rule.delegate && logAndBind(0);
},
getEventType : function($elem){
@@ -280,12 +285,12 @@
}
if(event_data.delegate){
- $(event_data.delegate).delegate(selector, event_data.type + '.trackiffer', handler);
+ $elem.delegate(event_data.delegate, event_data.type + '.trackiffer', handler);
} else {
$elem.bind(event_data.type + '.trackiffer', handler);
}
- _t.bindDebugHover($elem, selector);
+ _t.bindDebugHover($elem, selector, event_data.delegate);
},
@@ -298,6 +303,8 @@
debug_outlines : {
'highlight' : 'rgb(0,200,200) 3px solid',
'hover' : 'rgb(250,0,0) 3px solid',
+ 'highlight_delegated' : 'rgba(0,200,200, 0.3) 6px solid',
+ 'hover_delegated' : 'rgba(250,0,0, 0.3) 6px solid'
},
checkHash : function(){
@@ -336,21 +343,31 @@
},
highlightAllElements : function(){
- _t.actOnAllElements(_t.highlightElement);
+ _t.actOnTrackedElements(_t.highlightElement);
+ _t.actOnDelegatedElements(_t.highlightDelegatedElement);
},
unHighlightAllElements : function(){
- _t.actOnAllElements(_t.unHighlightElement);
+ _t.actOnTrackedElements(_t.unHighlightElement);
+ _t.actOnDelegatedElements(_t.unHighlightElement);
},
- actOnAllElements : function(method){
+ actOnTrackedElements : function(method){
for(var rule in _t.tracked_elems){
if (_t.tracked_elems.hasOwnProperty(rule)) {
jQuery.each(_t.tracked_elems[rule], method);
}
}
},
+ actOnDelegatedElements : function(method){
+ for(var rule in _t.delegated_elems){
+ if (_t.delegated_elems.hasOwnProperty(rule)) {
+ jQuery.each(_t.delegated_elems[rule], method);
+ }
+ }
+ },
+
unHighlightElement : function(){
jQuery(this).css(_t.debug_outlines.property, '');
},
@@ -363,17 +380,26 @@
jQuery(this).css(_t.debug_outlines.property, _t.debug_outlines.hover);
},
- bindDebugHover : function($elem, selector){
- var hover_all = function(){
- _t.debugging && _t.tracked_elems[selector].each(_t.hoverElement);
- },
- hover_none = function(){
- _t.debugging && _t.tracked_elems[selector].each(_t.highlightElement);
- };
- if(typeof _t.tracked_elems[selector] === 'undefined'){
- _t.tracked_elems[selector] = jQuery();
- }
- _t.tracked_elems[selector] = _t.tracked_elems[selector].add($elem);
+ highlightDelegatedElement : function(){
+ jQuery(this).css(_t.debug_outlines.property, _t.debug_outlines.highlight_delegated);
+ },
+
+ hoverDelegatedElement : function(){
+ jQuery(this).css(_t.debug_outlines.property, _t.debug_outlines.hover_delegated);
+ },
+
+ bindDebugHover : function($elem, selector, delegated){
+ var elem_list = delegated ? _t.delegated_elems : _t.tracked_elems,
+ hover_all = function(){
+ _t.debugging && elem_list[selector].each(delegated ? _t.hoverDelegatedElement : _t.hoverElement);
+ },
+ hover_none = function(){
+ _t.debugging && elem_list[selector].each(delegated ? _t.highlightDelegatedElement : _t.highlightElement);
+ };
+ if(typeof elem_list[selector] === 'undefined'){
+ elem_list[selector] = jQuery();
+ }
+ elem_list[selector] = elem_list[selector].add($elem);
$elem.hover(hover_all, hover_none);
},
Oops, something went wrong.

0 comments on commit e28e9ea

Please sign in to comment.