1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-25 23:03:15 +00:00

New popup cancelling mechanism

This commit is contained in:
Jeremy Ruston 2012-06-19 16:47:35 +01:00
parent 08d7a12d04
commit 5103f1585b
4 changed files with 94 additions and 71 deletions

View File

@ -30,47 +30,42 @@ exports.dispatchMessage = function(event) {
}; };
exports.triggerPopup = function(event,cancel) { exports.triggerPopup = function(event,cancel) {
// Get the title of the popup state tiddler // Get the textref of the popup state tiddler
var title = this.params.popup; var textRef = this.params.popup;
if(this.hasParameter("qualifyTiddlerTitles") && this.params.qualifyTiddlerTitles === "yes") { if(this.hasParameter("qualifyTiddlerTitles") && this.params.qualifyTiddlerTitles === "yes") {
title = "(" + this.parents.join(",") + "," + this.tiddlerTitle + ")" + title; textRef = "(" + this.parents.join(",") + "," + this.tiddlerTitle + ")" + textRef;
} }
// Get the popup state tiddler and the the text value
var tiddler = this.wiki.getTiddler(title),
value = tiddler ? tiddler.fields.text : "";
// Check for cancelling // Check for cancelling
if(cancel) { if(cancel) {
value = ""; this.wiki.deleteTextReference(textRef,this.tiddlerTitle);
} else { } else {
// Get the current popup state tiddler
var value = this.wiki.getTextReference(textRef,"",this.tiddlerTitle);
// Check if the popup is open by checking whether it matches "(<x>,<y>)" // 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]+)\)$/; var popupLocationRegExp = /^\((-?[0-9\.E]+),(-?[0-9\.E]+),(-?[0-9\.E]+),(-?[0-9\.E]+)\)$/;
if(popupLocationRegExp.test(value)) { if(popupLocationRegExp.test(value)) {
value = ""; this.wiki.deleteTextReference(textRef,this.tiddlerTitle);
} else { } else {
// Set the position if we're opening it // Set the position if we're opening it
value = "(" + this.child.domNode.offsetLeft + "," + this.child.domNode.offsetTop + "," + this.child.domNode.offsetWidth + "," + this.child.domNode.offsetHeight + ")"; this.wiki.setTextReference(textRef,
"(" + this.child.domNode.offsetLeft + "," + this.child.domNode.offsetTop + "," +
this.child.domNode.offsetWidth + "," + this.child.domNode.offsetHeight + ")",
this.tiddlerTitle,true);
$tw.popupper.popup(textRef);
} }
} }
// Update the state tiddler
this.wiki.addTiddler(new $tw.Tiddler(tiddler,{title: title, text: value}),true);
}; };
exports.handleEvent = function(event) { exports.handleEvent = function(event) {
switch(event.type) { if(event.type === "click") {
case "click": if(this.hasParameter("message")) {
if(this.hasParameter("message")) { this.dispatchMessage(event);
this.dispatchMessage(event); }
} if(this.hasParameter("popup")) {
if(this.hasParameter("popup")) { this.triggerPopup(event);
this.triggerPopup(event); }
} event.preventDefault();
event.preventDefault(); return false;
return false;
case "tw-cancel-popup":
if(this.hasParameter("popup") && this.child.domNode !== event.targetOfCancel && !$tw.utils.domContains(this.child.domNode,event.targetOfCancel)) {
this.triggerPopup(event,true);
}
break;
} }
return true; return true;
}; };
@ -87,7 +82,7 @@ exports.executeMacro = function() {
this.content[t].execute(this.parents,this.tiddlerTitle); this.content[t].execute(this.parents,this.tiddlerTitle);
} }
return $tw.Tree.Element("button",attributes,this.content,{ return $tw.Tree.Element("button",attributes,this.content,{
events: ["click","tw-cancel-popup"], events: ["click"],
eventHandler: this eventHandler: this
}); });
}; };

View File

@ -30,15 +30,12 @@ exports.readState = function() {
this.isOpen = this.params["default"] === "open"; this.isOpen = this.params["default"] === "open";
} }
// Read the information from the state tiddler // Read the information from the state tiddler
if(this.stateTitle) { if(this.stateTextRef) {
var stateTiddler = this.wiki.getTiddler(this.stateTitle); var state = this.wiki.getTextReference(this.stateTextRef,"",this.tiddlerTitle);
if(stateTiddler) { switch(this.params.type) {
var state = stateTiddler ? stateTiddler.fields.text : ""; case "popup":
switch(this.params.type) { this.readPopupState(state);
case "popup": break;
this.readPopupState(state);
break;
}
} }
} }
}; };
@ -66,15 +63,16 @@ exports.readPopupState = function(state) {
exports.handleEvent = function(event) { exports.handleEvent = function(event) {
if(event.type === "click") { if(event.type === "click") {
// Cancel the popup if we get a click on it // Cancel the popup if we get a click on it
var tiddler = this.wiki.getTiddler(this.stateTitle); if(this.stateTextRef) {
this.wiki.addTiddler(new $tw.Tiddler(tiddler,{title: this.stateTitle, text: ""}),true); this.wiki.deleteTextReference(this.stateTextRef);
}
} }
}; };
exports.executeMacro = function() { exports.executeMacro = function() {
this.stateTitle = this.params.state; this.stateTextRef = this.params.state;
if(this.hasParameter("qualifyTiddlerTitles")) { if(this.hasParameter("qualifyTiddlerTitles")) {
this.stateTitle = "(" + this.parents.join(",") + "," + this.tiddlerTitle + ")" + this.stateTitle; this.stateTextRef = "(" + this.parents.join(",") + "," + this.tiddlerTitle + ")" + this.stateTextRef;
} }
this.readState(); this.readState();
var attributes = { var attributes = {
@ -105,10 +103,8 @@ exports.executeMacro = function() {
exports.refreshInDom = function(changes) { exports.refreshInDom = function(changes) {
var needChildrenRefresh = true, // Avoid refreshing the children nodes if we don't need to var needChildrenRefresh = true, // Avoid refreshing the children nodes if we don't need to
t; t;
// If the state tiddler has changed then reset the open state // Re-read the open state
if($tw.utils.hop(changes,this.stateTitle)) { this.readState();
this.readState();
}
// Render the children if we're open and we don't have any children yet // Render the children if we're open and we don't have any children yet
if(this.isOpen && this.child.children.length === 0) { if(this.isOpen && this.child.children.length === 0) {
// Install the children and execute them // Install the children and execute them

49
core/modules/popupper.js Normal file
View File

@ -0,0 +1,49 @@
/*\
title: $:/core/modules/popupper.js
type: application/javascript
module-type: utils
Plugin that creates a $tw.utils.Popupper object prototype that manages popups in the browser
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
/*
Creates a Popupper 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 Popupper = function(options) {
options = options || {};
this.wiki = options.wiki;
this.rootElement = options.rootElement || document.body;
this.popupTextRef = null;
};
Popupper.prototype.popup = function(stateTextRef) {
var popupState;
this.cancel();
this.popupTextRef = stateTextRef;
this.rootElement.addEventListener("click",this,true);
};
Popupper.prototype.handleEvent = function(event) {
if(event.type === "click") {
this.cancel();
}
}
Popupper.prototype.cancel = function() {
if(this.popupTextRef) {
this.wiki.deleteTextReference(this.popupTextRef);
this.popupTextRef = null;
}
};
exports.Popupper = Popupper;
})();

View File

@ -48,35 +48,18 @@ exports.startup = function() {
$tw.Commander.initCommands(); $tw.Commander.initCommands();
// Host-specific startup // Host-specific startup
if($tw.browser) { if($tw.browser) {
// Install the popup zapper // Install the popupper
// document.body.addEventListener("click",function(event) { $tw.popupper = new $tw.utils.Popupper({
// // Is the click within a popup? wiki: $tw.wiki,
// var inPopup = false, rootElement: document.body
// e = event.target; });
// while(e !== document) {
// if($tw.utils.hasClass(e,"tw-popup")) {
// inPopup = true;
// }
// e = e.parentNode;
// }
// // If we're not in a popup, then send out an event to cancel all popups
// if(!inPopup) {
// var cancelPopupEvent = document.createEvent("Event");
// cancelPopupEvent.initEvent("tw-cancel-popup",true,true);
// cancelPopupEvent.targetOfCancel = event.target;
// var controllers = document.querySelectorAll(".tw-popup-controller");
// for(var t=0; t<controllers.length; t++) {
// controllers[t].dispatchEvent(cancelPopupEvent);
// }
// }
// });
// Display the PageTemplate // Display the PageTemplate
var template = "$:/templates/PageTemplate", var template = "$:/templates/PageTemplate";
renderer = $tw.wiki.parseTiddler(template); $tw.renderer = $tw.wiki.parseTiddler(template);
renderer.execute([],template); $tw.renderer.execute([],template);
renderer.renderInDom(document.body); $tw.renderer.renderInDom(document.body);
$tw.wiki.addEventListener("",function(changes) { $tw.wiki.addEventListener("",function(changes) {
renderer.refreshInDom(changes); $tw.renderer.refreshInDom(changes);
}); });
console.log("$tw",$tw); console.log("$tw",$tw);
} else { } else {