1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-27 12:07:19 +00:00

Started adding support for storyviews that implement different navigation visualisations

This commit is contained in:
Jeremy Ruston 2012-05-14 17:37:20 +01:00
parent 0609670b94
commit d8f17e9d6b
6 changed files with 89 additions and 22 deletions

1
bld.sh
View File

@ -8,7 +8,6 @@ mkdir -p tmp/tw5
# cook TiddlyWiki5
pushd tw5.com > /dev/null
node ../core/boot.js \

View File

@ -36,6 +36,7 @@ exports.handleEvent = function (event) {
var navEvent = document.createEvent("Event");
navEvent.initEvent("tw-navigate",true,true);
navEvent.navigateTo = this.params.to;
navEvent.navigateFrom = this;
event.target.dispatchEvent(navEvent);
event.preventDefault();
return false;

View File

@ -1,8 +1,18 @@
/*\
title: $:/core/modules/macros/story.js
title: $:/core/modules/macros/story/story.js
type: application/javascript
module-type: macro
Displays a sequence of tiddlers defined in a JSON structure:
{
tiddlers: [
{title: <string>, template: <string>}
]
}
The storyview is a plugin that extends the story macro to implement different navigation experiences.
\*/
(function(){
@ -26,7 +36,8 @@ exports.info = {
params: {
story: {byName: "default", type: "tiddler"},
defaultViewTemplate: {byName: true, type: "tiddler"},
defaultEditTemplate: {byName: true, type: "tiddler"}
defaultEditTemplate: {byName: true, type: "tiddler"},
storyview: {byName: true, type: "text"}
},
events: ["tw-navigate","tw-EditTiddler","tw-SaveTiddler"]
};
@ -116,17 +127,25 @@ exports.handleEvent = function(event) {
};
exports.executeMacro = function() {
var story = JSON.parse(this.wiki.getTiddlerText(this.params.story)),
children = [];
for(var t=0; t<story.tiddlers.length; t++) {
var storyJson = JSON.parse(this.wiki.getTiddlerText(this.params.story)),
storyNode = $tw.Tree.Element("div",{},[]);
for(var t=0; t<storyJson.tiddlers.length; t++) {
var m = $tw.Tree.Macro("tiddler",
{target: story.tiddlers[t].title,template: story.tiddlers[t].template},
{target: storyJson.tiddlers[t].title,template: storyJson.tiddlers[t].template},
null,
this.wiki);
m.execute(this.parents,this.tiddlerTitle);
children.push(m);
storyNode.children.push($tw.Tree.Element("div",{},[m]));
}
return children;
return [storyNode];
};
exports.postRenderInDom = function() {
// Instantiate the story view
var StoryView = this.wiki.macros.story.viewers[this.params.storyview];
if(StoryView) {
this.storyview = new StoryView(this);
};
};
exports.refreshInDom = function(changes) {
@ -139,8 +158,8 @@ exports.refreshInDom = function(changes) {
template = this.params.template,
n,domNode,
findTiddler = function (childIndex,tiddlerTitle,templateTitle) {
while(childIndex < self.children.length) {
var params = self.children[childIndex].params;
while(childIndex < self.children[0].children.length) {
var params = self.children[0].children[childIndex].children[0].params;
if(params.target === tiddlerTitle) {
if(!templateTitle || params.template === templateTitle) {
return childIndex;
@ -155,35 +174,40 @@ exports.refreshInDom = function(changes) {
var tiddlerNode = findTiddler(t,story.tiddlers[t].title,story.tiddlers[t].template);
if(tiddlerNode === null) {
// If not, render the tiddler
var m = $tw.Tree.Macro("tiddler",
var m = $tw.Tree.Element("div",{},[
$tw.Tree.Macro("tiddler",
{target: story.tiddlers[t].title,template: story.tiddlers[t].template},
null,
this.wiki);
this.wiki)
]);
m.execute(this.parents,this.tiddlerTitle);
m.renderInDom(this.domNode,this.domNode.childNodes[t]);
this.children.splice(t,0,m);
m.renderInDom(this.children[0].domNode,this.children[0].domNode.childNodes[t]);
this.children[0].children.splice(t,0,m);
if(this.storyview && this.storyview.tiddlerAdded) {
this.storyview.tiddlerAdded(this.children[0].children[t]);
}
} 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.children[n].domNode;
domNode = this.children[0].children[n].domNode;
domNode.parentNode.removeChild(domNode);
}
// Then delete the actual renderer nodes
this.children.splice(t,tiddlerNode-t);
this.children[0].children.splice(t,tiddlerNode-t);
}
// Refresh the DOM node we're reusing
this.children[t].refreshInDom(changes);
this.children[0].children[t].refreshInDom(changes);
}
}
// Remove any left over nodes
if(this.children.length > story.tiddlers.length) {
for(t=story.tiddlers.length; t<this.children.length; t++) {
domNode = this.children[t].domNode;
if(this.children[0].children.length > story.tiddlers.length) {
for(t=story.tiddlers.length; t<this.children[0].children.length; t++) {
domNode = this.children[0].children[t].domNode;
domNode.parentNode.removeChild(domNode);
}
this.children.splice(story.tiddlers.length,this.children.length-story.tiddlers.length);
this.children[0].children.splice(story.tiddlers.length,this.children[0].children.length-story.tiddlers.length);
}
} else {
for(t=0; t<this.children.length; t++) {

View File

@ -0,0 +1,30 @@
/*\
title: $:/core/modules/macros/story/zoomin.js
type: application/javascript
module-type: storyview
A storyview that shows a single tiddler and navigates by zooming into links
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
function Zoomin(story) {
this.story = story;
var wrapper = this.story.children[0].domNode;
wrapper.style.position = "relative";
for(var t=0; t<wrapper.children.length; t++) {
wrapper.children[t].style.position = "absolute";
}
}
Zoomin.prototype.tiddlerAdded = function(newTiddlerNode) {
newTiddlerNode.domNode.style.position = "absolute";
}
exports.zoomin = Zoomin;
})();

View File

@ -36,6 +36,7 @@ exports.startup = function() {
// Set up the wiki store
$tw.wiki.initMacros();
$tw.wiki.initEditors();
$tw.wiki.initStoryViews();
$tw.wiki.initParsers();
// Set up the command plugins
$tw.Commander.initCommands();

View File

@ -362,4 +362,16 @@ exports.initEditors = function(moduleType) {
}
};
/*
Install view plugins for the story macro
*/
exports.initStoryViews = function(moduleType) {
moduleType = moduleType || "storyview";
var storyMacro = this.macros.story;
if(storyMacro) {
storyMacro.viewers = {};
$tw.plugins.applyMethods(moduleType,storyMacro.viewers);
}
};
})();