Got the tag dropdowns working

They don't get dismissed correctly, though

core/modules/macros/button.js

@@ -16,40 +16,48 @@ exports.info = {
 	name: "button",
 	params: {
 		message: {byName: "default", type: "text"},
-		toggle: {byName: true, type: "tiddler"},
+		popup: {byName: true, type: "tiddler"},
-		set: {byName: true, type: "tiddler"},
-		on: {byName: true, type: "text"},
-		off: {byName: true, type: "text"},
 		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");
+			this.dispatchMessage(event);
-			buttonEvent.initEvent("tw-" + this.params.message,true,true);
-			buttonEvent.tiddlerTitle = this.tiddlerTitle;
-			buttonEvent.commandOrigin = this;
-			event.target.dispatchEvent(buttonEvent);
 		}
-		if(this.hasParameter("toggle")) {
+		if(this.hasParameter("popup")) {
-			var title = this.params.toggle,
+			this.triggerPopup();
-				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}));
 		}
 		event.preventDefault();
 		return false;

core/modules/macros/reveal.js

@@ -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;
+	}
 };
 
 })();

core/templates/TagTemplate.tid

@@ -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>>