mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-24 17:10:29 +00:00
Made it so clicking outside a popup cancels the popup
Clicking inside still doesn't cancel it, though
This commit is contained in:
parent
c168ec0ad4
commit
161ddcb473
@ -20,7 +20,7 @@ exports.info = {
|
||||
qualifyTiddlerTitles: {byName: true, type: "text"},
|
||||
"class": {byName: true, type: "text"}
|
||||
},
|
||||
events: ["click"]
|
||||
events: ["click", "tw-cancel-popup"]
|
||||
};
|
||||
|
||||
exports.dispatchMessage = function(event) {
|
||||
@ -30,7 +30,7 @@ exports.dispatchMessage = function(event) {
|
||||
event.target.dispatchEvent(buttonEvent);
|
||||
};
|
||||
|
||||
exports.triggerPopup = function(event) {
|
||||
exports.triggerPopup = function(event,cancel) {
|
||||
// Get the title of the popup state tiddler
|
||||
var title = this.params.popup;
|
||||
if(this.hasParameter("qualifyTiddlerTitles") && this.params.qualifyTiddlerTitles === "yes") {
|
||||
@ -39,6 +39,10 @@ exports.triggerPopup = function(event) {
|
||||
// Get the popup state tiddler and the the text value
|
||||
var tiddler = this.wiki.getTiddler(title),
|
||||
value = tiddler ? tiddler.fields.text : "";
|
||||
// Check for cancelling
|
||||
if(cancel) {
|
||||
value = "";
|
||||
} else {
|
||||
// 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)) {
|
||||
@ -47,28 +51,35 @@ exports.triggerPopup = function(event) {
|
||||
// Set the position if we're opening it
|
||||
value = "(" + this.domNode.offsetLeft + "," + this.domNode.offsetTop + "," + this.domNode.offsetWidth + "," + this.domNode.offsetHeight + ")";
|
||||
}
|
||||
}
|
||||
// Update the state tiddler
|
||||
this.wiki.addTiddler(new $tw.Tiddler(tiddler,{title: title, text: value}),true);
|
||||
};
|
||||
|
||||
exports.handleEvent = function(event) {
|
||||
if(event.type === "click") {
|
||||
switch(event.type) {
|
||||
case "click":
|
||||
if(this.hasParameter("message")) {
|
||||
this.dispatchMessage(event);
|
||||
}
|
||||
if(this.hasParameter("popup")) {
|
||||
this.triggerPopup();
|
||||
this.triggerPopup(event);
|
||||
}
|
||||
event.preventDefault();
|
||||
return false;
|
||||
case "tw-cancel-popup":
|
||||
if(this.hasParameter("popup") && event.targetOfCancel !== this.domNode) {
|
||||
this.triggerPopup(event,true);
|
||||
}
|
||||
break;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
exports.executeMacro = function() {
|
||||
var attributes = {};
|
||||
var attributes = {"class": ["tw-popup-controller"]};
|
||||
if(this.hasParameter("class")) {
|
||||
attributes["class"] = this.params["class"].split(" ");
|
||||
$tw.utils.pushTop(attributes["class"],this.params["class"].split(" "));
|
||||
}
|
||||
if(this.classes) {
|
||||
$tw.utils.pushTop(attributes["class"],this.classes);
|
||||
|
@ -71,7 +71,7 @@ exports.executeMacro = function() {
|
||||
this.readState();
|
||||
var attributes = {
|
||||
"class": ["tw-reveal"],
|
||||
style: {position: "absolute"}
|
||||
style: {}
|
||||
};
|
||||
if(this.hasParameter("class")) {
|
||||
attributes["class"].push(this.params["class"]);
|
||||
@ -79,6 +79,12 @@ exports.executeMacro = function() {
|
||||
if(this.classes) {
|
||||
$tw.utils.pushTop(attributes["class"],this.classes);
|
||||
}
|
||||
switch(this.params.type) {
|
||||
case "popup":
|
||||
attributes.style.position = "absolute";
|
||||
attributes["class"].push("tw-popup");
|
||||
break;
|
||||
}
|
||||
attributes.style = {display: this.isOpen ? "block" : "none"};
|
||||
var child = $tw.Tree.Element("div",attributes,this.isOpen ? this.content : []);
|
||||
child.execute(this.parents,this.tiddlerTitle);
|
||||
@ -115,7 +121,7 @@ exports.refreshInDom = function(changes) {
|
||||
case "popup":
|
||||
if(this.isOpen) {
|
||||
this.child.domNode.style.position = "absolute";
|
||||
this.child.domNode.style.zIndex = "3000";
|
||||
this.child.domNode.style.zIndex = "1000";
|
||||
switch(this.params.position) {
|
||||
case "left":
|
||||
this.child.domNode.style.left = (this.popup.left - this.child.domNode.offsetWidth) + "px";
|
||||
|
@ -48,6 +48,28 @@ exports.startup = function() {
|
||||
$tw.Commander.initCommands();
|
||||
// Host-specific startup
|
||||
if($tw.browser) {
|
||||
// Install the popup zapper
|
||||
document.body.addEventListener("click",function(event) {
|
||||
// Is the click within a popup?
|
||||
var inPopup = false,
|
||||
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
|
||||
var template = "$:/templates/PageTemplate",
|
||||
renderer = $tw.wiki.parseTiddler(template);
|
||||
|
Loading…
Reference in New Issue
Block a user