Added reveal macro

core/modules/rendertree/renderers/widget.js

@@ -92,6 +92,10 @@ WidgetRenderer.prototype.renderInDom = function() {
 			$tw.utils.addEventListeners(this.domNode,this.widget.getEventListeners());
 		}
 	}
+	// Call the postRenderInDom hook if the widget has one
+	if(this.widget.postRenderInDom) {
+		this.widget.postRenderInDom();
+	}
 	// Return the dom node
 	return this.domNode;
 };
@@ -138,6 +142,22 @@ WidgetRenderer.prototype.checkContextRecursion = function(newRenderContext) {
 	return false;
 };
 
+WidgetRenderer.prototype.getContextScopeId = function() {
+	var guidBits = [],
+		context = this.renderContext;
+	while(context) {
+		$tw.utils.each(context,function(field,name) {
+			if(name !== "parentContext") {
+				guidBits.push(name + ":" + field + ";");
+			}
+		});
+		guidBits.push("-");
+		context = context.parentContext;
+	}
+	return $tw.utils.toBase64(guidBits.join(""));
+};
+
+
 exports.widget = WidgetRenderer
 
 })();

core/modules/startup.js

@@ -42,7 +42,6 @@ exports.startup = function() {
 		});
 		// Install the popup manager
 		$tw.popup = new $tw.utils.Popup({
-			wiki: $tw.wiki,
 			rootElement: document.body
 		});
 		// Install the modal message mechanism

core/modules/utils/dom/popup.js

@@ -14,64 +14,55 @@ Module that creates a $tw.utils.Popup object prototype that manages popups in th
 
 /*
 Creates a Popup object with these options:
-	wiki: the wiki to use for resolving tiddler titles
 	rootElement: the DOM element to which the popup zapper should be attached
 */
 var Popup = function(options) {
 	options = options || {};
-	this.wiki = options.wiki;
 	this.rootElement = options.rootElement || document.body;
-	this.popupTextRef = null;
 };
 
-Popup.prototype.popup = function(stateTextRef) {
+Popup.prototype.show = function(options) {
 	this.cancel();
-	this.popupTextRef = stateTextRef;
+	this.title = options.title;
-	this.rootElement.addEventListener("click",this,true);
+	this.wiki = options.wiki;
+	// this.rootElement.addEventListener("click",this,true);
 };
 
 Popup.prototype.handleEvent = function(event) {
 	if(event.type === "click") {
-		this.rootElement.removeEventListener("click",this,true);
 		this.cancel();
 	}
 };
 
 Popup.prototype.cancel = function() {
-	if(this.popupTextRef) {
+	// this.rootElement.removeEventListener("click",this,true);
-		this.wiki.deleteTextReference(this.popupTextRef);
+	if(this.title) {
-		this.popupTextRef = null;
+		this.wiki.deleteTiddler(this.title);
+		this.title = null;
 	}
 };
 
 /*
 Trigger a popup open or closed. Parameters are in a hashmap:
-	textRef: text reference where the popup details are stored
+	title: title of the tiddler where the popup details are stored
 	domNode: dom node to which the popup will be positioned
-	qualifyTiddlerTitles: "yes" if state tiddler titles are to be qualified
-	contextTiddlerTitle: title of tiddler providing context for text references
-	contextParents: parent stack
 	wiki: wiki
 */
 Popup.prototype.triggerPopup = function(options) {
-	// Get the textref of the popup state tiddler
-	var textRef = options.textRef;
-	if(options.qualifyTiddlerTitles === "yes") {
-		textRef = textRef + "(" + options.contextParents.join(",") + "," + options.contextTiddlerTitle + ")";
-	}
 	// Get the current popup state tiddler
-	var value = options.wiki.getTextReference(textRef,"",options.contextTiddlerTitle);
+	var value = options.wiki.getTextReference(options.title,"");
+console.log("Value is",value)
 	// 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)) {
 		this.cancel();
 	} else {
 		// Set the position if we're opening it
-		options.wiki.setTextReference(textRef,
+		this.cancel();
+		options.wiki.setTextReference(options.title,
 			"(" + options.domNode.offsetLeft + "," + options.domNode.offsetTop + "," + 
-				options.domNode.offsetWidth + "," + options.domNode.offsetHeight + ")",
+				options.domNode.offsetWidth + "," + options.domNode.offsetHeight + ")");
-			options.contextTiddlerTitle,true);
+		this.show(options);
-		this.popup(textRef);
 	}
 };
 

core/modules/utils/utils.js

@@ -24,6 +24,17 @@ exports.trim = function(str) {
 	}
 };
 
+/*
+Convert a string to base64 encoding
+*/
+exports.toBase64 = function(str) {
+	if($tw.browser) {
+		return window.btoa(str);
+	} else {
+		new Buffer(str).toString("base64");
+	}
+};
+
 /*
 Return the number of keys in an object
 */

core/modules/widgets/button.js

@@ -60,11 +60,13 @@ exports.dispatchMessage = function(event) {
 };
 
 exports.triggerPopup = function(event) {
+	var title = this.popup;
+	if(this.qualifyTiddlerTitles) {
+		title =  title + "-" + this.renderer.getContextScopeId();
+	}
 	$tw.popup.triggerPopup({
-		textRef: this.popup,
 		domNode: this.renderer.domNode,
-		qualifyTiddlerTitles: this.qualifyTiddlerTitles,
+		title: title,
-		renderContext: this.renderer.renderContext,
 		wiki: this.renderer.renderTree.wiki
 	});
 };

core/modules/widgets/popup.js

@@ -1,97 +0,0 @@
-/*\
-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/modules/widgets/reveal.js

@@ -0,0 +1,185 @@
+/*\
+title: $:/core/modules/widget/reveal.js
+type: application/javascript
+module-type: widget
+
+Implements the reveal widget.
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+exports.name = "reveal";
+
+exports.init = function(renderer) {
+	// Save state
+	this.renderer = renderer;
+	// Generate child nodes
+	this.generateChildNodes();
+};
+
+exports.generateChildNodes = function() {
+	// Get the parameters from the attributes
+	this.state = this.renderer.getAttribute("state");
+	this.type = this.renderer.getAttribute("type");
+	this.text = this.renderer.getAttribute("text");
+	this.position = this.renderer.getAttribute("position");
+	this["default"] = this.renderer.getAttribute("default");
+	this.qualifyTiddlerTitles = this.renderer.getAttribute("qualifyTiddlerTitles");
+	this["class"] = this.renderer.getAttribute("class");
+	// Compute the title of the state tiddler and read it
+	this.stateTitle = this.state;
+	if(this.qualifyTiddlerTitles) {
+		this.stateTitle =  this.stateTitle + "-" + this.renderer.getContextScopeId();
+	}
+	this.readState();
+	// Compose the node
+	var node = {
+		type: "element",
+		tag: "div",
+		children: this.renderer.parseTreeNode.children,
+		events: [{name: "click", handlerObject: this, handlerMethod: "handleClickEvent"}]
+	};
+	$tw.utils.addClassToParseTreeNode(node,"tw-reveal");
+	if(this["class"]) {
+		$tw.utils.addClassToParseTreeNode(node,this["class"].join(" "));
+	}
+	switch(this.type) {
+		case "popup":
+			$tw.utils.addStyleToParseTreeNode(node,"position","absolute");
+			$tw.utils.addClassToParseTreeNode(node,"tw-popup");
+			break;
+	}
+	$tw.utils.addStyleToParseTreeNode(node,"display",this.isOpen ? (this.isBlock ? "block" : "inline") : "none");
+	// Return the node
+	this.children = this.renderer.renderTree.createRenderers(this.renderer.renderContext,[node]);
+};
+
+/*
+Read the state tiddler
+*/
+exports.readState = function() {
+	// Start with the default value for being open or closed
+	if(this["default"]) {
+		this.isOpen = this["default"] === "open";
+	}
+	// Read the information from the state tiddler
+	if(this.stateTitle) {
+		var state = this.renderer.renderTree.wiki.getTextReference(this.stateTitle);
+		switch(this.type) {
+			case "popup":
+				this.readPopupState(state);
+				break;
+			case "match":
+				this.readMatchState(state);
+				break;
+			case "nomatch":
+				this.readMatchState(state);
+				this.isOpen = !this.isOpen;
+				break;
+		}
+	}
+};
+
+exports.readMatchState = function(state) {
+	this.isOpen = state === this.text;
+};
+
+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;
+	}
+};
+
+exports.handleClickEvent = function(event) {
+	if(event.type === "click" && this.type === "popup") {
+		// Cancel the popup if we get a click on it
+		if(this.stateTitle) {
+			this.renderer.renderTree.wiki.deleteTextReference(this.stateTitle);
+		}
+		event.preventDefault();
+		return false;
+	}
+	return true;
+};
+
+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.state || changedAttributes.type || changedAttributes.text || changedAttributes.position || changedAttributes["default"] || changedAttributes.qualifyTiddlerTitles || changedAttributes["class"] || (this.stateTitle && changedTiddlers[this.stateTitle])) {
+		// 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);
+			}
+		});
+	}
+	// Position the content if required
+	this.postRenderInDom();
+};
+
+exports.postRenderInDom = function() {
+	switch(this.type) {
+		case "popup":
+			if(this.isOpen) {
+				this.children[0].domNode.style.position = "absolute";
+				this.children[0].domNode.style.zIndex = "1000";
+				switch(this.position) {
+					case "left":
+						this.children[0].domNode.style.left = (this.popup.left - this.children[0].domNode.offsetWidth) + "px";
+						this.children[0].domNode.style.top = this.popup.top + "px";
+						break;
+					case "above":
+						this.children[0].domNode.style.left = this.popup.left + "px";
+						this.children[0].domNode.style.top = (this.popup.top - this.children[0].domNode.offsetHeight) + "px";
+						break;
+					case "aboveright":
+						this.children[0].domNode.style.left = (this.popup.left + this.popup.width) + "px";
+						this.children[0].domNode.style.top = (this.popup.top + this.popup.height - this.children[0].domNode.offsetHeight) + "px";
+						break;
+					case "right":
+						this.children[0].domNode.style.left = (this.popup.left + this.popup.width) + "px";
+						this.children[0].domNode.style.top = this.popup.top + "px";
+						break;
+					case "belowleft":
+						this.children[0].domNode.style.left = (this.popup.left + this.popup.width - this.children[0].domNode.offsetWidth) + "px";
+						this.children[0].domNode.style.top = (this.popup.top + this.popup.height) + "px";
+						break;
+					default: // Below
+						this.children[0].domNode.style.left = this.popup.left + "px";
+						this.children[0].domNode.style.top = (this.popup.top + this.popup.height) + "px";
+						break;
+				}
+			}
+			break;
+	}
+};
+
+})();

core/templates/TagTemplate.tid

@@ -1,9 +1,14 @@
 title: $:/templates/TagTemplate
 
-<$popup class="btn-invisible"><$handle>
+<$button popup="tagpopup" qualifyTiddlerTitles="yes" class="btn-invisible">@@.label <$view field="title" format="text" />@@</$button>
-@@.label <$view field="title" format="text" />@@
+<$reveal state="tagpopup" type="popup" position="below" qualifyTiddlerTitles="yes" ><div class="open">
-</$handle><$body>
-Some popup
-</$body>
-</$popup>
 
+@@.dropdown-menu
+
+* <$view field="title" format="link" />
+*.divider
+* <$list filter="[is[current]tagging[]]" ><li><$view field="title" format="link" /></li></$list>
+
+@@
+
+</div></$reveal>