Added rerender support to the story macro

Allowing the selective refresh of the story tiddlers

js/WikiStore.js

@@ -389,6 +389,20 @@ WikiStore.prototype.renderMacro = function(macroName,targetType,tiddler,params,c
 	}
 };
 
+/*
+Re-renders a macro into a node
+*/
+WikiStore.prototype.rerenderMacro = function(node,changes,macroName,targetType,tiddler,params,content) {
+	var macro = this.macros[macroName];
+	if(macro) {
+		if(macro.rerender) {
+			macro.rerender(node,changes,targetType,tiddler,this,params,content);
+		} else {
+			node.innerHTML = macro.render(targetType,tiddler,this,params,content);
+		}
+	}
+};
+
 /*
 Refresh a DOM node and it's children so that it reflects the current state of the store
 	node: reference to the DOM node to be refreshed
@@ -436,7 +450,7 @@ WikiStore.prototype.refreshDomNode = function(node,changes,renderer,tiddler) {
 			}
 		}
 		if(hasChanged) {
-			node.innerHTML = renderer.render(tiddler,this,renderStep);
+			renderer.rerender(node,changes,tiddler,this,renderStep);
 		} else {
 			// If no change, just refresh the children
 			refreshChildNodes(node,renderer,tiddler);

js/WikiTextRenderer.js

@@ -39,6 +39,25 @@ WikiTextRenderer.prototype.render = function(tiddler,store,renderStep) {
 	}
 };
 
+WikiTextRenderer.prototype.rerender = function(node,changes,tiddler,store,renderStep) {
+	renderStep = renderStep || 0;
+	var step = this.renderSteps[renderStep];
+	if(renderStep < this.renderSteps.length) {
+		switch(step.type) {
+			case "main":
+				node.innerHTML = step.handler(tiddler,this,store,utils);
+				break;
+			case "macro":
+				store.rerenderMacro(node,changes,step.macro,
+								step.renderType,
+								tiddler,
+								step.params(tiddler,this,store,utils),
+								step.content(tiddler,this,store,utils));
+				break;
+		}
+	}
+};
+
 WikiTextRenderer.prototype.toString = function(type) {
 	var output = [],
 		stitchSplitLabel = function(name,value) {

js/macros/story.js

@@ -9,6 +9,37 @@ title: js/macros/story.js
 
 var utils = require("../Utils.js");
 
+// Parse the text of a story tiddler into an array of tiddler titles
+var parseStory = function(storyText) {
+	var storyLines = storyText.split("\n"),
+		tiddlers = [];
+	for(var t=0; t<storyLines.length; t++) {
+		var title = storyLines[t].trim();
+		if(title !== "") {
+			tiddlers.push(title);
+		}
+	}
+	return tiddlers;
+};
+
+// Search the children of a node looking for the required tiddler rendering
+var searchTiddlerNode = function(node,renderTiddler,renderTemplate) {
+	var renderAs;
+	if(renderTemplate) {
+		renderAs = renderTiddler;
+		renderTiddler = renderTemplate;
+	}
+	while(node !== null) {
+		if(node.getAttribute && node.getAttribute("data-tw-render-tiddler") === renderTiddler) {
+			if(!renderAs || (renderAs && node.getAttribute("data-tw-render-as") == renderAs)) {
+				return node;
+			}
+		}
+		node = node.nextSibling;
+	}
+	return null;
+};
+
 exports.macro = {
 	name: "story",
 	types: ["text/html","text/plain"],
@@ -17,20 +48,52 @@ exports.macro = {
 		template: {byName: true, type: "tiddler", optional: true}
 	},
 	render: function(type,tiddler,store,params) {
-		var tiddlers = store.getTiddlerText(params.story).split("\n"),
+		var tiddlers = parseStory(store.getTiddlerText(params.story)),
-			t,
 			output = [];
-		for(t=0; t<tiddlers.length; t++) {
+		for(var t=0; t<tiddlers.length; t++) {
-			var title = tiddlers[t].trim();
-			if(title !== "") {
 			if(params.template) {
-					output.push(store.renderTiddler(type,params.template,title));
+				output.push(store.renderTiddler(type,params.template,tiddlers[t]));
 			} else {
-					output.push(store.renderTiddler(type,title));
+				output.push(store.renderTiddler(type,tiddlers[t]));
-				}
 			}
 		}
 		return output.join("\n");
+	},
+	rerender: function(node,changes,type,tiddler,store,params) {
+		/*jslint browser: true */
+		// Get the tiddlers we're supposed to be displaying
+		var targetTiddlers = parseStory(store.getTiddlerText(params.story)),
+			currNode = node.firstChild,
+			nextNode;
+		for(var t=0; t<targetTiddlers.length; t++) {
+			// See if the node we want is already there
+			var tiddlerNode = searchTiddlerNode(currNode,targetTiddlers[t],params.template);
+			if(tiddlerNode === null) {
+				// If not, render the tiddler
+				var tmpNode = document.createElement("div");
+				tmpNode.innerHTML = params.template ?
+						store.renderTiddler(type,params.template,targetTiddlers[t]) :
+						store.renderTiddler(type,targetTiddlers[t]);
+				tiddlerNode = tmpNode.firstChild;
+				node.insertBefore(tiddlerNode,currNode);
+			} else {
+				// Delete any nodes preceding the one we want
+				while(currNode !== tiddlerNode) {
+					nextNode = currNode.nextSibling;
+					node.removeChild(currNode);
+					currNode = nextNode;
+				}
+				// Refresh it
+				store.refreshDomNode(tiddlerNode,changes);
+				currNode = currNode.nextSibling;
+			}
+		}
+		// Remove any unused nodes
+		while(currNode !== null) {
+			nextNode = currNode.nextSibling;
+			node.removeChild(currNode);
+			currNode = nextNode;
+		}
 	}
 };