Add prototype stacked storyview

editions/prerelease/tiddlers/view.tid

@@ -0,0 +1,3 @@
+title: $:/view
+
+stacked

editions/prerelease/tiddlywiki.info

@@ -5,7 +5,8 @@
 		"tiddlywiki/nodewebkitsaver",
 		"tiddlywiki/github-fork-ribbon",
 		"tiddlywiki/browser-sniff",
-		"tiddlywiki/help"
+		"tiddlywiki/help",
+		"tiddlywiki/stacked-view"
 	],
 	"themes": [
 		"tiddlywiki/vanilla",

plugins/tiddlywiki/stacked-view/StackedControls.tid

@@ -0,0 +1,16 @@
+title: $:/plugins/tiddlywiki/stacked-view/StackedControls
+tags: $:/tags/TopLeftBar
+
+<$reveal type="match" state="$:/view" text="stacked">
+Stacked view fan height:
+<$button set="$:/config/StackedStoryViewFanHeight" setTo="-10">-10</$button>
+<$button set="$:/config/StackedStoryViewFanHeight" setTo="0">0</$button>
+<$button set="$:/config/StackedStoryViewFanHeight" setTo="10">10</$button>
+<$button set="$:/config/StackedStoryViewFanHeight" setTo="30">30</$button>
+<$button set="$:/config/StackedStoryViewFanHeight" setTo="50">50</$button>
+<$button set="$:/config/StackedStoryViewFanHeight" setTo="100">100</$button>
+<$button set="$:/config/StackedStoryViewFanHeight" setTo="300">300</$button>
+<$button set="$:/config/StackedStoryViewFanHeight" setTo="500">500</$button>
+<$button set="$:/config/StackedStoryViewFanHeight" setTo="700">700</$button>
+<$button set="$:/config/StackedStoryViewFanHeight" setTo="1500">1500</$button>
+</$reveal>

plugins/tiddlywiki/stacked-view/StackedStoryViewFanHeight.tid

@@ -0,0 +1,3 @@
+title: $:/config/StackedStoryViewFanHeight
+
+100

plugins/tiddlywiki/stacked-view/plugin.info

@@ -0,0 +1,7 @@
+{
+	"title": "$:/plugins/tiddlywiki/stacked-view",
+	"description": "Stacked card storyview",
+	"author": "JeremyRuston",
+	"core-version": ">=5.0.0",
+	"list": "readme"
+}

plugins/tiddlywiki/stacked-view/readme.tid

@@ -0,0 +1,3 @@
+title: $:/plugins/tiddlywiki/stacked-view/readme
+
+This plugin provides a new story visualisation that displays individual tiddlers as a stack of cards. It is currently incomplete.

plugins/tiddlywiki/stacked-view/stacked-storyview.tid

@@ -0,0 +1,4 @@
+title: $:/plugins/tiddlywiki/stacked-view/config-macros/stacked-storyview
+tags: $:/tags/Macro
+
+\define tv-stacked-storyview-fan-height-config-title() $:/config/StackedStoryViewFanHeight

plugins/tiddlywiki/stacked-view/stacked.js

@@ -0,0 +1,86 @@
+/*\
+title: $:/plugins/tiddlywiki/stacked-view/stacked.js
+type: application/javascript
+module-type: storyview
+
+Keeps tiddlers in a stack
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+var easing = "cubic-bezier(0.645, 0.045, 0.355, 1)"; // From http://easings.net/#easeInOutCubic
+
+var StackedListView = function(listWidget) {
+	var self = this;
+	this.listWidget = listWidget;
+	this.fanHeightConfigTitle = listWidget.getVariable("tv-stacked-storyview-fan-height-config-title");
+	this.placeTiddlers();
+};
+
+StackedListView.prototype.placeTiddlers = function() {
+	// Initialise the stack of tiddler titles
+	this.listStack = [];
+	var numItems = this.listWidget.children.length,
+		t, itemWidget,
+		duration = $tw.utils.getAnimationDuration();
+	for(t=numItems-1; t>=0; t--) {
+		itemWidget = this.listWidget.children[t];
+		this.listStack.push(itemWidget.parseTreeNode.itemTitle);
+	}
+	// Ensure the tiddler at the top of the history stack is at the top of the array
+	var history = this.listWidget.wiki.getTiddlerData(this.listWidget.historyTitle,[]);
+	for(t=0; t<history.length; t++) {
+		var title = history[t].title;
+		if(this.listStack.indexOf(title) !== -1) {
+			$tw.utils.pushTop(this.listStack,title);
+		}
+	}
+	// Get the configured fan height
+	var fanHeight = parseInt(this.listWidget.wiki.getTiddlerText(this.fanHeightConfigTitle),10);
+	// Position each tiddler
+	for(var t=numItems-1; t>=0; t--) {
+		// Get the DOM node for this tiddler
+		itemWidget = this.listWidget.children[t];
+		var domNode = itemWidget.findFirstDomNode();
+		if(domNode instanceof Element) {
+			// Find the position of the tiddler in the stack
+			var pos = this.listStack.indexOf(itemWidget.parseTreeNode.itemTitle);
+			if(pos !== -1) {
+				// Style the tiddler to position it
+				var posFactor = pos/(numItems-1);
+				$tw.utils.setStyle(domNode,[
+					{position: "absolute"},
+					{transformOrigin: "50% 0"},
+					{transition: $tw.utils.roundTripPropertyName("transform") + " " + duration * (0.5 + posFactor) + "ms " + easing},
+					{transform: "translateX(0px) translateY(" + (fanHeight * posFactor * posFactor) + "px) scale(" + (0.1 + posFactor * 0.9) + ")"},
+					{zIndex: pos + ""}
+				]);
+			}
+		}
+	}
+};
+
+StackedListView.prototype.refreshStart = function(changedTiddlers,changedAttributes) {
+};
+
+StackedListView.prototype.refreshEnd = function(changedTiddlers,changedAttributes) {
+	this.placeTiddlers();
+};
+
+StackedListView.prototype.navigateTo = function(historyInfo) {
+};
+
+StackedListView.prototype.insert = function(widget) {
+};
+
+StackedListView.prototype.remove = function(widget) {
+	widget.removeChildDomNodes();
+};
+
+exports.stacked = StackedListView;
+
+})();

plugins/tiddlywiki/stacked-view/storyview-stacked.tid

@@ -0,0 +1,8 @@
+title: $:/core/images/storyview-stacked
+tags: $:/tags/Image
+
+<svg class="tc-image-storyview-stack tc-image-button" width="22pt" height="22pt" viewBox="0 0 128 128">
+    <g fill-rule="evenodd">
+        <path d="M8.00697327,0 C3.58484404,0 0,3.59075293 0,8.00697327 L0,119.993027 C0,124.415156 3.59075293,128 8.00697327,128 L119.993027,128 C124.415156,128 128,124.409247 128,119.993027 L128,8.00697327 C128,3.58484404 124.409247,0 119.993027,0 L8.00697327,0 L8.00697327,0 Z M32,43 L32,37.3807213 C32,34.4040057 34.3875896,32 37.3328305,32 L45.5,32 L45.5,32 L84,32 L90.6671695,32 C93.6079301,32 96,34.409031 96,37.3807213 L96,43 L32,43 Z M30,48 L23.9992458,48 C19.5813843,48 16,51.578055 16,56.0085154 L16,103.991485 C16,108.414466 19.5881049,112 23.9992458,112 L104.000754,112 C108.418616,112 112,108.421945 112,103.991485 L112,56.0085154 C112,51.5855345 108.411895,48 104.000754,48 L98.5,48 L30,48 Z M80,27 L80,23.7529272 C80,22.2325275 78.803965,21 77.3335847,21 L50.6664153,21 C49.1937948,21 48,22.2299564 48,23.7529272 L48,27 L80,27 Z"></path>
+    </g>
+</svg>