mirrors
/
TiddlyWiki5
mirror of https://github.com/Jermolene/TiddlyWiki5
1
0
Fork 0
Code Issues Releases Wiki Activity

Add prototype stacked storyview

This commit is contained in:
Jermolene 2015-02-23 11:28:50 +01:00
parent 4dd2b38faa
commit 6a497eff6c
9 changed files with 132 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
editions/prerelease/tiddlers/view.tid Normal file
View File

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

3
editions/prerelease/tiddlywiki.info
View File

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

16
plugins/tiddlywiki/stacked-view/StackedControls.tid Normal file
View File

@ -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>

3
plugins/tiddlywiki/stacked-view/StackedStoryViewFanHeight.tid Normal file
View File

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

7
plugins/tiddlywiki/stacked-view/plugin.info Normal file
View File

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

3
plugins/tiddlywiki/stacked-view/readme.tid Normal file
View File

@ -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.

4
plugins/tiddlywiki/stacked-view/stacked-storyview.tid Normal file
View File

@ -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

86
plugins/tiddlywiki/stacked-view/stacked.js Normal file
View File

@ -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;
})();

8
plugins/tiddlywiki/stacked-view/storyview-stacked.tid Normal file
View File

@ -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>