Refactored macro event handling

Updated the slider macro to use the new mechanism to start with

js/App.js

@@ -108,23 +108,9 @@ var App = function() {
 		navigators.registerNavigator("StoryNavigator",new StoryNavigator(navigators));
 		// Use the story navigator for all links
 		navigators.install("a","StoryNavigator");
-		// Install an event handler for sliders
-		document.addEventListener("click",function(e) {
-			var el = e.target,
-				matchesSelector = el.matchesSelector || el.mozMatchesSelector ||
-					el.webkitMatchesSelector || el.oMatchesSelector || el.msMatchesSelector;
-			if(matchesSelector && matchesSelector.call(el,".tw-slider-label")) {
-				var currState = el.nextSibling.style.display;
-				el.nextSibling.style.display = currState === "block" ? "none" : "block";
-				e.preventDefault();
-				return false;
-			} else {
-				return true;
-			}
-		},false);
 		// Open the PageTemplate
 		var div = document.createElement("div");
-		div.innerHTML = this.store.renderTiddler("text/html","PageTemplate");
+		this.store.renderTiddlerInNode(div,"PageTemplate");
 		document.body.appendChild(div);
 		// Set up a timer to change the value of a tiddler
 		var me = this;

js/WikiStore.js

@@ -382,6 +382,48 @@ WikiStore.prototype.renderTiddler = function(targetType,title,templateTitle,opti
 	return null;
 };
 
+/*
+Renders a tiddler and inserts the HTML into a DOM node, and then attaches the event handlers needed by macros
+*/
+WikiStore.prototype.renderTiddlerInNode = function(node,title,templateTitle,options) {
+	node.innerHTML = this.renderTiddler("text/html",title,templateTitle,options);
+	this.attachEventHandlers(node,title,templateTitle);
+};
+
+/*
+Recursively attach macro event handlers for a node and its children
+*/
+WikiStore.prototype.attachEventHandlers = function(node,renderTiddler,renderTemplate) {
+	var me = this,
+		dispatchMacroEvent = function(event) {
+			var renderer = me.compileTiddler(renderTemplate ? renderTemplate : renderTiddler,"text/html"),
+				macroName = node.getAttribute("data-tw-macro"),
+				macro = me.macros[macroName],
+				step = node.getAttribute("data-tw-render-step");
+			macro.events[event.type](event,node,renderTiddler,me,renderer.renderSteps[step].params(renderTiddler,renderer,me,utils));
+		};
+	if(node.getAttribute) {
+		var macroName = node.getAttribute("data-tw-macro");
+		if(typeof macroName === "string") {
+			var macro = this.macros[macroName];
+			if(macro.events) {
+				for(var e in macro.events) {
+					node.addEventListener(e,dispatchMacroEvent,false);
+				}
+			}
+		}
+		if(node.hasAttribute("data-tw-render-tiddler")) {
+			renderTiddler = node.getAttribute("data-tw-render-tiddler");
+			renderTemplate = node.getAttribute("data-tw-render-template");
+		}
+	}
+	if(node.hasChildNodes) {
+		for(var t=0; t<node.childNodes.length; t++) {
+			this.attachEventHandlers(node.childNodes[t],renderTiddler,renderTemplate);
+		}
+	}
+};
+
 WikiStore.prototype.installMacro = function(macro) {
 	this.macros[macro.name] = macro;
 };
@@ -437,7 +479,7 @@ WikiStore.prototype.refreshDomNode = function(node,changes,renderer,tiddler) {
 	if(renderTiddler !== null) {
 		// Rerender the content of the node if the tiddler being rendered has changed
 		if(changes.hasOwnProperty(renderTiddler) || (renderTemplate && changes.hasOwnProperty(renderTemplate))) {
-			node.innerHTML = this.renderTiddler("text/html",renderTiddler,renderTemplate,{noWrap: true});
+			this.renderTiddlerInNode(node,renderTiddler,renderTemplate,{noWrap: true});
 		} else {
 			// If it hasn't changed, just refresh the child nodes
 			if(typeof renderTemplate !== "string") {

js/macros/slider.js

@@ -18,6 +18,14 @@ exports.macro = {
 		label: {byPos: 2, type: "text", optional: false},
 		tooltip: {byPos: 3, type: "text", optional: true}
 	},
+	events: {
+		click: function(event,node,tiddler,store,params) {
+			var el = node.firstChild.firstChild.nextSibling;
+			el.style.display = el.style.display === "block" ? "none" : "block";
+			event.preventDefault();
+			return false;
+		}
+	},
 	render: function(type,tiddler,store,params) {
 		if(type === "text/html") {
 			return utils.stitchSlider(type,

js/macros/story.js

@@ -67,7 +67,7 @@ exports.macro = {
 			if(tiddlerNode === null) {
 				// If not, render the tiddler
 				var tmpNode = document.createElement("div");
-				tmpNode.innerHTML = store.renderTiddler(type,targetTiddlers[t],params.template);
+				store.renderTiddlerInNode(tmpNode,targetTiddlers[t],params.template);
 				tiddlerNode = tmpNode.firstChild;
 				node.insertBefore(tiddlerNode,currNode);
 			} else {

tiddlywiki5/styles.css

@@ -95,6 +95,10 @@ a.tw-tiddlylink-missing {
     font-style: italic;
 }
 
+a.tw-slider-label::after {
+    content: "\00a0\27a4";
+}
+
 .label {
     text-transform: uppercase;
     font-weight: bold;
@@ -207,7 +211,6 @@ a.tw-tiddlylink-missing {
     text-shadow: rgba(255, 255, 255, 0.746094) 0px 1px 1px;
     text-transform: none;
     vertical-align: baseline;
-    width: 131px;
     word-spacing: 0px;
 }