From 4bbe0cd4d38a9b6ac3d9bd1ed7ad344e054bef01 Mon Sep 17 00:00:00 2001
From: Jeremy Ruston <jeremy@osmosoft.com>
Date: Wed, 20 Jun 2012 18:35:41 +0100
Subject: [PATCH] Added new storyview that shows tiddlers stacked up sideways

---
 core/modules/macros/story/views/sideways.js | 45 +++++++++++++++++++++
 core/templates/PageTemplate.tid             |  1 +
 tw5.com/wiki/styles.css.tid                 |  2 +-
 3 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 core/modules/macros/story/views/sideways.js

diff --git a/core/modules/macros/story/views/sideways.js b/core/modules/macros/story/views/sideways.js
new file mode 100644
index 000000000..fc19b9719
--- /dev/null
+++ b/core/modules/macros/story/views/sideways.js
@@ -0,0 +1,45 @@
+/*\
+title: $:/core/modules/macros/story/views/sideways.js
+type: application/javascript
+module-type: storyview
+
+A storyview that shows a sequence of tiddlers as horizontally stacked blocks
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+function setStoryElementStyles(e) {
+	e.style.display = "inline-block";
+	e.style.width = "350px";
+	e.style.verticalAlign = "top";
+	e.style.whiteSpace = "normal";
+}
+
+function SidewaysView(story) {
+	this.story = story;
+	var wrapper = this.story.child.children[1].domNode;
+	// Scroll horizontally
+	wrapper.style.whiteSpace = "nowrap";
+	// Make all the tiddlers position absolute, and hide all but the first one
+	for(var t=0; t<wrapper.children.length; t++) {
+		setStoryElementStyles(wrapper.children[t]);
+	}
+}
+
+/*
+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
+*/
+SidewaysView.prototype.navigate = function(targetTiddlerNode,isNew,sourceEvent) {
+	setStoryElementStyles(targetTiddlerNode.domNode);
+};
+
+exports.sideways = SidewaysView;
+
+})();
diff --git a/core/templates/PageTemplate.tid b/core/templates/PageTemplate.tid
index 8979965a4..d93971122 100644
--- a/core/templates/PageTemplate.tid
+++ b/core/templates/PageTemplate.tid
@@ -27,6 +27,7 @@ title: $:/templates/PageTemplate
 <div class="open">
 {{dropdown-menu tw-suppress-missing-tiddlylink{
 * <<link to:classic>< <<hide tiddler:[[$:/CurrentView]] notequal:classic>< <span class="tw-ticked-menu-item"></span> >> Classic>>
+* <<link to:sideways>< <<hide tiddler:[[$:/CurrentView]] notequal:sideways>< <span class="tw-ticked-menu-item"></span> >> Sideways>>
 * <<link to:zoomin>< <<hide tiddler:[[$:/CurrentView]] notequal:zoomin>< <span class="tw-ticked-menu-item"></span> >> Zoomin>>
 * <<link to:pasteboard>< <<hide tiddler:[[$:/CurrentView]] notequal:pasteboard>< <span class="tw-ticked-menu-item"></span> >> Pasteboard>>
 }}}
diff --git a/tw5.com/wiki/styles.css.tid b/tw5.com/wiki/styles.css.tid
index 39b9d3850..8edf83ce5 100644
--- a/tw5.com/wiki/styles.css.tid
+++ b/tw5.com/wiki/styles.css.tid
@@ -9,7 +9,7 @@ body {
 
 .tw-story-element {
 	position: relative;
-	margin: 30px 0px 30px 0px;
+	margin: 30px 5px 30px 5px;
 	padding: 20px 20px 20px 20px;
 	border: 1px solid #999;
 	background-color: #fff;