Added hover functionality to button and link macros

core/modules/macros/button.js

@@ -20,6 +20,7 @@ exports.info = {
 		set: {byName: true, type: "tiddler"},
 		setTo: {byName: true, type: "text"},
 		popup: {byName: true, type: "tiddler"},
+		hover: {byName: true, type: "text"},
 		qualifyTiddlerTitles: {byName: true, type: "text"},
 		"class": {byName: true, type: "text"}
 	}
@@ -34,25 +35,14 @@ exports.dispatchMessage = function(event) {
 };
 
 exports.triggerPopup = function(event) {
-	// Get the textref of the popup state tiddler
+	$tw.popup.triggerPopup({
-	var textRef = this.params.popup;
+		textRef: this.params.popup,
-	if(this.hasParameter("qualifyTiddlerTitles") && this.params.qualifyTiddlerTitles === "yes") {
+		domNode: this.child.domNode,
-		textRef = "(" + this.parents.join(",") + "," + this.tiddlerTitle + ")" + textRef;
+		qualifyTiddlerTitles: this.params.qualifyTiddlerTitles,
-	}
+		contextTiddlerTitle: this.tiddlerTitle,
-	// Get the current popup state tiddler 
+		contextParents: this.parents,
-	var value = this.wiki.getTextReference(textRef,"",this.tiddlerTitle);
+		wiki: this.wiki
-	// 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)) {
-		$tw.popup.cancel();
-	} else {
-		// Set the position if we're opening it
-		this.wiki.setTextReference(textRef,
-			"(" + this.child.domNode.offsetLeft + "," + this.child.domNode.offsetTop + "," + 
-				this.child.domNode.offsetWidth + "," + this.child.domNode.offsetHeight + ")",
-			this.tiddlerTitle,true);
-		$tw.popup.popup(textRef);
-	}
 };
 
 exports.setTiddler = function() {
@@ -76,6 +66,13 @@ exports.handleEvent = function(event) {
 		event.preventDefault();
 		return false;
 	}
+	if(event.type === "mouseover" || event.type === "mouseout") {
+		if(this.hasParameter("popup")) {
+			this.triggerPopup(event);
+		}
+		event.preventDefault();
+		return false;
+	}
 	return true;
 };
 
@@ -90,8 +87,12 @@ exports.executeMacro = function() {
 	for(var t=0; t<this.content.length; t++) {
 		this.content[t].execute(this.parents,this.tiddlerTitle);
 	}
+	var events = ["click"];
+	if(this.hasParameter("hover") && this.params.hover === "yes") {
+		events.push("mouseover","mouseout");
+	}
 	return $tw.Tree.Element("button",attributes,this.content,{
-		events: ["click"],
+		events: events,
 		eventHandler: this
 	});
 };

core/modules/macros/link.js

@@ -22,7 +22,9 @@ exports.info = {
 	params: {
 		to: {byName: "default", type: "tiddler", skinny: true},
 		throughField: {byname: true, type: "text"},
-		space: {byName: true, type: "text"}
+		space: {byName: true, type: "text"},
+		qualifyHoverTitle: {byName: true, type: "text"},
+		hover: {byName: true, type: "tiddler"}
 	}
 };
 
@@ -42,6 +44,20 @@ exports.handleEvent = function (event) {
 			return false;
 		}
 	}
+	if(event.type === "mouseover" || event.type === "mouseout") {
+		if(this.hasParameter("hover")) {
+			$tw.popup.triggerPopup({
+				textRef: this.params.hover,
+				domNode: this.child.domNode,
+				qualifyTiddlerTitles: this.params.qualifyHoverTitle,
+				contextTiddlerTitle: this.tiddlerTitle,
+				contextParents: this.parents,
+				wiki: this.wiki
+			});
+		}
+		event.preventDefault();
+		return false;
+	}
 };
 
 exports.executeMacro = function() {
@@ -84,11 +100,15 @@ exports.executeMacro = function() {
 		$tw.utils.pushTop(this.linkInfo.attributes["class"],this.classes);
 	}
 	// Create the link
+	var events = ["click"];
+	if(this.hasParameter("hover")) {
+		events.push("mouseover","mouseout");
+	}
 	var child;
 	if(this.linkInfo.suppressLink) {
 		child = $tw.Tree.Element("span",{},this.content);
 	} else { 
-		child = $tw.Tree.Element("a",this.linkInfo.attributes,this.content,{events: ["click"], eventHandler: this});
+		child = $tw.Tree.Element("a",this.linkInfo.attributes,this.content,{events: events, eventHandler: this});
 	}
 	child.execute(this.parents,this.tiddlerTitle);
 	return child;