From 6a497eff6c3f5baf9fc8c3b7e664164a9afee3b9 Mon Sep 17 00:00:00 2001 From: Jermolene Date: Mon, 23 Feb 2015 11:28:50 +0100 Subject: [PATCH] Add prototype stacked storyview --- editions/prerelease/tiddlers/view.tid | 3 + editions/prerelease/tiddlywiki.info | 3 +- .../stacked-view/StackedControls.tid | 16 ++++ .../StackedStoryViewFanHeight.tid | 3 + plugins/tiddlywiki/stacked-view/plugin.info | 7 ++ plugins/tiddlywiki/stacked-view/readme.tid | 3 + .../stacked-view/stacked-storyview.tid | 4 + plugins/tiddlywiki/stacked-view/stacked.js | 86 +++++++++++++++++++ .../stacked-view/storyview-stacked.tid | 8 ++ 9 files changed, 132 insertions(+), 1 deletion(-) create mode 100644 editions/prerelease/tiddlers/view.tid create mode 100644 plugins/tiddlywiki/stacked-view/StackedControls.tid create mode 100644 plugins/tiddlywiki/stacked-view/StackedStoryViewFanHeight.tid create mode 100644 plugins/tiddlywiki/stacked-view/plugin.info create mode 100644 plugins/tiddlywiki/stacked-view/readme.tid create mode 100644 plugins/tiddlywiki/stacked-view/stacked-storyview.tid create mode 100644 plugins/tiddlywiki/stacked-view/stacked.js create mode 100644 plugins/tiddlywiki/stacked-view/storyview-stacked.tid diff --git a/editions/prerelease/tiddlers/view.tid b/editions/prerelease/tiddlers/view.tid new file mode 100644 index 000000000..0e45ea308 --- /dev/null +++ b/editions/prerelease/tiddlers/view.tid @@ -0,0 +1,3 @@ +title: $:/view + +stacked \ No newline at end of file diff --git a/editions/prerelease/tiddlywiki.info b/editions/prerelease/tiddlywiki.info index 8aef38bf5..aff81f8e9 100644 --- a/editions/prerelease/tiddlywiki.info +++ b/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", diff --git a/plugins/tiddlywiki/stacked-view/StackedControls.tid b/plugins/tiddlywiki/stacked-view/StackedControls.tid new file mode 100644 index 000000000..6fc706fea --- /dev/null +++ b/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 set="$:/config/StackedStoryViewFanHeight" setTo="0">0 +<$button set="$:/config/StackedStoryViewFanHeight" setTo="10">10 +<$button set="$:/config/StackedStoryViewFanHeight" setTo="30">30 +<$button set="$:/config/StackedStoryViewFanHeight" setTo="50">50 +<$button set="$:/config/StackedStoryViewFanHeight" setTo="100">100 +<$button set="$:/config/StackedStoryViewFanHeight" setTo="300">300 +<$button set="$:/config/StackedStoryViewFanHeight" setTo="500">500 +<$button set="$:/config/StackedStoryViewFanHeight" setTo="700">700 +<$button set="$:/config/StackedStoryViewFanHeight" setTo="1500">1500 + diff --git a/plugins/tiddlywiki/stacked-view/StackedStoryViewFanHeight.tid b/plugins/tiddlywiki/stacked-view/StackedStoryViewFanHeight.tid new file mode 100644 index 000000000..9fc42e0e5 --- /dev/null +++ b/plugins/tiddlywiki/stacked-view/StackedStoryViewFanHeight.tid @@ -0,0 +1,3 @@ +title: $:/config/StackedStoryViewFanHeight + +100 \ No newline at end of file diff --git a/plugins/tiddlywiki/stacked-view/plugin.info b/plugins/tiddlywiki/stacked-view/plugin.info new file mode 100644 index 000000000..2872a79d3 --- /dev/null +++ b/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" +} diff --git a/plugins/tiddlywiki/stacked-view/readme.tid b/plugins/tiddlywiki/stacked-view/readme.tid new file mode 100644 index 000000000..6316044d0 --- /dev/null +++ b/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. diff --git a/plugins/tiddlywiki/stacked-view/stacked-storyview.tid b/plugins/tiddlywiki/stacked-view/stacked-storyview.tid new file mode 100644 index 000000000..3065d64d7 --- /dev/null +++ b/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 diff --git a/plugins/tiddlywiki/stacked-view/stacked.js b/plugins/tiddlywiki/stacked-view/stacked.js new file mode 100644 index 000000000..542a01082 --- /dev/null +++ b/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=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; + +})(); \ No newline at end of file diff --git a/plugins/tiddlywiki/stacked-view/storyview-stacked.tid b/plugins/tiddlywiki/stacked-view/storyview-stacked.tid new file mode 100644 index 000000000..fdde5185d --- /dev/null +++ b/plugins/tiddlywiki/stacked-view/storyview-stacked.tid @@ -0,0 +1,8 @@ +title: $:/core/images/storyview-stacked +tags: $:/tags/Image + + + + + + \ No newline at end of file