bunch of refactoring, bug fixes, added capture-phase handling for 'bl…

…ur', 'focus', and 'change', wired 'focus' and 'blur' up to 'start-hover' and 'end-hover' respectively

examples/test.html

@@ -7,8 +7,9 @@
 
 <h1>DOMEventBridge</h1>
 
-<p id="p1">Now is the <a rel="dombridge nav" href="http://time.com">time</a> for all good men to come to the aid of their country. <input type="button" value="yes" rel="dombridge popup" data-val="woot!"></p>
-<p id="p2">A deferred <input type="button" value="button" rel="dombridge popup" data-val="later!"></p>
+<p>(hint: try both clicking on the links/buttons and also keyboard focusing via &lt;tab> and activating with keyboard &lt;space> or &lt;enter>)</p>
+<p id="p1">Now is the <a rel="dombridge nav" href="http://time.com">time</a> for all good men to come to the aid of their country. <input type="button" value="yes" rel="dombridge popup" data-val="woot!"> (events on this button handled immediately)</p>
+<p id="p2">A deferred <input type="button" value="button" rel="dombridge popup" data-val="later!"> (handling of events on this button deferred for 10 seconds after page load)</p>
 
 <!-- example "tracking" element in page DOM -->
 <div style="display:none" rel="dombridge tracking" data-val="super"></div>

examples/test.js

@@ -2,11 +2,11 @@
 
 	// NOTE: this example uses jQuery only for demo purposes
 
-	global.EventHub.DOMBridge.bridgeFromContainer("body");
+	global.EventHub.DOMBridge.bridgeFrom("body");
 
 	// example 1 (handling a 'nav' element)
 	global.EventHub.DOMBridge
-	.filter({ elementType: "nav" })
+	.filter({ elementTypes: "nav" })
 	.on("do",function(el,elementType,evt){
 		evt.preventDefault();
 		alert("Navigate to: " + $(el).attr("href"));
@@ -15,21 +15,21 @@
 
 	// example 2 (additional event types, for a 'popup' element)
 	global.EventHub.DOMBridge
-	.filter({ elementTypes: ["popup"], selector: "#p1" })
+	.filter({ elementTypes: ["popup"], inSelector: "#p1" })
 	.on("do",function(el,elementType,evt){
 		alert("Popup '" + $(el).attr("data-val") + "'");
 	})
 	.on("start-hover",function(el,elementType,evt){
-		$(el).css({"textTransform": "uppercase"});
+		$(el).val("yes hovering");
 	})
 	.on("end-hover",function(el,elementType,evt){
-		$(el).css({"textTransform": ""});
+		$(el).val("yes");
 	});
 
 
 	// example 3 (preserving deferred event handling)
 	var filt = global.EventHub.DOMBridge
-	.filter({ elementType: "popup", selector: "#p2" })
+	.filter({ elementTypes: "popup", inSelector: "#p2" })
 	.preserve("do")
 	.preserveOnce("start-hover");
 
@@ -40,26 +40,27 @@
 			alert("Popup '" + $(el).attr("data-val") + "'");
 		})
 		.once("start-hover",function(el,elementType,evt){
-			$("#p2").append("hovered!");
+			$("#p2").append(" **BUTTON HOVERED**");
 		});
 	},10000);
 
 
 	// example 4 (handling dom-ready)
-	global.EventHub.once("dombridge:dom-ready",function(){
+	global.EventHub.on("dombridge:dom-ready",function(){
 		console.log("global: dom-ready");
 	});
-	global.EventHub.DOMBridge.filter(/*empty*/).once("dom-ready",function(){
-		console.log("filtered: dom-ready");
+	global.EventHub.DOMBridge.events.on("dom-ready",function(){
+		console.log("DOMBridge: dom-ready");
 	});
 
 
 	// example 5 (handling 'tracking' elements found in DOM at page load)
+	// NOTE: relies on custom bridge event type registered in "trackingelementevent.js"
 	global.EventHub.on("dombridge:tracking",function(el,elementType){
 		console.log("global: 'tracking' element found, '" + $(el).attr("data-val") + "'");
 	});
-	global.EventHub.DOMBridge.filter(/*empty*/).on("tracking",function(el,elementType){
-		console.log("filtered: 'tracking' element found, '" + $(el).attr("data-val") + "'");
+	global.EventHub.DOMBridge.events.on("tracking",function(el,elementType){
+		console.log("DOMBridge: 'tracking' element found, '" + $(el).attr("data-val") + "'");
 	});
 
 })(window,jQuery);

examples/trackingelementevent.js

@@ -10,9 +10,9 @@
 	global.EventHub.preserve("dombridge:tracking");
 
 	// search the DOM, once it's ready, for any "tracking" elements
-	global.EventHub.once("dombridge:dom-ready",function(){
+	global.EventHub.DOMBridge.events.on("dom-ready",function(){
 		$("[rel*='dombridge']").filter("[rel*='tracking']").each(function(){
-			global.EventHub.emit("dombridge:tracking",$(this),"tracking");
+			global.EventHub.emit("dombridge:tracking",this,"tracking");
 		});
 	});
 })(window,jQuery);