mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2025-01-11 18:00:26 +00:00
Got the tag dropdowns working
They don't get dismissed correctly, though
This commit is contained in:
Jeremy Ruston
parent
a160fb07e4
commit
28fd037c47
@ -16,40 +16,48 @@ exports.info = {
|
||||
name: "button",
|
||||
params: {
|
||||
message: {byName: "default", type: "text"},
|
||||
toggle: {byName: true, type: "tiddler"},
|
||||
set: {byName: true, type: "tiddler"},
|
||||
on: {byName: true, type: "text"},
|
||||
off: {byName: true, type: "text"},
|
||||
popup: {byName: true, type: "tiddler"},
|
||||
qualifyTiddlerTitles: {byName: true, type: "text"},
|
||||
"class": {byName: true, type: "text"}
|
||||
},
|
||||
events: ["click"]
|
||||
};
|
||||
|
||||
exports.dispatchMessage = function(event) {
|
||||
var buttonEvent = document.createEvent("Event");
|
||||
buttonEvent.initEvent("tw-" + this.params.message,true,true);
|
||||
buttonEvent.tiddlerTitle = this.tiddlerTitle;
|
||||
event.target.dispatchEvent(buttonEvent);
|
||||
};
|
||||
|
||||
exports.triggerPopup = function(event) {
|
||||
// Get the title of the popup state tiddler
|
||||
var title = this.params.popup;
|
||||
if(this.hasParameter("qualifyTiddlerTitles") && this.params.qualifyTiddlerTitles === "yes") {
|
||||
title = "(" + this.parents.join(",") + "," + this.tiddlerTitle + ")" + title;
|
||||
}
|
||||
// Get the popup state tiddler and the the text value
|
||||
var tiddler = this.wiki.getTiddler(title),
|
||||
value = tiddler ? tiddler.fields.text : "";
|
||||
// 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)) {
|
||||
value = "";
|
||||
} else {
|
||||
// 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") {
|
||||
if(this.hasParameter("message")) {
|
||||
var buttonEvent = document.createEvent("Event");
|
||||
buttonEvent.initEvent("tw-" + this.params.message,true,true);
|
||||
buttonEvent.tiddlerTitle = this.tiddlerTitle;
|
||||
buttonEvent.commandOrigin = this;
|
||||
event.target.dispatchEvent(buttonEvent);
|
||||
this.dispatchMessage(event);
|
||||
}
|
||||
if(this.hasParameter("toggle")) {
|
||||
var title = this.params.toggle,
|
||||
on = this.params.on || "open",
|
||||
off = this.params.off || "closed";
|
||||
if(this.hasParameter("qualifyTiddlerTitles") && this.params.qualifyTiddlerTitles === "yes") {
|
||||
title = "(" + this.parents.join(",") + "," + this.tiddlerTitle + ")" + title;
|
||||
}
|
||||
var tiddler = this.wiki.getTiddler(title),
|
||||
value = tiddler ? tiddler.fields.text : undefined;
|
||||
if(value === this.params.on) {
|
||||
value = this.params.off;
|
||||
} else {
|
||||
value = this.params.on;
|
||||
}
|
||||
this.wiki.addTiddler(new $tw.Tiddler(tiddler,{title: title, text: value}));
|
||||
if(this.hasParameter("popup")) {
|
||||
this.triggerPopup();
|
||||
}
|
||||
event.preventDefault();
|
||||
return false;
|
||||
|
||||
@ -16,25 +16,51 @@ exports.info = {
|
||||
name: "reveal",
|
||||
params: {
|
||||
state: {byPos: 0, type: "tiddler"},
|
||||
type: {byName: true, type: "text"},
|
||||
position: {byName: true, type: "text"},
|
||||
qualifyTiddlerTitles: {byName: true, type: "text"},
|
||||
"default": {byName: true, type: "text"},
|
||||
on: {byName: true, type: "text"},
|
||||
"class": {byName: true, type: "text"}
|
||||
}
|
||||
};
|
||||
|
||||
exports.getOpenState = function() {
|
||||
exports.readState = function() {
|
||||
// Start with the default value for being open or closed
|
||||
if(this.hasParameter("default")) {
|
||||
this.isOpen = this.params["default"] === "open";
|
||||
}
|
||||
// Read the information from the state tiddler
|
||||
if(this.stateTitle) {
|
||||
var on = this.params.on || "open";
|
||||
var stateTiddler = this.wiki.getTiddler(this.stateTitle);
|
||||
if(stateTiddler) {
|
||||
return stateTiddler.fields.text.trim() === on;
|
||||
var state = stateTiddler ? stateTiddler.fields.text : "";
|
||||
switch(this.params.type) {
|
||||
case "popup":
|
||||
this.readPopupState(state);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if(this.hasParameter("default")) {
|
||||
return this.params["default"] === "open";
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
exports.executeMacro = function() {
|
||||
@ -42,9 +68,10 @@ exports.executeMacro = function() {
|
||||
if(this.hasParameter("qualifyTiddlerTitles")) {
|
||||
this.stateTitle = "(" + this.parents.join(",") + "," + this.tiddlerTitle + ")" + this.stateTitle;
|
||||
}
|
||||
this.isOpen = this.getOpenState();
|
||||
this.readState();
|
||||
var attributes = {
|
||||
"class": ["tw-reveal"]
|
||||
"class": ["tw-reveal"],
|
||||
style: {position: "absolute"}
|
||||
};
|
||||
if(this.hasParameter("class")) {
|
||||
attributes["class"].push(this.params["class"]);
|
||||
@ -63,7 +90,7 @@ exports.refreshInDom = function(changes) {
|
||||
t;
|
||||
// If the state tiddler has changed then reset the open state
|
||||
if($tw.utils.hop(changes,this.stateTitle)) {
|
||||
this.isOpen = this.getOpenState();
|
||||
this.readState();
|
||||
}
|
||||
// Render the children if we're open and we don't have any children yet
|
||||
if(this.isOpen && this.child.children.length === 0) {
|
||||
@ -75,14 +102,41 @@ exports.refreshInDom = function(changes) {
|
||||
}
|
||||
needChildrenRefresh = false; // Don't refresh the children if we've just created them
|
||||
}
|
||||
// Set the visibility of the children
|
||||
this.child.domNode.style.display = this.isOpen ? "block" : "none";
|
||||
// Refresh the children
|
||||
if(needChildrenRefresh) {
|
||||
for(t=0; t<this.child.children.length; t++) {
|
||||
this.child.children[t].refreshInDom(changes);
|
||||
}
|
||||
}
|
||||
// Set the visibility of the children
|
||||
this.child.domNode.style.display = this.isOpen ? "block" : "none";
|
||||
// Position the content if required
|
||||
switch(this.params.type) {
|
||||
case "popup":
|
||||
if(this.isOpen) {
|
||||
this.child.domNode.style.position = "absolute";
|
||||
this.child.domNode.style.zIndex = "3000";
|
||||
switch(this.params.position) {
|
||||
case "left":
|
||||
this.child.domNode.style.left = (this.popup.left - this.child.domNode.offsetWidth) + "px";
|
||||
this.child.domNode.style.top = this.popup.top + "px";
|
||||
break;
|
||||
case "above":
|
||||
this.child.domNode.style.left = this.popup.left + "px";
|
||||
this.child.domNode.style.top = (this.popup.top - this.child.domNode.offsetHeight) + "px";
|
||||
break;
|
||||
case "right":
|
||||
this.child.domNode.style.left = (this.popup.left + this.popup.width) + "px";
|
||||
this.child.domNode.style.top = this.popup.top + "px";
|
||||
break;
|
||||
default: // Below
|
||||
this.child.domNode.style.left = this.popup.left + "px";
|
||||
this.child.domNode.style.top = (this.popup.top + this.popup.height) + "px";
|
||||
break;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
@ -2,12 +2,12 @@ title: $:/templates/TagTemplate
|
||||
|
||||
{{label{
|
||||
<<color background:yes default:#888><
|
||||
<<button toggle:MyTiddler on:open off:closed qualifyTiddlerTitles:yes><
|
||||
<<button popup:MyTiddler qualifyTiddlerTitles:yes><
|
||||
<<view title>>
|
||||
>>
|
||||
>>
|
||||
}}}
|
||||
<<reveal state:MyTiddler qualifyTiddlerTitles:yes><
|
||||
<<reveal state:MyTiddler type:popup qualifyTiddlerTitles:yes><
|
||||
<div class="open">
|
||||
{{dropdown-menu{
|
||||
<<list tagging>>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user