JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.0.0.min.css">
<script src="http://fbug.googlecode.com/svn/lite/branches/firebug1.4/content/firebug-lite-dev.js"></script>
<div>
<ol>
<li><a href="#hash-url-test">test hash url</a></li>
<li><a href="http://www.google.com">test full url</a></li>
<li><a href="http://www.google.com#hellothar">test url with hash</a></li>
<li><a href="#overriden" data-tracking="elem-with-data-attr">test data attr override</a></li>
<li><span data-tracking="span-with-data-attr">test span element</span></li>
<li><img src="http://www.placekitten.com/200/50" /></li>
<li><img src="http://www.placekitten.com/200/60" data-tracking="img-data-attr-1" /></li>
</ol>
</div>
<div class="output"></div>
JavaScript
/**
* Tracking init
*/
$(function () {
Tracking.init({ trace: true });
Tracking.Router.init();
Tracking.Dictionary.init();
});
/**
* Tracking core
*/
(function (Tracking, $) {
var settings = { trace:false };
Tracking.init = function(options) {
$.extend(settings, options);
$("body").delegate("a, img, [data-tracking]", "click", function (e) {
var $elem = $(e.target);
var id = ($elem.data("tracking") || $elem.attr("href") || $elem.attr("src"));
Tracking.publish(id, e);
// testing only
e.preventDefault();
});
Tracking.log("tracking initialized.");
};
Tracking.log = function () {
if (window.console && window.console.log && settings.trace) {
console.log(Array.prototype.slice.call(arguments));
}
$(".output").append("<div>" + Array.prototype.slice.call(arguments) + "</div>");
};
Tracking.subscribe = function (event, fn) {
$(document).bind(event, fn);
};
Tracking.unsubscribe = function (event) {
$(document).unbind(event);
};
Tracking.publish = function (event, args) {
$({ ownerDocument: document }).trigger(event, args);
};
} (window.Tracking = window.Tracking || {}, jQuery));
/**
* Tracking Router - wires dictionary with callbacks
*/
(function (Router, $) {
Router.init = function () {
Tracking.subscribe("dictionary-ready", function (e, args) {
_addTable(args.dictionary);
});
Tracking.log("tracking router initialized.");
};
var _addTable = function (trackingDictionary) {
var l = trackingDictionary.length;
for (var i = 0; i<l; i++) {
Tracking.subscribe(trackingDictionary[i].id, trackingDictionary[i].call);
}
};
} (window.Tracking.Router = window.Tracking.Router || {}, jQuery));
/**
* Dictionary helpers
*/
(function...