mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2026-09-16 06:41:21 +00:00
Code Issues Releases Wiki Activity

Added reveal macro

Browse Source
This commit is contained in:
Jeremy Ruston
2012-12-31 18:36:39 +00:00
parent 61eb585640
commit 8fdeefd7d1
8 changed files with 247 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/modules/widgets/button.js
+5 -3
View File
@@ -60,11 +60,13 @@ exports.dispatchMessage = function(event) {
};
exports.triggerPopup = function(event) {
var title = this.popup;
if(this.qualifyTiddlerTitles) {
title = title + "-" + this.renderer.getContextScopeId();
}
$tw.popup.triggerPopup({
textRef: this.popup,
domNode: this.renderer.domNode,
qualifyTiddlerTitles: this.qualifyTiddlerTitles,
renderContext: this.renderer.renderContext,
title: title,
wiki: this.renderer.renderTree.wiki
});
};
core/modules/widgets/popup.js
-97
View File
@@ -1,97 +0,0 @@
/*\
title: $:/core/modules/widget/popup.js
type: application/javascript
module-type: widget
Implements the popup widget.
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
exports.name = "popup";
exports.init = function(renderer) {
// Save state
this.renderer = renderer;
// Generate child nodes
this.generateChildNodes();
};
exports.generateChildNodes = function() {
// Get the parameters from the attributes
this.hover = this.renderer.getAttribute("hover");
this["class"] = this.renderer.getAttribute("class");
// Find the handle and body in the parse tree children
var handle = $tw.utils.findParseTreeNode(this.renderer.parseTreeNode.children,{type: "widget", tag: "handle"}),
body = $tw.utils.findParseTreeNode(this.renderer.parseTreeNode.children,{type: "widget", tag: "body"});
// Compose the elements
var classes = ["tw-popup-wrapper"];
if(this["class"]) {
$tw.utils.pushTop(classes,this["class"]);
}
var events = [{name: "click", handlerObject: this, handlerMethod: "handleClickEvent"}];
if(this.hover === "yes") {
events.push({name: "mouseover", handlerObject: this, handlerMethod: "handleMouseOverOrOutEvent"});
events.push({name: "mouseout", handlerObject: this, handlerMethod: "handleMouseOverOrOutEvent"});
}
this.children = this.renderer.renderTree.createRenderers(this.renderer.renderContext,[
{
type: "element",
tag: "button",
attributes: {
"class": {type: "string", value: classes.join(" ")}
},
children: handle.children,
events: events
},
{
type: "element",
tag: "div",
children: body.children,
attributes: {
style: {
type: "string",
value: "display:none;"
}
}
}
]);
};
exports.triggerPopup = function(event) {
};
exports.handleClickEvent = function(event) {
this.triggerPopup(event);
event.preventDefault();
return false;
};
exports.refreshInDom = function(changedAttributes,changedTiddlers) {
// Check if any of our attributes have changed, or if a tiddler we're interested in has changed
if(changedAttributes.hover || changedAttributes["class"] ) {
// Remove old child nodes
$tw.utils.removeChildren(this.parentElement);
// Regenerate and render children
this.generateChildNodes();
var self = this;
$tw.utils.each(this.children,function(node) {
if(node.renderInDom) {
self.parentElement.appendChild(node.renderInDom());
}
});
} else {
// We don't need to refresh ourselves, so just refresh any child nodes
$tw.utils.each(this.children,function(node) {
if(node.refreshInDom) {
node.refreshInDom(changedTiddlers);
}
});
}
};
})();
core/modules/widgets/reveal.js
+185
View File
@@ -0,0 +1,185 @@
/*\
title: $:/core/modules/widget/reveal.js
type: application/javascript
module-type: widget
Implements the reveal widget.
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
exports.name = "reveal";
exports.init = function(renderer) {
// Save state
this.renderer = renderer;
// Generate child nodes
this.generateChildNodes();
};
exports.generateChildNodes = function() {
// Get the parameters from the attributes
this.state = this.renderer.getAttribute("state");
this.type = this.renderer.getAttribute("type");
this.text = this.renderer.getAttribute("text");
this.position = this.renderer.getAttribute("position");
this["default"] = this.renderer.getAttribute("default");
this.qualifyTiddlerTitles = this.renderer.getAttribute("qualifyTiddlerTitles");
this["class"] = this.renderer.getAttribute("class");
// Compute the title of the state tiddler and read it
this.stateTitle = this.state;
if(this.qualifyTiddlerTitles) {
this.stateTitle = this.stateTitle + "-" + this.renderer.getContextScopeId();
}
this.readState();
// Compose the node
var node = {
type: "element",
tag: "div",
children: this.renderer.parseTreeNode.children,
events: [{name: "click", handlerObject: this, handlerMethod: "handleClickEvent"}]
};
$tw.utils.addClassToParseTreeNode(node,"tw-reveal");
if(this["class"]) {
$tw.utils.addClassToParseTreeNode(node,this["class"].join(" "));
}
switch(this.type) {
case "popup":
$tw.utils.addStyleToParseTreeNode(node,"position","absolute");
$tw.utils.addClassToParseTreeNode(node,"tw-popup");
break;
}
$tw.utils.addStyleToParseTreeNode(node,"display",this.isOpen ? (this.isBlock ? "block" : "inline") : "none");
// Return the node
this.children = this.renderer.renderTree.createRenderers(this.renderer.renderContext,[node]);
};
/*
Read the state tiddler
*/
exports.readState = function() {
// Start with the default value for being open or closed
if(this["default"]) {
this.isOpen = this["default"] === "open";
}
// Read the information from the state tiddler
if(this.stateTitle) {
var state = this.renderer.renderTree.wiki.getTextReference(this.stateTitle);
switch(this.type) {
case "popup":
this.readPopupState(state);
break;
case "match":
this.readMatchState(state);
break;
case "nomatch":
this.readMatchState(state);
this.isOpen = !this.isOpen;
break;
}
}
};
exports.readMatchState = function(state) {
this.isOpen = state === this.text;
};
exports.readPopupState = function(state) {
var popupLocationRegExp = /^\((-?[0-9\.E]+),(-?[0-9\.E]+),(-?[0-9\.E]+),(-?[0-9\.E]+)\)$/,
match = popupLocationRegExp.exec(state);
// Check if the state matches the location regexp
if(match) {
// If so, we're open
this.isOpen = true;
// Get the location
this.popup = {
left: parseFloat(match[1]),
top: parseFloat(match[2]),
width: parseFloat(match[3]),
height: parseFloat(match[4])
};
} else {
// If not, we're closed
this.isOpen = false;
}
};
exports.handleClickEvent = function(event) {
if(event.type === "click" && this.type === "popup") {
// Cancel the popup if we get a click on it
if(this.stateTitle) {
this.renderer.renderTree.wiki.deleteTextReference(this.stateTitle);
}
event.preventDefault();
return false;
}
return true;
};
exports.refreshInDom = function(changedAttributes,changedTiddlers) {
// Check if any of our attributes have changed, or if a tiddler we're interested in has changed
if(changedAttributes.state || changedAttributes.type || changedAttributes.text || changedAttributes.position || changedAttributes["default"] || changedAttributes.qualifyTiddlerTitles || changedAttributes["class"] || (this.stateTitle && changedTiddlers[this.stateTitle])) {
// Remove old child nodes
$tw.utils.removeChildren(this.parentElement);
// Regenerate and render children
this.generateChildNodes();
var self = this;
$tw.utils.each(this.children,function(node) {
if(node.renderInDom) {
self.parentElement.appendChild(node.renderInDom());
}
});
} else {
// We don't need to refresh ourselves, so just refresh any child nodes
$tw.utils.each(this.children,function(node) {
if(node.refreshInDom) {
node.refreshInDom(changedTiddlers);
}
});
}
// Position the content if required
this.postRenderInDom();
};
exports.postRenderInDom = function() {
switch(this.type) {
case "popup":
if(this.isOpen) {
this.children[0].domNode.style.position = "absolute";
this.children[0].domNode.style.zIndex = "1000";
switch(this.position) {
case "left":
this.children[0].domNode.style.left = (this.popup.left - this.children[0].domNode.offsetWidth) + "px";
this.children[0].domNode.style.top = this.popup.top + "px";
break;
case "above":
this.children[0].domNode.style.left = this.popup.left + "px";
this.children[0].domNode.style.top = (this.popup.top - this.children[0].domNode.offsetHeight) + "px";
break;
case "aboveright":
this.children[0].domNode.style.left = (this.popup.left + this.popup.width) + "px";
this.children[0].domNode.style.top = (this.popup.top + this.popup.height - this.children[0].domNode.offsetHeight) + "px";
break;
case "right":
this.children[0].domNode.style.left = (this.popup.left + this.popup.width) + "px";
this.children[0].domNode.style.top = this.popup.top + "px";
break;
case "belowleft":
this.children[0].domNode.style.left = (this.popup.left + this.popup.width - this.children[0].domNode.offsetWidth) + "px";
this.children[0].domNode.style.top = (this.popup.top + this.popup.height) + "px";
break;
default: // Below
this.children[0].domNode.style.left = this.popup.left + "px";
this.children[0].domNode.style.top = (this.popup.top + this.popup.height) + "px";
break;
}
}
break;
}
};
})();