mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-06-16 10:29:54 +00:00
Added reveal macro
This commit is contained in:
Jeremy Ruston
parent
61eb585640
commit
8fdeefd7d1
|
|
@ -92,6 +92,10 @@ WidgetRenderer.prototype.renderInDom = function() {
|
|||
$tw.utils.addEventListeners(this.domNode,this.widget.getEventListeners());
|
||||
}
|
||||
}
|
||||
// Call the postRenderInDom hook if the widget has one
|
||||
if(this.widget.postRenderInDom) {
|
||||
this.widget.postRenderInDom();
|
||||
}
|
||||
// Return the dom node
|
||||
return this.domNode;
|
||||
};
|
||||
|
|
@ -138,6 +142,22 @@ WidgetRenderer.prototype.checkContextRecursion = function(newRenderContext) {
|
|||
return false;
|
||||
};
|
||||
|
||||
WidgetRenderer.prototype.getContextScopeId = function() {
|
||||
var guidBits = [],
|
||||
context = this.renderContext;
|
||||
while(context) {
|
||||
$tw.utils.each(context,function(field,name) {
|
||||
if(name !== "parentContext") {
|
||||
guidBits.push(name + ":" + field + ";");
|
||||
}
|
||||
});
|
||||
guidBits.push("-");
|
||||
context = context.parentContext;
|
||||
}
|
||||
return $tw.utils.toBase64(guidBits.join(""));
|
||||
};
|
||||
|
||||
|
||||
exports.widget = WidgetRenderer
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -42,7 +42,6 @@ exports.startup = function() {
|
|||
});
|
||||
// Install the popup manager
|
||||
$tw.popup = new $tw.utils.Popup({
|
||||
wiki: $tw.wiki,
|
||||
rootElement: document.body
|
||||
});
|
||||
// Install the modal message mechanism
|
||||
|
|
|
|||
|
|
@ -14,64 +14,55 @@ Module that creates a $tw.utils.Popup object prototype that manages popups in th
|
|||
|
||||
/*
|
||||
Creates a Popup object with these options:
|
||||
wiki: the wiki to use for resolving tiddler titles
|
||||
rootElement: the DOM element to which the popup zapper should be attached
|
||||
*/
|
||||
var Popup = function(options) {
|
||||
options = options || {};
|
||||
this.wiki = options.wiki;
|
||||
this.rootElement = options.rootElement || document.body;
|
||||
this.popupTextRef = null;
|
||||
};
|
||||
|
||||
Popup.prototype.popup = function(stateTextRef) {
|
||||
Popup.prototype.show = function(options) {
|
||||
this.cancel();
|
||||
this.popupTextRef = stateTextRef;
|
||||
this.rootElement.addEventListener("click",this,true);
|
||||
this.title = options.title;
|
||||
this.wiki = options.wiki;
|
||||
// this.rootElement.addEventListener("click",this,true);
|
||||
};
|
||||
|
||||
Popup.prototype.handleEvent = function(event) {
|
||||
if(event.type === "click") {
|
||||
this.rootElement.removeEventListener("click",this,true);
|
||||
this.cancel();
|
||||
}
|
||||
};
|
||||
|
||||
Popup.prototype.cancel = function() {
|
||||
if(this.popupTextRef) {
|
||||
this.wiki.deleteTextReference(this.popupTextRef);
|
||||
this.popupTextRef = null;
|
||||
// this.rootElement.removeEventListener("click",this,true);
|
||||
if(this.title) {
|
||||
this.wiki.deleteTiddler(this.title);
|
||||
this.title = null;
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
Trigger a popup open or closed. Parameters are in a hashmap:
|
||||
textRef: text reference where the popup details are stored
|
||||
title: title of the tiddler where the popup details are stored
|
||||
domNode: dom node to which the popup will be positioned
|
||||
qualifyTiddlerTitles: "yes" if state tiddler titles are to be qualified
|
||||
contextTiddlerTitle: title of tiddler providing context for text references
|
||||
contextParents: parent stack
|
||||
wiki: wiki
|
||||
*/
|
||||
Popup.prototype.triggerPopup = function(options) {
|
||||
// Get the textref of the popup state tiddler
|
||||
var textRef = options.textRef;
|
||||
if(options.qualifyTiddlerTitles === "yes") {
|
||||
textRef = textRef + "(" + options.contextParents.join(",") + "," + options.contextTiddlerTitle + ")";
|
||||
}
|
||||
// Get the current popup state tiddler
|
||||
var value = options.wiki.getTextReference(textRef,"",options.contextTiddlerTitle);
|
||||
var value = options.wiki.getTextReference(options.title,"");
|
||||
console.log("Value is",value)
|
||||
// Check if the popup is open by checking whether it matches "(<x>,<y>)"
|
||||
var popupLocationRegExp = /^\((-?[0-9\.E]+),(-?[0-9\.E]+),(-?[0-9\.E]+),(-?[0-9\.E]+)\)$/;
|
||||
if(popupLocationRegExp.test(value)) {
|
||||
this.cancel();
|
||||
} else {
|
||||
// Set the position if we're opening it
|
||||
options.wiki.setTextReference(textRef,
|
||||
this.cancel();
|
||||
options.wiki.setTextReference(options.title,
|
||||
"(" + options.domNode.offsetLeft + "," + options.domNode.offsetTop + "," +
|
||||
options.domNode.offsetWidth + "," + options.domNode.offsetHeight + ")",
|
||||
options.contextTiddlerTitle,true);
|
||||
this.popup(textRef);
|
||||
options.domNode.offsetWidth + "," + options.domNode.offsetHeight + ")");
|
||||
this.show(options);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -24,6 +24,17 @@ exports.trim = function(str) {
|
|||
}
|
||||
};
|
||||
|
||||
/*
|
||||
Convert a string to base64 encoding
|
||||
*/
|
||||
exports.toBase64 = function(str) {
|
||||
if($tw.browser) {
|
||||
return window.btoa(str);
|
||||
} else {
|
||||
new Buffer(str).toString("base64");
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
Return the number of keys in an object
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
})();
|
||||
185
core/modules/widgets/reveal.js
Normal file
185
core/modules/widgets/reveal.js
Normal 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;
|
||||
}
|
||||
};
|
||||
|
||||
})();
|
||||
|
|
@ -1,9 +1,14 @@
|
|||
title: $:/templates/TagTemplate
|
||||
|
||||
<$popup class="btn-invisible"><$handle>
|
||||
@@.label <$view field="title" format="text" />@@
|
||||
</$handle><$body>
|
||||
Some popup
|
||||
</$body>
|
||||
</$popup>
|
||||
<$button popup="tagpopup" qualifyTiddlerTitles="yes" class="btn-invisible">@@.label <$view field="title" format="text" />@@</$button>
|
||||
<$reveal state="tagpopup" type="popup" position="below" qualifyTiddlerTitles="yes" ><div class="open">
|
||||
|
||||
@@.dropdown-menu
|
||||
|
||||
* <$view field="title" format="link" />
|
||||
*.divider
|
||||
* <$list filter="[is[current]tagging[]]" ><li><$view field="title" format="link" /></li></$list>
|
||||
|
||||
@@
|
||||
|
||||
</div></$reveal>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user