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:
parent
0609670b94
commit
d8f17e9d6b
1
bld.sh
1
bld.sh
@ -8,7 +8,6 @@ mkdir -p tmp/tw5
|
||||
|
||||
# cook TiddlyWiki5
|
||||
|
||||
|
||||
pushd tw5.com > /dev/null
|
||||
|
||||
node ../core/boot.js \
|
||||
|
@ -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;
|
||||
|
@ -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++) {
|
||||
|
30
core/modules/macros/story/views/zoomin.js
Normal file
30
core/modules/macros/story/views/zoomin.js
Normal 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;
|
||||
|
||||
})();
|
@ -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();
|
||||
|
@ -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);
|
||||
}
|
||||
};
|
||||
|
||||
})();
|
||||
|
Loading…
Reference in New Issue
Block a user