mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-25 09:30:28 +00:00
Refactored macro event handling
Updated the slider macro to use the new mechanism to start with
This commit is contained in:
parent
449f322a86
commit
f576c86b41
16
js/App.js
16
js/App.js
@ -108,23 +108,9 @@ var App = function() {
|
|||||||
navigators.registerNavigator("StoryNavigator",new StoryNavigator(navigators));
|
navigators.registerNavigator("StoryNavigator",new StoryNavigator(navigators));
|
||||||
// Use the story navigator for all links
|
// Use the story navigator for all links
|
||||||
navigators.install("a","StoryNavigator");
|
navigators.install("a","StoryNavigator");
|
||||||
// Install an event handler for sliders
|
|
||||||
document.addEventListener("click",function(e) {
|
|
||||||
var el = e.target,
|
|
||||||
matchesSelector = el.matchesSelector || el.mozMatchesSelector ||
|
|
||||||
el.webkitMatchesSelector || el.oMatchesSelector || el.msMatchesSelector;
|
|
||||||
if(matchesSelector && matchesSelector.call(el,".tw-slider-label")) {
|
|
||||||
var currState = el.nextSibling.style.display;
|
|
||||||
el.nextSibling.style.display = currState === "block" ? "none" : "block";
|
|
||||||
e.preventDefault();
|
|
||||||
return false;
|
|
||||||
} else {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
},false);
|
|
||||||
// Open the PageTemplate
|
// Open the PageTemplate
|
||||||
var div = document.createElement("div");
|
var div = document.createElement("div");
|
||||||
div.innerHTML = this.store.renderTiddler("text/html","PageTemplate");
|
this.store.renderTiddlerInNode(div,"PageTemplate");
|
||||||
document.body.appendChild(div);
|
document.body.appendChild(div);
|
||||||
// Set up a timer to change the value of a tiddler
|
// Set up a timer to change the value of a tiddler
|
||||||
var me = this;
|
var me = this;
|
||||||
|
@ -382,6 +382,48 @@ WikiStore.prototype.renderTiddler = function(targetType,title,templateTitle,opti
|
|||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
Renders a tiddler and inserts the HTML into a DOM node, and then attaches the event handlers needed by macros
|
||||||
|
*/
|
||||||
|
WikiStore.prototype.renderTiddlerInNode = function(node,title,templateTitle,options) {
|
||||||
|
node.innerHTML = this.renderTiddler("text/html",title,templateTitle,options);
|
||||||
|
this.attachEventHandlers(node,title,templateTitle);
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
Recursively attach macro event handlers for a node and its children
|
||||||
|
*/
|
||||||
|
WikiStore.prototype.attachEventHandlers = function(node,renderTiddler,renderTemplate) {
|
||||||
|
var me = this,
|
||||||
|
dispatchMacroEvent = function(event) {
|
||||||
|
var renderer = me.compileTiddler(renderTemplate ? renderTemplate : renderTiddler,"text/html"),
|
||||||
|
macroName = node.getAttribute("data-tw-macro"),
|
||||||
|
macro = me.macros[macroName],
|
||||||
|
step = node.getAttribute("data-tw-render-step");
|
||||||
|
macro.events[event.type](event,node,renderTiddler,me,renderer.renderSteps[step].params(renderTiddler,renderer,me,utils));
|
||||||
|
};
|
||||||
|
if(node.getAttribute) {
|
||||||
|
var macroName = node.getAttribute("data-tw-macro");
|
||||||
|
if(typeof macroName === "string") {
|
||||||
|
var macro = this.macros[macroName];
|
||||||
|
if(macro.events) {
|
||||||
|
for(var e in macro.events) {
|
||||||
|
node.addEventListener(e,dispatchMacroEvent,false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(node.hasAttribute("data-tw-render-tiddler")) {
|
||||||
|
renderTiddler = node.getAttribute("data-tw-render-tiddler");
|
||||||
|
renderTemplate = node.getAttribute("data-tw-render-template");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(node.hasChildNodes) {
|
||||||
|
for(var t=0; t<node.childNodes.length; t++) {
|
||||||
|
this.attachEventHandlers(node.childNodes[t],renderTiddler,renderTemplate);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
WikiStore.prototype.installMacro = function(macro) {
|
WikiStore.prototype.installMacro = function(macro) {
|
||||||
this.macros[macro.name] = macro;
|
this.macros[macro.name] = macro;
|
||||||
};
|
};
|
||||||
@ -437,7 +479,7 @@ WikiStore.prototype.refreshDomNode = function(node,changes,renderer,tiddler) {
|
|||||||
if(renderTiddler !== null) {
|
if(renderTiddler !== null) {
|
||||||
// Rerender the content of the node if the tiddler being rendered has changed
|
// Rerender the content of the node if the tiddler being rendered has changed
|
||||||
if(changes.hasOwnProperty(renderTiddler) || (renderTemplate && changes.hasOwnProperty(renderTemplate))) {
|
if(changes.hasOwnProperty(renderTiddler) || (renderTemplate && changes.hasOwnProperty(renderTemplate))) {
|
||||||
node.innerHTML = this.renderTiddler("text/html",renderTiddler,renderTemplate,{noWrap: true});
|
this.renderTiddlerInNode(node,renderTiddler,renderTemplate,{noWrap: true});
|
||||||
} else {
|
} else {
|
||||||
// If it hasn't changed, just refresh the child nodes
|
// If it hasn't changed, just refresh the child nodes
|
||||||
if(typeof renderTemplate !== "string") {
|
if(typeof renderTemplate !== "string") {
|
||||||
|
@ -18,6 +18,14 @@ exports.macro = {
|
|||||||
label: {byPos: 2, type: "text", optional: false},
|
label: {byPos: 2, type: "text", optional: false},
|
||||||
tooltip: {byPos: 3, type: "text", optional: true}
|
tooltip: {byPos: 3, type: "text", optional: true}
|
||||||
},
|
},
|
||||||
|
events: {
|
||||||
|
click: function(event,node,tiddler,store,params) {
|
||||||
|
var el = node.firstChild.firstChild.nextSibling;
|
||||||
|
el.style.display = el.style.display === "block" ? "none" : "block";
|
||||||
|
event.preventDefault();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
render: function(type,tiddler,store,params) {
|
render: function(type,tiddler,store,params) {
|
||||||
if(type === "text/html") {
|
if(type === "text/html") {
|
||||||
return utils.stitchSlider(type,
|
return utils.stitchSlider(type,
|
||||||
|
@ -67,7 +67,7 @@ exports.macro = {
|
|||||||
if(tiddlerNode === null) {
|
if(tiddlerNode === null) {
|
||||||
// If not, render the tiddler
|
// If not, render the tiddler
|
||||||
var tmpNode = document.createElement("div");
|
var tmpNode = document.createElement("div");
|
||||||
tmpNode.innerHTML = store.renderTiddler(type,targetTiddlers[t],params.template);
|
store.renderTiddlerInNode(tmpNode,targetTiddlers[t],params.template);
|
||||||
tiddlerNode = tmpNode.firstChild;
|
tiddlerNode = tmpNode.firstChild;
|
||||||
node.insertBefore(tiddlerNode,currNode);
|
node.insertBefore(tiddlerNode,currNode);
|
||||||
} else {
|
} else {
|
||||||
|
@ -95,6 +95,10 @@ a.tw-tiddlylink-missing {
|
|||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a.tw-slider-label::after {
|
||||||
|
content: "\00a0\27a4";
|
||||||
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@ -207,7 +211,6 @@ a.tw-tiddlylink-missing {
|
|||||||
text-shadow: rgba(255, 255, 255, 0.746094) 0px 1px 1px;
|
text-shadow: rgba(255, 255, 255, 0.746094) 0px 1px 1px;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
width: 131px;
|
|
||||||
word-spacing: 0px;
|
word-spacing: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user