Added beginnings of popup widget

core/modules/utils/parsetree.js

@@ -46,4 +46,13 @@ exports.addStyleToParseTreeNode = function(node,name,value) {
 	}
 };
 
+exports.findParseTreeNode = function(nodeArray,search) {
+	for(var t=0; t<nodeArray.length; t++) {
+		if(nodeArray[t].type === search.type && nodeArray[t].tag === search.tag) {
+			return nodeArray[t];
+		}
+	}
+	return undefined;
+};
+
 })();

core/modules/widgets/popup.js

@@ -0,0 +1,97 @@
+/*\
+title: $:/core/modules/widget/popup.js
+type: application/javascript
+module-type: widget
+
+Implements the popup widget.
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+exports.name = "popup";
+
+exports.init = function(renderer) {
+	// Save state
+	this.renderer = renderer;
+	// Generate child nodes
+	this.generateChildNodes();
+};
+
+exports.generateChildNodes = function() {
+	// Get the parameters from the attributes
+	this.hover = this.renderer.getAttribute("hover");
+	this["class"] = this.renderer.getAttribute("class");
+	// Find the handle and body in the parse tree children
+	var handle = $tw.utils.findParseTreeNode(this.renderer.parseTreeNode.children,{type: "widget", tag: "handle"}),
+		body = $tw.utils.findParseTreeNode(this.renderer.parseTreeNode.children,{type: "widget", tag: "body"});
+	// Compose the elements
+	var classes = ["tw-popup-wrapper"];
+	if(this["class"]) {
+		$tw.utils.pushTop(classes,this["class"]);
+	}
+	var events = [{name: "click", handlerObject: this, handlerMethod: "handleClickEvent"}];
+	if(this.hover === "yes") {
+		events.push({name: "mouseover", handlerObject: this, handlerMethod: "handleMouseOverOrOutEvent"});
+		events.push({name: "mouseout", handlerObject: this, handlerMethod: "handleMouseOverOrOutEvent"});
+	}
+	this.children = this.renderer.renderTree.createRenderers(this.renderer.renderContext,[
+	{
+		type: "element",
+		tag: "button",
+		attributes: {
+			"class": {type: "string", value: classes.join(" ")}
+		},
+		children: handle.children,
+		events: events
+	},
+	{
+		type: "element",
+		tag: "div",
+		children: body.children,
+		attributes: {
+			style: {
+				type: "string",
+				value: "display:none;"
+			}
+		}
+	}
+	]);
+};
+
+exports.triggerPopup = function(event) {
+};
+
+exports.handleClickEvent = function(event) {
+	this.triggerPopup(event);
+	event.preventDefault();
+	return false;
+};
+
+exports.refreshInDom = function(changedAttributes,changedTiddlers) {
+	// Check if any of our attributes have changed, or if a tiddler we're interested in has changed
+ 	if(changedAttributes.hover || changedAttributes["class"] ) {
+		// Remove old child nodes
+		$tw.utils.removeChildren(this.parentElement);
+		// Regenerate and render children
+		this.generateChildNodes();
+		var self = this;
+		$tw.utils.each(this.children,function(node) {
+			if(node.renderInDom) {
+				self.parentElement.appendChild(node.renderInDom());
+			}
+		});
+	} else {
+		// We don't need to refresh ourselves, so just refresh any child nodes
+		$tw.utils.each(this.children,function(node) {
+			if(node.refreshInDom) {
+				node.refreshInDom(changedTiddlers);
+			}
+		});
+	}
+};
+
+})();

core/templates/TagTemplate.tid

@@ -1,5 +1,9 @@
 title: $:/templates/TagTemplate
 
-@@.label
+<$popup class="btn-invisible"><$handle>
-<$view field="title" format="text" />
+@@.label <$view field="title" format="text" />@@
-@@
+</$handle><$body>
+Some popup
+</$body>
+</$popup>
+