From 69a0c46447402535d446e86fe9a658beb0541eb6 Mon Sep 17 00:00:00 2001
From: Jeremy Ruston <jeremy@osmosoft.com>
Date: Tue, 26 Jun 2012 19:54:51 +0100
Subject: [PATCH] Split the story macro out into two macros

Now the story macro manages the story element sequence, while the
navigator macro listens for the navigation events, and modifies the
story tiddler as required. Also introduces a history tiddler that
retains the history stack so that we can animate navigation properly
(as distinct from animating the addition and removal of story elements).

Note that the zoomin storyview isn't quite finished, but this is a
stable point to commit these changes.
---
 core/modules/macros/navigator.js            | 208 ++++++++++
 core/modules/macros/story/story.js          | 436 +++++++++-----------
 core/modules/macros/story/views/classic.js  |  40 +-
 core/modules/macros/story/views/sideways.js |  18 +-
 core/modules/macros/story/views/zoomin.js   |  89 ++--
 core/templates/PageTemplate.tid             |  14 +-
 tw5.com/wiki/StoryTiddlers.tid              |   8 +-
 7 files changed, 489 insertions(+), 324 deletions(-)
 create mode 100644 core/modules/macros/navigator.js

diff --git a/core/modules/macros/navigator.js b/core/modules/macros/navigator.js
new file mode 100644
index 000000000..57d617495
--- /dev/null
+++ b/core/modules/macros/navigator.js
@@ -0,0 +1,208 @@
+/*\
+title: $:/core/modules/macros/navigator.js
+type: application/javascript
+module-type: macro
+
+Traps navigation events to update a story tiddler and history tiddler. Can also optionally capture navigation target in a specified text reference.
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+exports.info = {
+	name: "navigator",
+	params: {
+		story: {byName: "default", type: "text"}, // Actually a tiddler, but we don't want it to be a dependency
+		history: {byName: "default", type: "text"}, // Actually a tiddler, but we don't want it to be a dependency
+		defaultViewTemplate: {byName: true, type: "tiddler"},
+		defaultEditTemplate: {byName: true, type: "tiddler"},
+		set: {byName: true, type: "tiddler"}
+	}
+};
+
+exports.getStory = function() {
+	var storyTiddler = this.wiki.getTiddler(this.params.story);
+	this.story = {tiddlers: []};
+	if(storyTiddler && $tw.utils.hop(storyTiddler.fields,"text")) {
+		this.story = JSON.parse(storyTiddler.fields.text);
+	}
+};
+
+exports.saveStory = function() {
+	if(this.hasParameter("story")) {
+		this.wiki.addTiddler(new $tw.Tiddler(this.wiki.getTiddler(this.params.story),{title: this.params.story, text: JSON.stringify(this.story)}));
+	}
+};
+
+exports.getHistory = function() {
+	var historyTiddler = this.wiki.getTiddler(this.params.history);
+	this.history = {stack: []};
+	if(historyTiddler && $tw.utils.hop(historyTiddler.fields,"text")) {
+		this.history = JSON.parse(historyTiddler.fields.text);
+	}
+};
+
+exports.saveHistory = function() {
+	if(this.hasParameter("history")) {
+		this.wiki.addTiddler(new $tw.Tiddler(this.wiki.getTiddler(this.params.history),{title: this.params.history, text: JSON.stringify(this.history)}));
+	}
+};
+
+exports.handleEvent = function(event) {
+	if(this.eventMap[event.type]) {
+		this.eventMap[event.type].call(this,event);
+	}
+};
+
+exports.eventMap = {};
+
+// Navigate to a specified tiddler
+exports.eventMap["tw-navigate"] = function(event) {
+	// Update the story tiddler if specified
+	if(this.hasParameter("story")) {
+		this.getStory();
+		var template = this.params.defaultViewTemplate || "$:/templates/ViewTemplate",
+			t,tiddler,slot;
+		// See if the tiddler is already there
+		for(t=0; t<this.story.tiddlers.length; t++) {
+			if(this.story.tiddlers[t].title === event.navigateTo) {
+				tiddler = t;
+			}
+		}
+		// If not we need to add it
+		if(tiddler === undefined) {
+			// First we try to find the position of the story element we navigated from
+			var navigateFromTitle;
+			if(event.navigateFromStoryElement) {
+				navigateFromTitle = event.navigateFromStoryElement.params.target;
+			}
+			slot = 0;
+			if(navigateFromTitle !== undefined) {
+				for(t=0; t<this.story.tiddlers.length; t++) {
+					if(this.story.tiddlers[t].title === navigateFromTitle) {
+						slot = t + 1;
+					}
+				}	
+			}
+			// Add the tiddler
+			this.story.tiddlers.splice(slot,0,{title: event.navigateTo});
+			// Save the story
+			this.saveStory();
+		}
+	}
+	// Set the tiddler if specified
+	if(this.hasParameter("set")) {
+		this.wiki.setTextReference(this.params.set,event.navigateTo);
+	}
+	// Add the tiddler to the top of the history stack
+	this.getHistory();
+	this.history.stack.push({title: event.navigateTo});
+	this.saveHistory();
+	event.stopPropagation();
+	return false;
+};
+
+// Place a tiddler in edit mode
+exports.eventMap["tw-EditTiddler"] = function(event) {
+	if(this.hasParameter("story")) {
+		var storyTiddler, storyRecord, tiddler, t;
+		// Put the specified tiddler into edit mode
+		this.getStory();
+		for(t=0; t<this.story.tiddlers.length; t++) {
+			storyRecord = this.story.tiddlers[t];
+			if(storyRecord.title === event.tiddlerTitle && !storyRecord.draft) {
+				// Set the story record to the draft of the specified tiddler
+				storyRecord.draft = "Draft " + (new Date()) + " of " + event.tiddlerTitle;
+				// Get the current value of the tiddler we're editing
+				tiddler = this.wiki.getTiddler(event.tiddlerTitle);
+				// Save the initial value of the draft tiddler
+				this.wiki.addTiddler(new $tw.Tiddler(
+					{
+						text: "Type the text for the tiddler '" + event.tiddlerTitle + "'"
+					},
+					tiddler,
+					{
+						title: storyRecord.draft,
+						"draft.title": event.tiddlerTitle,
+						"draft.of": event.tiddlerTitle
+					}));
+			}
+		}
+		this.saveStory();
+	}
+	event.stopPropagation();
+	return false;
+};
+
+// Take a tiddler out of edit mode, saving the changes
+exports.eventMap["tw-SaveTiddler"] = function(event) {
+	if(this.hasParameter("story")) {
+		var storyTiddler, storyRecord, tiddler, storyTiddlerModified, t;
+		this.getStory();
+		storyTiddlerModified = false;
+		for(t=0; t<this.story.tiddlers.length; t++) {
+			storyRecord = this.story.tiddlers[t];
+			if(storyRecord.draft === event.tiddlerTitle) {
+				tiddler = this.wiki.getTiddler(storyRecord.draft);
+				if(tiddler && $tw.utils.hop(tiddler.fields,"draft.title")) {
+					// Save the draft tiddler as the real tiddler
+					this.wiki.addTiddler(new $tw.Tiddler(tiddler,{title: tiddler.fields["draft.title"],"draft.title": undefined, "draft.of": undefined}));
+					// Remove the draft tiddler
+					this.wiki.deleteTiddler(storyRecord.draft);
+					// Remove the original tiddler if we're renaming it
+					if(tiddler.fields["draft.of"] !== tiddler.fields["draft.title"]) {
+						this.wiki.deleteTiddler(tiddler.fields["draft.of"]);
+					}
+					// Make the story record point to the newly saved tiddler
+					storyRecord.title = tiddler.fields["draft.title"];
+					storyRecord.draft = undefined;
+					// Check if we're modifying the story tiddler itself
+					if(tiddler.fields["draft.title"] === this.params.story) {
+						storyTiddlerModified = true;
+					}
+				}
+			}
+		}
+		if(!storyTiddlerModified) {
+			this.saveStory();
+		}
+	}
+	event.stopPropagation();
+	return false;
+};
+
+// Close a specified tiddler
+exports.eventMap["tw-CloseTiddler"] = function(event) {
+	if(this.hasParameter("story")) {
+		var t,storyElement;
+		this.getStory();
+		// Look for tiddlers with this title to close
+		for(t=this.story.tiddlers.length-1; t>=0; t--) {
+			if(this.story.tiddlers[t].title === event.tiddlerTitle) {
+				this.story.tiddlers.splice(t,1);
+			}
+		}
+		this.saveStory();
+	}
+	event.stopPropagation();
+	return false;
+};
+
+exports.executeMacro = function() {
+	var attributes = {};
+	if(this.classes) {
+		attributes["class"] = this.classes.slice(0);
+	}
+	for(var t=0; t<this.content.length; t++) {
+		this.content[t].execute(this.parents,this.tiddlerTitle);
+	}
+	return $tw.Tree.Element("div",attributes,this.content,{
+		events: ["tw-navigate","tw-EditTiddler","tw-SaveTiddler","tw-CloseTiddler"],
+		eventHandler: this
+	});
+};
+
+})();
diff --git a/core/modules/macros/story/story.js b/core/modules/macros/story/story.js
index 7298b7b06..cd9cc9d10 100644
--- a/core/modules/macros/story/story.js
+++ b/core/modules/macros/story/story.js
@@ -3,15 +3,27 @@ title: $:/core/modules/macros/story/story.js
 type: application/javascript
 module-type: macro
 
-Displays a sequence of tiddlers defined in a JSON structure:
+Displays a sequence of tiddlers defined in two JSON structures. The story tiddler is the sequence of tiddlers currently present in the DOM:
 
 	{
 		tiddlers: [
-			{title: <string>, template: <string>}
-		]	
+			{title: <string>, draft: <string>}
+		]
 	}
 
-The storyview is a plugin that extends the story macro to implement different navigation experiences.
+The optional `draft` member indicates that the tiddler is in edit mode, and the value is the title of the tiddler being used as the draft.
+
+When the story tiddler changes, the story macro adjusts the DOM to match. An optional storyview plugin can be used to visualise the changes.
+
+And the history tiddler is the stack of tiddlers that were navigated to in turn:
+
+	{
+		stack: [
+			{title: <string>}
+		]
+	}
+
+The history stack is updated during navigation, and again the storyview plugin is given an opportunity to animate the navigation.
 
 \*/
 (function(){
@@ -24,6 +36,7 @@ exports.info = {
 	name: "story",
 	params: {
 		story: {byName: "default", type: "tiddler"},
+		history: {byName: "default", type: "tiddler"},
 		defaultViewTemplate: {byName: true, type: "tiddler"},
 		defaultEditTemplate: {byName: true, type: "tiddler"},
 		storyviewTiddler: {byName: true, type: "tiddler"},
@@ -31,213 +44,133 @@ exports.info = {
 	}
 };
 
+/*
+Get the data from the JSON story tiddler
+*/
 exports.getStory = function() {
-	var storyTiddler = this.wiki.getTiddler(this.params.story),
-		story = {tiddlers: []};
+	var storyTiddler = this.wiki.getTiddler(this.params.story);
+	this.story = {
+		tiddlers: []
+	};
 	if(storyTiddler && $tw.utils.hop(storyTiddler.fields,"text")) {
-		return JSON.parse(storyTiddler.fields.text);
-	} else {
-		return {
-			tiddlers: []
-		};
+		this.story = JSON.parse(storyTiddler.fields.text);
 	}
 };
 
-exports.handleEvent = function(event) {
-	if(this.eventMap[event.type]) {
-		this.eventMap[event.type].call(this,event);
+exports.getHistory = function() {
+	var historyTiddler = this.wiki.getTiddler(this.params.history);
+	this.history = {stack: []};
+	if(historyTiddler && $tw.utils.hop(historyTiddler.fields,"text")) {
+		this.history = JSON.parse(historyTiddler.fields.text);
+	}
+};
+
+exports.getViewTemplate = function() {
+	if(this.hasParameter("defaultViewTemplate")) {
+		return this.params.defaultViewTemplate;
+	} else {
+		return "$:/templates/ViewTemplate";
+	}
+};
+
+exports.getEditTemplate = function() {
+	if(this.hasParameter("defaultEditTemplate")) {
+		return this.params.defaultEditTemplate;
+	} else {
+		return "$:/templates/EditTemplate";
 	}
 };
 
 /*
-Return the index of the story element that contains the specified tree node. Returns -1 if none
+Create a story element representing a given tiddler, optionally being editted
 */
-exports.findStoryElementContainingNode = function(node) {
-	// Get the DOM node contained by the target node
-	while(node && !node.domNode) {
-		node = node.child;
+exports.createStoryElement = function(title,draft) {
+	var node = this.createStoryElementMacro(title,draft),
+		eventHandler = {handleEvent: function(event) {
+			// Add context information to the event
+			event.navigateFromStoryElement = node;
+			event.navigateFromTitle = title;
+			return true;
+		}};
+	node.execute(this.parents,this.tiddlerTitle);
+	var storyElement = $tw.Tree.Element("div",{"class": ["tw-story-element"]},[node],{
+			events: ["tw-navigate","tw-EditTiddler","tw-SaveTiddler","tw-CloseTiddler"],
+			eventHandler: eventHandler
+		});
+	// Save our data inside the story element node
+	storyElement.storyElementInfo = {title: title};
+	if(draft) {
+		storyElement.storyElementInfo.draft = draft;
 	}
-	// Step through the story elements
-	var slot = -1;
-	for(var t=0; t<this.storyNode.children.length; t++) {
-		if($tw.utils.domContains(this.storyNode.children[t].domNode,node.domNode)) {
-			slot = t;
+	return storyElement;
+};
+
+/*
+Create the tiddler macro needed to represent a given tiddler and its draft status
+*/
+exports.createStoryElementMacro = function(title,draft) {
+	var srcParams;
+	if(draft) {
+		srcParams = {target: draft, template: this.getEditTemplate()};
+	} else {
+		srcParams = {target: title, template: this.getViewTemplate()};
+	}
+	return $tw.Tree.Macro("tiddler",{
+			srcParams: srcParams,
+			wiki: this.wiki
+		});
+};
+
+/*
+Remove a story element from the story, along with the attendant DOM nodes
+*/
+exports.removeStoryElement = function(storyElementIndex) {
+	var storyElement = this.storyNode.children[storyElementIndex];
+	// Invoke the storyview to animate the removal
+	if(this.storyview && this.storyview.remove) {
+		if(!this.storyview.remove(storyElement)) {
+			// Only delete the DOM element if the storyview.remove() returned false
+			storyElement.domNode.parentNode.removeChild(storyElement.domNode);
 		}
 	}
-	return slot;
+	// Then delete the actual renderer node
+	this.storyNode.children.splice(storyElementIndex,1);
 };
 
 /*
 Return the index of the story element that corresponds to a particular title
 startIndex: index to start search (use zero to search from the top)
 tiddlerTitle: tiddler title to seach for
-templateTitle: optional template title to search for
 */
-exports.findStoryElementByTitle = function(startIndex,tiddlerTitle,templateTitle) {
+exports.findStoryElementByTitle = function(startIndex,tiddlerTitle) {
 	while(startIndex < this.storyNode.children.length) {
-		var params = this.storyNode.children[startIndex].children[0].params;
-		if(params.target === tiddlerTitle) {
-			if(!templateTitle || params.template === templateTitle) {
-				return startIndex;
-			}
+		if(this.storyNode.children[startIndex].storyElementInfo.title === tiddlerTitle) {
+			return startIndex;
 		}
 		startIndex++;
 	}
 	return undefined;
 };
 
-exports.eventMap = {};
-
-// Navigate to a specified tiddler
-exports.eventMap["tw-navigate"] = function(event) {
-	var template = this.params.defaultViewTemplate || "$:/templates/ViewTemplate",
-		story = this.getStory(),
-		navTiddler,t,tiddler,slot;
-	// See if the tiddler we want is already there
-	for(t=0; t<story.tiddlers.length; t++) {
-		if(story.tiddlers[t].title === event.navigateTo) {
-			navTiddler = t;
-		}
-	}
-	if(typeof(navTiddler) !== "undefined") {
-		// If we found our tiddler, just tell the storyview to navigate to it
-		if(this.storyview && this.storyview.navigate) {
-			this.storyview.navigate(this.storyNode.children[navTiddler],false,event);
-		}
-	} else {
-		// Find the source location in the story
-		if(event.navigateFrom) {
-			slot = this.findStoryElementContainingNode(event.navigateFrom) + 1;
-		} else {
-			slot = 0;			
-		}
-		// Add the tiddler to the bottom of the story (subsequently there will be a refreshInDom() call which is when we'll actually do the navigation)
-		story.tiddlers.splice(slot,0,{title: event.navigateTo, template: template});
-		this.wiki.addTiddler(new $tw.Tiddler(this.wiki.getTiddler(this.params.story),{text: JSON.stringify(story)}));
-		// Record the details of the navigation for us to pick up in refreshInDom()
-		this.lastNavigationEvent = event;
-	}
-	event.stopPropagation();
-	return false;
-};
-
-// Place a tiddler in edit mode
-exports.eventMap["tw-EditTiddler"] = function(event) {
-	var template, storyTiddler, story, storyRecord, tiddler, t;
-	// Put the specified tiddler into edit mode
-	template = this.params.defaultEditTemplate || "$:/templates/EditTemplate";
-	story = this.getStory();
-	for(t=0; t<story.tiddlers.length; t++) {
-		storyRecord = story.tiddlers[t];
-		if(storyRecord.title === event.tiddlerTitle && storyRecord.template !== template) {
-			storyRecord.title = "Draft " + (new Date()) + " of " + event.tiddlerTitle;
-			storyRecord.template = template;
-			tiddler = this.wiki.getTiddler(event.tiddlerTitle);
-			this.wiki.addTiddler(new $tw.Tiddler(
-				{
-					text: "Type the text for the tiddler '" + event.tiddlerTitle + "'"
-				},
-				tiddler,
-				{
-					title: storyRecord.title,
-					"draft.title": event.tiddlerTitle,
-					"draft.of": event.tiddlerTitle
-				}));
-		}
-	}
-	this.wiki.addTiddler(new $tw.Tiddler(this.wiki.getTiddler(this.params.story),{text: JSON.stringify(story)}));
-	event.stopPropagation();
-	return false;
-};
-
-// Take a tiddler out of edit mode, saving the changes
-exports.eventMap["tw-SaveTiddler"] = function(event) {
-	var template, storyTiddler, story, storyRecord, tiddler, storyTiddlerModified, t;
-	template = this.params.defaultEditTemplate || "$:/templates/ViewTemplate";
-	story = this.getStory();
-	storyTiddlerModified = false;
-	for(t=0; t<story.tiddlers.length; t++) {
-		storyRecord = story.tiddlers[t];
-		if(storyRecord.title === event.tiddlerTitle && storyRecord.template !== template) {
-			tiddler = this.wiki.getTiddler(storyRecord.title);
-			if(tiddler && $tw.utils.hop(tiddler.fields,"draft.title")) {
-				// Save the draft tiddler as the real tiddler
-				this.wiki.addTiddler(new $tw.Tiddler(tiddler,{title: tiddler.fields["draft.title"],"draft.title": undefined, "draft.of": undefined}));
-				// Remove the draft tiddler
-				this.wiki.deleteTiddler(storyRecord.title);
-				// Remove the original tiddler if we're renaming it
-				if(tiddler.fields["draft.of"] !== tiddler.fields["draft.title"]) {
-					this.wiki.deleteTiddler(tiddler.fields["draft.of"]);
-				}
-				// Make the story record point to the newly saved tiddler
-				storyRecord.title = tiddler.fields["draft.title"];
-				storyRecord.template = template;
-				// Check if we're modifying the story tiddler itself
-				if(tiddler.fields["draft.title"] === this.params.story) {
-					storyTiddlerModified = true;
-				}
-			}
-		}
-	}
-	if(!storyTiddlerModified) {
-		this.wiki.addTiddler(new $tw.Tiddler(this.wiki.getTiddler(this.params.story),{text: JSON.stringify(story)}));
-	}
-	event.stopPropagation();
-	return false;
-};
-
-// Take a tiddler out of edit mode, saving the changes
-exports.eventMap["tw-CloseTiddler"] = function(event) {
-	var story,t,storyElement;
-	story = this.getStory();
-	// Look for tiddlers with this title to close
-	for(t=story.tiddlers.length-1; t>=0; t--) {
-		if(story.tiddlers[t].title === event.tiddlerTitle) {
-			storyElement = this.storyNode.children[t];
-			// Invoke the storyview to animate the closure
-			if(this.storyview && this.storyview.close) {
-				if(!this.storyview.close(storyElement,event)) {
-					// Only delete the DOM element if the storyview.close() returned false
-					storyElement.domNode.parentNode.removeChild(storyElement.domNode);
-				}
-			}
-			// Remove the story element node
-			this.storyNode.children.splice(t,1);
-			// Remove the record in the story
-			story.tiddlers.splice(t,1);
-		}
-	}
-	this.wiki.addTiddler(new $tw.Tiddler(this.wiki.getTiddler(this.params.story),{text: JSON.stringify(story)}));
-	event.stopPropagation();
-	return false;
-};
-
 exports.executeMacro = function() {
+	// Get the story object
+	this.getStory();
 	// Create the story frame
-	var story = this.getStory();
-	this.contentNode = $tw.Tree.Element("div",{"class": "tw-story-content"},this.content);
-	this.contentNode.execute(this.parents,this.tiddlerTitle);
-	this.storyNode = $tw.Tree.Element("div",{"class": "tw-story-frame"},[]);
+	var attributes = {"class": "tw-story-frame"};
+	this.storyNode = $tw.Tree.Element("div",attributes,[]);
 	// Create each story element
-	for(var t=0; t<story.tiddlers.length; t++) {
-		var m = $tw.Tree.Macro("tiddler",{
-									srcParams: {target: story.tiddlers[t].title,template: story.tiddlers[t].template},
-									wiki: this.wiki
-								});
-		m.execute(this.parents,this.tiddlerTitle);
-		this.storyNode.children.push($tw.Tree.Element("div",{"class": "tw-story-element"},[m]));
+	for(var t=0; t<this.story.tiddlers.length; t++) {
+		this.storyNode.children.push(this.createStoryElement(this.story.tiddlers[t].title,this.story.tiddlers[t].draft));
 	}
-	var attributes = {};
 	if(this.classes) {
-		attributes["class"] = this.classes.slice(0);
+		$tw.utils.pushTop(attributes["class"],this.classes);
 	}
-	return $tw.Tree.Element("div",attributes,[this.contentNode,this.storyNode],{
-		events: ["tw-navigate","tw-EditTiddler","tw-SaveTiddler","tw-CloseTiddler"],
-		eventHandler: this
-	});
+	return this.storyNode;
 };
 
 exports.postRenderInDom = function() {
+	// Reset the record of the previous history stack
+	this.prevHistory = {stack: []};
 	// Instantiate the story view
 	var storyviewName;
 	if(this.hasParameter("storyviewTiddler")) {
@@ -259,7 +192,6 @@ exports.postRenderInDom = function() {
 };
 
 exports.refreshInDom = function(changes) {
-	var t;
 	// If the storyview has changed we'll have to completely re-execute the macro
 	if(this.hasParameter("storyviewTiddler") && $tw.utils.hop(changes,this.params.storyviewTiddler)) {
 		// This logic should be reused from the base macro class, and not duplicated
@@ -274,73 +206,105 @@ exports.refreshInDom = function(changes) {
 		this.renderInDom(parentDomNode,insertBefore);
 		return;
 	}
-	/*jslint browser: true */
-	if(this.dependencies.hasChanged(changes,this.tiddlerTitle)) {
-		// Get the tiddlers we're supposed to be displaying
-		var self = this,
-			story = this.getStory(),
-			template = this.params.template,
-			n,domNode,
-			findTiddler = function (childIndex,tiddlerTitle,templateTitle) {
-				while(childIndex < self.storyNode.children.length) {
-					var params = self.storyNode.children[childIndex].children[0].params;
-					if(params.target === tiddlerTitle) {
-						if(!templateTitle || params.template === templateTitle) {
-							return childIndex;
-						}
-					}
-					childIndex++;
-				}
-				return null;
-			};
-		for(t=0; t<story.tiddlers.length; t++) {
-			// See if the node we want is already there
-			var tiddlerNode = findTiddler(t,story.tiddlers[t].title,story.tiddlers[t].template);
-			if(tiddlerNode === null) {
-				// If not, render the tiddler
-				var m = $tw.Tree.Element("div",{"class": "tw-story-element"},[
-							$tw.Tree.Macro("tiddler",{
-											srcParams: {target: story.tiddlers[t].title,template: story.tiddlers[t].template},
-											wiki: this.wiki
-										})
-							]);
-				m.execute(this.parents,this.tiddlerTitle);
-				m.renderInDom(this.storyNode.domNode,this.storyNode.domNode.childNodes[t]);
-				this.storyNode.children.splice(t,0,m);
-				// Invoke the storyview to animate the navigation
-				if(this.storyview && this.storyview.navigate) {
-					this.storyview.navigate(this.storyNode.children[t],true,this.lastNavigationEvent);
+	// If the story tiddler has changed we need to sync the story elements
+	if(this.hasParameter("story") && $tw.utils.hop(changes,this.params.story)) {
+		this.processStoryChange(changes);
+	} else {
+		// If the story didn't change then we must refresh our content
+		this.child.refreshInDom(changes);
+	}
+	// If the history tiddler has changed we may need to visualise something
+	if(this.hasParameter("history") && $tw.utils.hop(changes,this.params.history)) {
+		this.processHistoryChange();
+	}
+};
+
+exports.processStoryChange = function(changes) {
+	// Get the tiddlers we're supposed to be displaying
+	var self = this,storyElement,
+		t,n,domNode;
+	// Get the story object
+	this.getStory();
+	// Check through each tiddler in the story
+	for(t=0; t<this.story.tiddlers.length; t++) {
+		// See if the node we want is already there
+		var tiddlerNode = this.findStoryElementByTitle(t,this.story.tiddlers[t].title);
+		if(tiddlerNode === undefined) {
+			// If not, render the tiddler
+			this.storyNode.children.splice(t,0,this.createStoryElement(this.story.tiddlers[t].title,this.story.tiddlers[t].draft));
+			this.storyNode.children[t].renderInDom(this.storyNode.domNode,this.storyNode.domNode.childNodes[t]);
+			// Invoke the storyview to animate the navigation
+			if(this.storyview && this.storyview.insert) {
+				this.storyview.insert(this.storyNode.children[t]);
+			}
+		} else {
+			// Delete any nodes preceding the one we want
+			if(tiddlerNode > t) {
+				for(n=tiddlerNode-1; n>=t; n--) {
+					this.removeStoryElement(n);
 				}
+			}
+			storyElement = this.storyNode.children[t];
+			// Check that the edit status matches
+			if(this.story.tiddlers[t].draft !== storyElement.storyElementInfo.draft) {
+				// If not, we'll have to recreate the story element
+				storyElement.children[0] = this.createStoryElementMacro(this.story.tiddlers[t].title,this.story.tiddlers[t].draft);
+				// Remove the DOM node in the story element
+				storyElement.domNode.removeChild(storyElement.domNode.firstChild);
+				// Reexecute the story element
+				storyElement.children[0].execute(this.parents,this.tiddlerTitle);
+				// Render the story element in the DOM
+				storyElement.children[0].renderInDom(storyElement.domNode);
+				// Reset the information in the story element
+				storyElement.storyElementInfo = {title: this.story.tiddlers[t].title, draft: this.story.tiddlers[t].draft};
 			} else {
-				// Delete any nodes preceding the one we want
-				if(tiddlerNode > t) {
-					// First delete the DOM nodes
-					for(n=t; n<tiddlerNode; n++) {
-						domNode = this.storyNode.children[n].domNode;
-						domNode.parentNode.removeChild(domNode);
-					}
-					// Then delete the actual renderer nodes
-					this.storyNode.children.splice(t,tiddlerNode-t);
-				}
-				// Refresh the DOM node we're reusing
+				// If the draft status matches then just refresh the DOM node we're reusing
 				this.storyNode.children[t].refreshInDom(changes);
 			}
 		}
-		// Remove any left over nodes
-		if(this.storyNode.children.length > story.tiddlers.length) {
-			for(t=story.tiddlers.length; t<this.storyNode.children.length; t++) {
-				domNode = this.storyNode.children[t].domNode;
-				domNode.parentNode.removeChild(domNode);
-			}
-			this.storyNode.children.splice(story.tiddlers.length,this.storyNode.children.length-story.tiddlers.length);
-		}
-	} else {
-		if(this.child) {
-			this.child.refreshInDom(changes);
+	}
+	// Remove any left over nodes
+	if(this.storyNode.children.length > this.story.tiddlers.length) {
+		for(t=this.storyNode.children.length-1; t>=this.story.tiddlers.length; t--) {
+			this.removeStoryElement(t);
 		}
 	}
-	// Clear the details of the last navigation
-	this.lastNavigationEvent = undefined;
+};
+
+/*
+Respond to a change in the history tiddler. The basic idea is to issue forward/back navigation commands to the story view that correspond to the tiddlers that need to be popped on or off the stack
+*/
+exports.processHistoryChange = function() {
+	// Read the history tiddler
+	this.getHistory();
+	if(this.storyview) {
+		var t,index,
+			topCommon = Math.min(this.history.stack.length,this.prevHistory.stack.length);
+		// Find the common heritage of the new history stack and the previous one
+		for(t=0; t<topCommon; t++) {
+			if(this.history.stack[t].title !== this.prevHistory.stack[t].title) {
+				topCommon = t;
+				break;
+			}
+		}
+		// We now navigate backwards through the previous history to get back to the common ancestor
+		for(t=this.prevHistory.stack.length-1; t>=topCommon; t--) {
+			index = this.findStoryElementByTitle(0,this.prevHistory.stack[t].title);
+			if(index !== undefined && this.storyview.navigateBack) {
+				this.storyview.navigateBack(this.storyNode.children[index]);
+			}
+		}
+		// And now we navigate forwards through the new history to get to the latest tiddler
+		for(t=topCommon; t<this.history.stack.length; t++) {
+			index = this.findStoryElementByTitle(0,this.history.stack[t].title);
+			if(index !== undefined && this.storyview.navigateForward) {
+				this.storyview.navigateForward(this.storyNode.children[index]);
+			}
+		}
+	}
+	// Record the history stack for next time
+	this.prevHistory = this.history;
+	this.history = undefined;
 };
 
 })();
diff --git a/core/modules/macros/story/views/classic.js b/core/modules/macros/story/views/classic.js
index a7b102687..75c3b4e22 100644
--- a/core/modules/macros/story/views/classic.js
+++ b/core/modules/macros/story/views/classic.js
@@ -16,48 +16,46 @@ function ClassicScroller(story) {
 	this.story = story;
 }
 
-/*
-Visualise navigation to the specified tiddler macro, optionally specifying a source node for the visualisation
-	targetTiddlerNode: tree node of the tiddler macro we're navigating to
-	isNew: true if the node we're navigating to has just been added to the DOM
-	sourceNode: optional tree node that initiated the navigation
-*/
-ClassicScroller.prototype.navigate = function(targetTiddlerNode,isNew,sourceEvent) {
-	$tw.utils.scrollIntoView(targetTiddlerNode.domNode);
-};
-
-ClassicScroller.prototype.close = function(targetTiddlerNode,sourceEvent) {
-	var targetElement = targetTiddlerNode.domNode;
+ClassicScroller.prototype.remove = function(storyElementNode) {
+	var targetElement = storyElementNode.domNode;
 	// Get the current height of the tiddler
 	var currHeight = targetElement.offsetHeight;
 	// Put a wrapper around the dom node we're closing
 	var wrapperElement = document.createElement("div");
 	targetElement.parentNode.insertBefore(wrapperElement,targetElement);
 	wrapperElement.appendChild(targetElement);
+	// Attach an event handler for the end of the transition
+	wrapperElement.addEventListener($tw.browser.transitionEnd,function(event) {
+		if(wrapperElement.parentNode) {
+			wrapperElement.parentNode.removeChild(wrapperElement);
+		}
+	},false);
 	// Animate the closure
 	var d = ($tw.config.preferences.animationDuration/1000).toFixed(8) + "s";
+	wrapperElement.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, " +
+															"opacity " + d + " ease-out, " +
+															"height " + d + " ease-in-out";
 	wrapperElement.style[$tw.browser.transformorigin] = "0% 0%";
 	wrapperElement.style[$tw.browser.transform] = "translateX(0px)";
 	wrapperElement.style.opacity = "1.0";
 	wrapperElement.style.height = currHeight + "px";
-	wrapperElement.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, " +
-															"opacity " + d + " ease-out, " +
-															"height " + d + " ease-in-out";
 	$tw.utils.nextTick(function() {
 		wrapperElement.style[$tw.browser.transform] = "translateX(" + window.innerWidth + "px)";
 		wrapperElement.style.opacity = "0.0";
 		wrapperElement.style.height = "0px";
 	});
-	// Attach an event handler for th eend of the transition
-	wrapperElement.addEventListener($tw.browser.transitionEnd,function(event) {
-		if(wrapperElement.parentNode) {
-			wrapperElement.parentNode.removeChild(wrapperElement);
-		}
-	},true);
 	// Returning true causes the DOM node not to be deleted
 	return true;
 };
 
+ClassicScroller.prototype.navigateBack = function(storyElementNode) {
+	$tw.utils.scrollIntoView(storyElementNode.domNode);
+};
+
+ClassicScroller.prototype.navigateForward = function(storyElementNode) {
+	$tw.utils.scrollIntoView(storyElementNode.domNode);
+};
+
 exports.classic = ClassicScroller;
 
 })();
diff --git a/core/modules/macros/story/views/sideways.js b/core/modules/macros/story/views/sideways.js
index ea7eceaa4..5eb9e2aa0 100644
--- a/core/modules/macros/story/views/sideways.js
+++ b/core/modules/macros/story/views/sideways.js
@@ -21,7 +21,7 @@ function setStoryElementStyles(e) {
 
 function SidewaysView(story) {
 	this.story = story;
-	var wrapper = this.story.child.children[1].domNode;
+	var wrapper = this.story.child.domNode;
 	// Scroll horizontally
 	wrapper.style.whiteSpace = "nowrap";
 	// Make all the tiddlers position absolute, and hide all but the first one
@@ -31,18 +31,16 @@ function SidewaysView(story) {
 }
 
 /*
-Visualise navigation to the specified tiddler macro, optionally specifying a source node for the visualisation
-	targetTiddlerNode: tree node of the tiddler macro we're navigating to
-	isNew: true if the node we're navigating to has just been added to the DOM
-	sourceNode: optional tree node that initiated the navigation
+Visualise insertion of the specified tiddler macro, optionally specifying a source node for the visualisation
+	storyElementNode: tree node of the tiddler macro we're navigating to
 */
-SidewaysView.prototype.navigate = function(targetTiddlerNode,isNew,sourceEvent) {
-	setStoryElementStyles(targetTiddlerNode.domNode);
-	$tw.utils.scrollIntoView(targetTiddlerNode.domNode);
+SidewaysView.prototype.insert = function(storyElementNode) {
+	setStoryElementStyles(storyElementNode.domNode);
+	$tw.utils.scrollIntoView(storyElementNode.domNode);
 };
 
-SidewaysView.prototype.close = function(targetTiddlerNode,sourceEvent) {
-	var targetElement = targetTiddlerNode.domNode;
+SidewaysView.prototype.remove = function(storyElementNode) {
+	var targetElement = storyElementNode.domNode;
 	// Get the current width of the tiddler
 	var currWidth = targetElement.offsetWidth;
 	// Put a wrapper around the dom node we're closing
diff --git a/core/modules/macros/story/views/zoomin.js b/core/modules/macros/story/views/zoomin.js
index 284bd5d16..2342ca532 100644
--- a/core/modules/macros/story/views/zoomin.js
+++ b/core/modules/macros/story/views/zoomin.js
@@ -15,17 +15,17 @@ A storyview that shows a single tiddler and navigates by zooming into links
 function Zoomin(story) {
 	// Save the story
 	this.story = story;
-	var wrapper = this.story.child.children[1].domNode;
+	this.storyNode = this.story.child.domNode;
 	// Make all the tiddlers position absolute, and hide all but the first one
-	wrapper.style.position = "relative";
-	for(var t=0; t<wrapper.children.length; t++) {
+	this.storyNode.style.position = "relative";
+	for(var t=0; t<this.storyNode.children.length; t++) {
 		if(t) {
-			wrapper.children[t].style.display = "none";
+			this.storyNode.children[t].style.display = "none";
 		}
-		wrapper.children[t].style.position = "absolute";
+		this.storyNode.children[t].style.position = "absolute";
 	}
 	// Record the current tiddler node
-	this.currTiddler = this.story.child.children[1].children[0];
+	this.currTiddler = this.story.child.children[0];
 	// Set up the stack of previously viewed tiddlers
 	this.prevTiddlers = [this.currTiddler.children[0].params.target];
 }
@@ -70,44 +70,37 @@ function getNodeBounds(node) {
 }
 
 /*
-Visualise navigation to the specified tiddler macro, optionally specifying a source node for the visualisation
-	targetTiddlerNode: tree node of the tiddler macro we're navigating to
-	isNew: true if the node we're navigating to has just been added to the DOM
-	sourceNode: optional tree node that initiated the navigation
+Visualise removal of the the specified tiddler macro, optionally specifying a source node for the visualisation
+	storyElementNode: tree node of the tiddler macro we're navigating to
 */
-Zoomin.prototype.navigate = function(targetTiddlerNode,isNew,sourceEvent) {
+Zoomin.prototype.navigateForward = function(storyElementNode) {
 	// Do nothing if the target tiddler is already the current tiddler
-	if(targetTiddlerNode === this.currTiddler) {
+	if(storyElementNode === this.currTiddler) {
 		return;
 	}
 	// Make the new tiddler be position absolute and visible
-	targetTiddlerNode.domNode.style.position = "absolute";
-	targetTiddlerNode.domNode.style.display = "block";
-	targetTiddlerNode.domNode.style[$tw.browser.transformorigin] = "0 0";
-	targetTiddlerNode.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(1)";
-	targetTiddlerNode.domNode.style[$tw.browser.transition] = "none";
+	storyElementNode.domNode.style.position = "absolute";
+	storyElementNode.domNode.style.display = "block";
+	storyElementNode.domNode.style[$tw.browser.transformorigin] = "0 0";
+	storyElementNode.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(1)";
+	storyElementNode.domNode.style[$tw.browser.transition] = "none";
 	// Get the position of the source node, or use the centre of the window as the source position
-	var sourceBounds;
-	if(sourceEvent && sourceEvent.navigateFrom) {
-		sourceBounds = getNodeBounds(sourceEvent.navigateFrom);
-	} else {
-		sourceBounds = {
+	var sourceBounds = {
 			left: window.innerWidth/2 - 2,
 			top: window.innerHeight/2 - 2,
 			width: 4,
 			height: 4
 		};
-	}
 	// Try to find the title node in the target tiddler
-	var titleNode = findTitleNode(targetTiddlerNode) || targetTiddlerNode;
+	var titleNode = findTitleNode(storyElementNode) || storyElementNode;
 	// Compute the transform for the target tiddler to make the title lie over the source rectange
-	var targetBounds = getNodeBounds(targetTiddlerNode),
+	var targetBounds = getNodeBounds(storyElementNode),
 		titleBounds = getNodeBounds(titleNode),
 		scale = sourceBounds.width / titleBounds.width,
 		x = sourceBounds.left - targetBounds.left - (titleBounds.left - targetBounds.left) * scale,
 		y = sourceBounds.top - targetBounds.top - (titleBounds.top - targetBounds.top) * scale;
 	// Transform the target tiddler
-	targetTiddlerNode.domNode.style[$tw.browser.transform] = "translateX(" + x + "px) translateY(" + y + "px) scale(" + scale + ")";
+	storyElementNode.domNode.style[$tw.browser.transform] = "translateX(" + x + "px) translateY(" + y + "px) scale(" + scale + ")";
 	// Get the animation duration
 	var d = ($tw.config.preferences.animationDuration/1000).toFixed(8) + "s";
 	// Apply the ending transitions with a timeout to ensure that the previously applied transformations are applied first
@@ -118,10 +111,10 @@ Zoomin.prototype.navigate = function(targetTiddlerNode,isNew,sourceEvent) {
 		var currTiddlerBounds = getNodeBounds(currTiddler),
 			x = (currTiddlerBounds.left - targetBounds.left),
 			y = (currTiddlerBounds.top - targetBounds.top);
-		targetTiddlerNode.domNode.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, opacity " + d + " ease-out";
-		targetTiddlerNode.domNode.style.opacity = "1.0";
-		targetTiddlerNode.domNode.style[$tw.browser.transform] = "translateX(" + x + "px) translateY(" + y + "px) scale(1)";
-		targetTiddlerNode.domNode.style.zIndex = "500";
+		storyElementNode.domNode.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, opacity " + d + " ease-out";
+		storyElementNode.domNode.style.opacity = "1.0";
+		storyElementNode.domNode.style[$tw.browser.transform] = "translateX(" + x + "px) translateY(" + y + "px) scale(1)";
+		storyElementNode.domNode.style.zIndex = "500";
 		// Transform the current tiddler
 		var scale = titleBounds.width / sourceBounds.width;
 		x =  titleBounds.left - targetBounds.left - (sourceBounds.left - currTiddlerBounds.left) * scale;
@@ -133,15 +126,15 @@ Zoomin.prototype.navigate = function(targetTiddlerNode,isNew,sourceEvent) {
 		currTiddler.domNode.style.zIndex = "0";
 	});
 	// Record the new current tiddler
-	this.currTiddler = targetTiddlerNode;
+	this.currTiddler = storyElementNode;
 	// Save the tiddler in the stack
-	this.prevTiddlers.push(targetTiddlerNode.children[0].params.target);
+	this.prevTiddlers.push(storyElementNode.children[0].params.target);
 };
 
 /*
-Visualise closing a tiddler
+Visualise removing a tiddler
 */
-Zoomin.prototype.close = function(targetTiddlerNode,sourceEvent) {
+Zoomin.prototype.remove = function(storyElementNode) {
 	// Remove the last entry from the navigation stack, which will be to navigate to the current tiddler
 	this.prevTiddlers.pop();
 	// Find the top entry in the navigation stack that still exists
@@ -159,12 +152,12 @@ Zoomin.prototype.close = function(targetTiddlerNode,sourceEvent) {
 	// Get the animation duration
 	var d = ($tw.config.preferences.animationDuration/1000).toFixed(8) + "s";
 	// Set up the tiddler that is being closed
-	targetTiddlerNode.domNode.style.position = "absolute";
-	targetTiddlerNode.domNode.style.display = "block";
-	targetTiddlerNode.domNode.style[$tw.browser.transformorigin] = "50% 50%";
-	targetTiddlerNode.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(1)";
-	targetTiddlerNode.domNode.style[$tw.browser.transition] = "none";
-	targetTiddlerNode.domNode.style.zIndex = "0";
+	storyElementNode.domNode.style.position = "absolute";
+	storyElementNode.domNode.style.display = "block";
+	storyElementNode.domNode.style[$tw.browser.transformorigin] = "50% 50%";
+	storyElementNode.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(1)";
+	storyElementNode.domNode.style[$tw.browser.transition] = "none";
+	storyElementNode.domNode.style.zIndex = "0";
 	// Set up the tiddler we're moving back in
 	if(storyElement !== undefined) {
 		storyElement.domNode.style.position = "absolute";
@@ -183,15 +176,15 @@ Zoomin.prototype.close = function(targetTiddlerNode,sourceEvent) {
 	// Animate them both
 	$tw.utils.nextTick(function() {
 		// First, the tiddler we're closing
-		targetTiddlerNode.domNode.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, opacity " + d + " ease-out";
-		targetTiddlerNode.domNode.style.opacity = "0.0";
-		targetTiddlerNode.domNode.style[$tw.browser.transformorigin] = "50% 50%";
-		targetTiddlerNode.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(0.1)";
-		targetTiddlerNode.domNode.style.zIndex = "0";
-		targetTiddlerNode.domNode.addEventListener($tw.browser.transitionEnd,function(event) {
+		storyElementNode.domNode.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, opacity " + d + " ease-out";
+		storyElementNode.domNode.style.opacity = "0.0";
+		storyElementNode.domNode.style[$tw.browser.transformorigin] = "50% 50%";
+		storyElementNode.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(0.1)";
+		storyElementNode.domNode.style.zIndex = "0";
+		storyElementNode.domNode.addEventListener($tw.browser.transitionEnd,function(event) {
 			// Delete the DOM node when the transition is over
-			if(targetTiddlerNode.domNode.parentNode) {
-				targetTiddlerNode.domNode.parentNode.removeChild(targetTiddlerNode.domNode);
+			if(storyElementNode.domNode.parentNode) {
+				storyElementNode.domNode.parentNode.removeChild(storyElementNode.domNode);
 			}
 		},true);
 		// Now the tiddler we're going back to
diff --git a/core/templates/PageTemplate.tid b/core/templates/PageTemplate.tid
index 744120962..3bfbf0e54 100644
--- a/core/templates/PageTemplate.tid
+++ b/core/templates/PageTemplate.tid
@@ -1,7 +1,7 @@
 title: $:/templates/PageTemplate
 
-<div class="container">
-<<story story:"$:/StoryTiddlers" storyviewTiddler:[[$:/CurrentView]] storyview:classic ><
+<<navigator story:"$:/StoryTiddlers" history:"$:/History" ><
+
 {{navigation-panel{
 <<chooser><
 	<<list all>>
@@ -35,9 +35,13 @@ title: $:/templates/PageTemplate
 </div>
 >>
 >>
+</div>
+</div>
+</div>
 
+<div class="container">
+<<story story:"$:/StoryTiddlers" history:"$:/History" storyviewTiddler:[[$:/CurrentView]] storyview:classic >>
 </div>
-</div>
-</div>
+
 >>
-</div>
+
diff --git a/tw5.com/wiki/StoryTiddlers.tid b/tw5.com/wiki/StoryTiddlers.tid
index b777a1d79..ef409386b 100644
--- a/tw5.com/wiki/StoryTiddlers.tid
+++ b/tw5.com/wiki/StoryTiddlers.tid
@@ -3,9 +3,9 @@ type: application/json
 
 {
 	"tiddlers": [
-		{"title": "HelloThere", "template": "$:/templates/ViewTemplate"},
-		{"title": "Introduction", "template": "$:/templates/ViewTemplate"},
-		{"title": "Improvements", "template": "$:/templates/ViewTemplate"},
-		{"title": "Docs", "template": "$:/templates/ViewTemplate"}
+		{"title": "HelloThere"},
+		{"title": "Introduction"},
+		{"title": "Improvements"},
+		{"title": "Docs"}
 	]
 }
\ No newline at end of file