tiddlywiki 5.3.8 → 5.4.0

package/core/modules/widgets/eventcatcher.js

@@ -24,7 +24,6 @@ EventWidget.prototype = new Widget();
 Render this widget into the DOM
 */
 EventWidget.prototype.render = function(parent,nextSibling) {
-	var self = this;
 	// Remember parent
 	this.parentDomNode = parent;
 	// Compute attributes and execute state
@@ -39,75 +38,12 @@ EventWidget.prototype.render = function(parent,nextSibling) {
 	this.domNode = domNode;
 	// Assign classes
 	this.assignDomNodeClasses();
-	// Add our event handler
-	$tw.utils.each(this.types,function(type) {
-		domNode.addEventListener(type,function(event) {
-			var selector = self.getAttribute("selector"),
-				matchSelector = self.getAttribute("matchSelector"),
-				actions = self.getAttribute("$"+type) || self.getAttribute("actions-"+type),
-				stopPropagation = self.getAttribute("stopPropagation","onaction"),
-				selectedNode = event.target,
-				selectedNodeRect,
-				catcherNodeRect,
-				variables = {};
-			// Firefox can fire dragover and dragenter events on text nodes instead of their parents
-			if(selectedNode.nodeType === 3) {
-				selectedNode = selectedNode.parentNode;
-			}
-			// Check that the selected node matches any matchSelector
-			if(matchSelector && !$tw.utils.domMatchesSelector(selectedNode,matchSelector)) {
-				return false;
-			}
-			if(selector) {
-				// Search ancestors for a node that matches the selector
-				while(!$tw.utils.domMatchesSelector(selectedNode,selector) && selectedNode !== domNode) {
-					selectedNode = selectedNode.parentNode;
-				}
-				// Exit if we didn't find one
-				if(selectedNode === domNode) {
-					return false;
-				}
-				// Only set up variables if we have actions to invoke
-				if(actions) {
-					variables = $tw.utils.collectDOMVariables(selectedNode,self.domNode,event);
-				}
-			}
-			// Execute our actions with the variables
-			if(actions) {
-				// Add a variable for the modifier key
-				variables.modifier = $tw.keyboardManager.getEventModifierKeyDescriptor(event);
-				// Add a variable for the mouse button
-				if("button" in event) {
-					if(event.button === 0) {
-						variables["event-mousebutton"] = "left";
-					} else if(event.button === 1) {
-						variables["event-mousebutton"] = "middle";
-					} else if(event.button === 2) {
-						variables["event-mousebutton"] = "right";
-					}
-				}
-				variables["event-type"] = event.type.toString();
-				if(typeof event.detail === "object" && !!event.detail) {
-					$tw.utils.each(event.detail,function(detailValue,detail) {
-						variables["event-detail-" + detail] = detailValue.toString();
-					});
-				} else if(!!event.detail) {
-					variables["event-detail"] = event.detail.toString();
-				}
-				self.invokeActionString(actions,self,event,variables);
-			}
-			if((actions && stopPropagation === "onaction") || stopPropagation === "always") {
-				event.preventDefault();
-				event.stopPropagation();
-				return true;
-			}
-			return false;
-		},false);
-	});
+	// Add our event handlers
+	this.toggleListeners();
 	// Insert element
 	parent.insertBefore(domNode,nextSibling);
-	this.renderChildren(domNode,null);
 	this.domNodes.push(domNode);
+	this.renderChildren(domNode,null);
 };
 
 /*
@@ -122,33 +58,256 @@ EventWidget.prototype.execute = function() {
 			self.types.push(key.slice(1));
 		}
 	});
-	if(!this.types.length) {
-		this.types = this.getAttribute("events","").split(" ");
-	}
+	this.pointerCaptureMode = this.getAttribute("pointerCapture","no");
 	this.elementTag = this.getAttribute("tag");
 	// Make child widgets
 	this.makeChildWidgets();
 };
 
+/*
+Cache and pre-create all event listeners, called when first needed
+*/
+EventWidget.prototype.cacheEventListeners = function() {
+	if(this._eventListeners) {
+		return;
+	}
+	this._eventListeners = Object.create(null);
+	this._captureActiveListeners = Object.create(null);
+	this._dynamicOnlyEvents = ["pointerup","pointercancel","pointermove"];
+
+	const clearPointerCapture = (event) => {
+		if(Number.isInteger(this._capturePointerId)) {
+			this.stopPointerCapture(this._capturePointerId);
+		}
+	};
+
+	const attachDynamicOnlyListeners = () => {
+		this._dynamicOnlyEvents.forEach((dt) => {
+			const listener = this._eventListeners[dt];
+			if(listener) {
+				this._captureActiveListeners[dt] = listener;
+				this.domNode.addEventListener(dt, listener, false);
+			}
+		});
+	};
+
+	// Dynamic pointer capture listeners
+	if(this.pointerCaptureMode === "dynamic") {
+		["pointerup","pointercancel"].forEach((type) => {
+			this._eventListeners[type] = (event) => {
+				const selectedNode = this.checkEvent(event, type);
+				if(selectedNode) {
+					clearPointerCapture(event);
+				}
+				// Remove dynamic-only listeners
+				this.cleanupDynamicListeners();
+				return this.handleEvent(event, type, selectedNode);
+			};
+		});
+		if(!this.types.includes("pointerdown")) {
+			this.types.push("pointerdown");
+		}
+	}
+
+	// Create any listeners not already defined above
+	this.types.forEach((type) => {
+		if(!this._eventListeners[type]) {
+			this._eventListeners[type] = (event) => {
+				const selectedNode = this.checkEvent(event, type);
+				if(!selectedNode) {
+					return false;
+				}
+				// Handle pointer capture for pointerdown
+				if(type === "pointerdown") {
+					if(this.pointerCaptureMode !== "no") {
+						this.startPointerCapture(event.pointerId, event.target);
+					}
+
+					if(this.pointerCaptureMode === "dynamic") {
+						attachDynamicOnlyListeners();
+					}
+				} else if(type === "pointerup" || type === "pointercancel") {
+					clearPointerCapture(event);
+				}
+				return this.handleEvent(event, type, selectedNode);
+			};
+		}
+	});
+};
+
+/*
+Check if an event qualifies and return the matching selected node
+*/
+EventWidget.prototype.checkEvent = function(event, type) {
+	const domNode = this.domNode;
+	let node = event.target;
+
+	// Use capture target if valid
+	if(this._captureTarget && event.pointerId !== undefined) {
+		if(document.contains(this._captureTarget)) {
+			node = this._captureTarget;
+		} else {
+			// Clear stale reference
+			this.stopPointerCapture(this._capturePointerId);
+			node = event.target;
+		}
+	}
+
+	if(node && node.nodeType === 3) {
+		node = node.parentNode;
+	}
+	if(!node || node.nodeType !== 1) {
+		return null;
+	}
+
+	const selector = this.getAttribute("selector"),
+		matchSelector = this.getAttribute("matchSelector");
+
+	if(matchSelector && !node.matches(matchSelector)) {
+		return null;
+	}
+	if(selector) {
+		const match = node.closest(selector);
+		if(!match || match === domNode || !domNode.contains(match)) {
+			return null;
+		}
+		return match;
+	}
+	return node;
+};
+
+/*
+Handle the event and execute actions
+*/
+EventWidget.prototype.handleEvent = function(event, type, selectedNode) {
+	if(!selectedNode) {
+		return false;
+	}
+	let actions = this.getAttribute("$"+type),
+		stopPropagation = this.getAttribute("stopPropagation","onaction");
+
+	if(actions) {
+		let variables = $tw.utils.extend(
+			{},
+			$tw.utils.collectDOMVariables(selectedNode, this.domNode, event),
+			{
+				"eventJSON": JSON.stringify($tw.utils.copyObjectPropertiesSafe(event)),
+				"modifier": $tw.keyboardManager.getEventModifierKeyDescriptor(event),
+				"event-type": event.type.toString()
+			}
+		);
+
+		if("button" in event) {
+			const mouseButtonMap = {0:"left",1:"middle",2:"right"};
+			variables["event-mousebutton"] = mouseButtonMap[event.button];
+		}
+		this.invokeActionString(actions, this, event, variables);
+	}
+
+	if((actions && stopPropagation === "onaction") || stopPropagation === "always") {
+		event.preventDefault();
+		event.stopPropagation();
+		return true;
+	}
+	return false;
+};
+
+EventWidget.prototype.startPointerCapture = function(pointerId, captureTarget) {
+	// Start capture only if none active; pointerId can be 0 
+	if(!Number.isInteger(this._capturePointerId) && this.domNode && this.domNode.setPointerCapture) {
+		this.domNode.setPointerCapture(pointerId);
+		this._capturePointerId = pointerId;
+		this._captureTarget = captureTarget;
+	}
+};
+
+EventWidget.prototype.stopPointerCapture = function(pointerId) {
+	if(this.domNode && this.domNode.hasPointerCapture && this.domNode.hasPointerCapture(pointerId)) {
+		this.domNode.releasePointerCapture(pointerId);
+	}
+	this._capturePointerId = undefined;
+	this._captureTarget = undefined;
+};
+
+/*
+Attach all relevant listeners
+*/
+EventWidget.prototype.attachListeners = function() {
+	this.cacheEventListeners();
+	const domNode = this.domNode;
+	Object.keys(this._eventListeners).forEach((type) => {
+		if(this.pointerCaptureMode === "dynamic" && this._dynamicOnlyEvents.includes(type)) {
+			return; //skip dynamic-only events
+		}
+		domNode.addEventListener(type, this._eventListeners[type], false);
+	});
+};
+
+/*
+Remove dynamic active listeners
+*/
+EventWidget.prototype.cleanupDynamicListeners = function() {
+	const domNode = this.domNode;
+	Object.keys(this._captureActiveListeners || {}).forEach((type) => {
+		domNode.removeEventListener(type, this._captureActiveListeners[type], false);
+	});
+	this._captureActiveListeners = Object.create(null);
+};
+
+/*
+Remove all listeners
+*/
+EventWidget.prototype.removeAllListeners = function() {
+	if(Number.isInteger(this._capturePointerId)) {
+		this.stopPointerCapture(this._capturePointerId);
+	}
+	const domNode = this.domNode;
+	Object.keys(this._eventListeners || {}).forEach((type) => {
+		domNode.removeEventListener(type, this._eventListeners[type], false);
+	});
+	this.cleanupDynamicListeners();
+	this._captureTarget = null;
+};
+
+/*
+Enable or disable listeners
+*/
+EventWidget.prototype.toggleListeners = function() {
+	let disabled = this.getAttribute("disabled","no") === "yes";
+	if(disabled) {
+		this.removeAllListeners();
+	} else {
+		this.attachListeners();
+	}
+};
+
+/*
+Assign DOM node classes
+*/
 EventWidget.prototype.assignDomNodeClasses = function() {
 	var classes = this.getAttribute("class","").split(" ");
 	classes.push("tc-eventcatcher");
-	this.domNode.className = classes.join(" ");
+	this.domNode.className = classes.join(" ").trim();
 };
 
 /*
-Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
+Refresh widget
 */
 EventWidget.prototype.refresh = function(changedTiddlers) {
-	var changedAttributes = this.computeAttributes(),
-		changedAttributesCount = $tw.utils.count(changedAttributes);
-	if(changedAttributesCount === 1 && changedAttributes["class"]) {
-		this.assignDomNodeClasses();
-	} else if(changedAttributesCount > 0) {
-		this.refreshSelf();
-		return true;
+	const changedAttributes = this.computeAttributes(),
+		changedKeys = Object.keys(changedAttributes),
+		canUpdateAttributes = changedKeys.every((key) => key === "class" || key === "disabled");
+	if(canUpdateAttributes) {
+		if(changedAttributes["class"]) {
+			this.assignDomNodeClasses();
+		}
+		if(changedAttributes["disabled"]) {
+			this.toggleListeners();
+		}
+		return this.refreshChildren(changedTiddlers);
 	}
-	return this.refreshChildren(changedTiddlers);
+	this.refreshSelf();
+	return true;
 };
 
 exports.eventcatcher = EventWidget;

package/core/modules/widgets/fields.js

@@ -56,7 +56,7 @@ FieldsWidget.prototype.execute = function() {
 	var text = [];
 	if(this.template && tiddler) {
 		var fields = [];
-		if (includeArr) { // Include takes precedence
+		if(includeArr) { // Include takes precedence
 			for(var i=0; i<includeArr.length; i++) {
 				if(tiddler.fields[includeArr[i]]) {
 					fields.push(includeArr[i]);
@@ -69,8 +69,8 @@ FieldsWidget.prototype.execute = function() {
 				}
 			}
 		}
-		if (this.sort) fields.sort();
-		if (this.sortReverse) fields.reverse();
+		if(this.sort) fields.sort();
+		if(this.sortReverse) fields.reverse();
 		for(var f=0, fmax=fields.length; f<fmax; f++) {
 			fieldName = fields[f];
 			var row = this.template,
@@ -99,8 +99,8 @@ FieldsWidget.prototype.refresh = function(changedTiddlers) {
 	if( changedAttributes.tiddler || changedAttributes.template || changedAttributes.exclude ||
 		changedAttributes.include || changedAttributes.sort || changedAttributes.sortReverse ||
 		changedTiddlers[this.tiddlerTitle] || changedAttributes.stripTitlePrefix) {
-			this.refreshSelf();
-			return true;
+		this.refreshSelf();
+		return true;
 	} else {
 		return false;
 	}

package/core/modules/widgets/genesis.js

@@ -25,7 +25,7 @@ GenesisWidget.prototype.computeAttributes = function(options) {
 	options.filterFn = function(name) {
 		// Only compute our own attributes which start with a single dollar
 		return name.charAt(0) === "$" && name.charAt(1) !== "$";
-	}
+	};
 	return Widget.prototype.computeAttributes.call(this,options);
 };
 

package/core/modules/widgets/image.js

@@ -45,7 +45,7 @@ ImageWidget.prototype.render = function(parent,nextSibling) {
 	this.execute();
 	// Create element
 	// Determine what type of image it is
-	var tag = "img", src = "",
+	var tag = "img", src = "", self = this,
 		tiddler = this.wiki.getTiddler(this.imageSource);
 	if(!tiddler) {
 		// The source isn't the title of a tiddler, so we'll assume it's a URL
@@ -62,10 +62,10 @@ ImageWidget.prototype.render = function(parent,nextSibling) {
 			if(text) {
 				// Render the appropriate element for the image type by looking up the encoding in the content type info
 				var encoding = typeInfo.encoding || "utf8";
-				if (encoding === "base64") {
+				if(encoding === "base64") {
 					// .pdf .png .jpg etc.
 					src = "data:" + deserializerType + ";base64," + text;
-					if (deserializerType === "application/pdf") {
+					if(deserializerType === "application/pdf") {
 						tag = "embed";
 					}
 				} else {
@@ -98,7 +98,7 @@ ImageWidget.prototype.render = function(parent,nextSibling) {
 		domNode.setAttribute("class",this.imageClass);
 	}
 	if(this.imageUsemap) {
-	    	domNode.setAttribute("usemap",this.imageUsemap);
+		domNode.setAttribute("usemap",this.imageUsemap);
 	}
 	if(this.imageWidth) {
 		domNode.setAttribute("width",this.imageWidth);
@@ -115,11 +115,21 @@ ImageWidget.prototype.render = function(parent,nextSibling) {
 	if(this.lazyLoading && tag === "img") {
 		domNode.setAttribute("loading",this.lazyLoading);
 	}
+	this.assignAttributes(domNode,{
+		sourcePrefix: "data-",
+		destPrefix: "data-"
+	});
 	// Add classes when the image loads or fails
 	$tw.utils.addClass(domNode,"tc-image-loading");
-	domNode.addEventListener("load",function() {
+	domNode.addEventListener("load",function(event) {
 		$tw.utils.removeClass(domNode,"tc-image-loading");
 		$tw.utils.addClass(domNode,"tc-image-loaded");
+		if(self.loadedActions) {
+			var variables = $tw.utils.collectDOMVariables(domNode,null,event);
+			variables["img-natural-width"] = domNode.naturalWidth.toString();
+			variables["img-natural-height"] = domNode.naturalHeight.toString();
+			self.invokeActionString(self.loadedActions,self,event,variables);		
+		}
 	},false);
 	domNode.addEventListener("error",function() {
 		$tw.utils.removeClass(domNode,"tc-image-loading");
@@ -139,21 +149,35 @@ ImageWidget.prototype.execute = function() {
 	this.imageWidth = this.getAttribute("width");
 	this.imageHeight = this.getAttribute("height");
 	this.imageClass = this.getAttribute("class");
-    	this.imageUsemap = this.getAttribute("usemap");
+	this.imageUsemap = this.getAttribute("usemap");
 	this.imageTooltip = this.getAttribute("tooltip");
 	this.imageAlt = this.getAttribute("alt");
 	this.lazyLoading = this.getAttribute("loading");
+	this.loadedActions = this.getAttribute("loadActions");
 };
 
 /*
 Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
 */
 ImageWidget.prototype.refresh = function(changedTiddlers) {
-	var changedAttributes = this.computeAttributes();
-	if(changedAttributes.source || changedAttributes.width || changedAttributes.height || changedAttributes["class"] || changedAttributes.usemap || changedAttributes.tooltip || changedTiddlers[this.imageSource]) {
+	var changedAttributes = this.computeAttributes(),
+		hasChangedAttributes = $tw.utils.count(changedAttributes) > 0;
+	if(changedAttributes.source || changedAttributes["class"] || changedAttributes.usemap || changedAttributes.tooltip || changedTiddlers[this.imageSource] ||changedAttributes.loadActions) {
 		this.refreshSelf();
 		return true;
-	} else {
+	} else if(hasChangedAttributes) {
+		this.assignAttributes(this.domNodes[0],{
+			sourcePrefix: "data-",
+			destPrefix: "data-"
+		});
+		if(changedAttributes.width) {
+			this.domNodes[0].setAttribute("width",this.getAttribute("width"));
+		}
+		if(changedAttributes.height) {
+			this.domNodes[0].setAttribute("height",this.getAttribute("height"));
+		}
+	}
+	else {
 		return false;
 	}
 };

package/core/modules/widgets/importvariables.js

@@ -49,7 +49,8 @@ ImportVariablesWidget.prototype.execute = function(tiddlerList) {
 		var parser = widgetPointer.wiki.parseTiddler(title,{parseAsInline:true, configTrimWhiteSpace:false});
 		if(parser) {
 			var parseTreeNode = parser.tree[0];
-			while(parseTreeNode && ["setvariable","set","parameters"].indexOf(parseTreeNode.type) !== -1) {
+			// process AST nodes generated by pragma rules.
+			while(parseTreeNode && ["setvariable","set","parameters","void"].indexOf(parseTreeNode.type) !== -1) {
 				var node = {
 					type: "set",
 					attributes: parseTreeNode.attributes,
@@ -82,7 +83,7 @@ ImportVariablesWidget.prototype.execute = function(tiddlerList) {
 						// this widget. If it needs to refresh,
 						// it'll do so along with the the whole
 						// importvariable tree.
-						if (widgetPointer != this) {
+						if(widgetPointer != this) {
 							widgetPointer.makeChildWidgets = function(){};
 						}
 						widgetPointer = widgetPointer.children[0];
@@ -93,7 +94,7 @@ ImportVariablesWidget.prototype.execute = function(tiddlerList) {
 		} 
 	});
 
-	if (widgetPointer != this) {
+	if(widgetPointer != this) {
 		widgetPointer.parseTreeNode.children = this.parseTreeNode.children;
 	} else {
 		widgetPointer.makeChildWidgets();

package/core/modules/widgets/jsontiddler.js

@@ -24,7 +24,6 @@ JSONTiddlerWidget.prototype = new Widget();
 Render this widget into the DOM
 */
 JSONTiddlerWidget.prototype.render = function(parent,nextSibling) {
-	var self = this;
 	this.parentDomNode = parent;
 	this.computeAttributes();
 	this.execute();

package/core/modules/widgets/keyboard.js

@@ -24,7 +24,6 @@ KeyboardWidget.prototype = new Widget();
 Render this widget into the DOM
 */
 KeyboardWidget.prototype.render = function(parent,nextSibling) {
-	var self = this;
 	// Remember parent
 	this.parentDomNode = parent;
 	// Compute attributes and execute state
@@ -45,12 +44,12 @@ KeyboardWidget.prototype.render = function(parent,nextSibling) {
 	]);
 	// Insert element
 	parent.insertBefore(domNode,nextSibling);
-	this.renderChildren(domNode,null);
 	this.domNodes.push(domNode);
+	this.renderChildren(domNode,null);
 };
 
 KeyboardWidget.prototype.handleChangeEvent = function(event) {
-	if ($tw.keyboardManager.handleKeydownEvent(event, {onlyPriority: true})) {
+	if($tw.keyboardManager.handleKeydownEvent(event, {onlyPriority: true})) {
 		return true;
 	}
 
@@ -59,10 +58,10 @@ KeyboardWidget.prototype.handleChangeEvent = function(event) {
 		var handled = this.invokeActions(this,event);
 		if(this.actions) {
 			var variables = {
-					"event-key": event.key,
-					"event-code": event.code,
-					"modifier": $tw.keyboardManager.getEventModifierKeyDescriptor(event)
-				};
+				"event-key": event.key,
+				"event-code": event.code,
+				"modifier": $tw.keyboardManager.getEventModifierKeyDescriptor(event)
+			};
 			if(keyInfo.keyDescriptor) {
 				variables["event-key-descriptor"] = keyInfo.keyDescriptor;
 			}
@@ -76,7 +75,7 @@ KeyboardWidget.prototype.handleChangeEvent = function(event) {
 		return true;
 	}
 	return false;
-}
+};
 
 KeyboardWidget.prototype.dispatchMessage = function(event) {
 	this.dispatchEvent({type: this.message, param: this.param, tiddlerTitle: this.getVariable("currentTiddler")});
@@ -110,7 +109,7 @@ KeyboardWidget.prototype.execute = function() {
 KeyboardWidget.prototype.assignDomNodeClasses = function() {
 	var classes = this.getAttribute("class","").split(" ");
 	classes.push("tc-keyboard");
-	this.domNode.className = classes.join(" ");
+	this.domNode.className = classes.join(" ").trim();
 };
 
 /*

package/core/modules/widgets/let.js

@@ -7,7 +7,6 @@ This widget allows defining multiple variables at once, while allowing
 the later variables to depend upon the earlier ones.
 
 ```
-\define helloworld() Hello world!
 <$let currentTiddler="target" value={{!!value}} currentTiddler="different">
   {{!!value}} will be different from <<value>>
 </$let>
@@ -46,7 +45,7 @@ LetWidget.prototype.computeAttributes = function() {
 		self = this;
 	this.currentValueFor = Object.create(null);
 	$tw.utils.each($tw.utils.getOrderedAttributesFromParseTreeNode(this.parseTreeNode),function(attribute) {
-		var value = self.computeAttribute(attribute),
+		var value = self.computeAttribute(attribute,{asList: true}),
 			name = attribute.name;
 		// Now that it's prepped, we're allowed to look this variable up
 		// when defining later variables
@@ -56,7 +55,7 @@ LetWidget.prototype.computeAttributes = function() {
 	});
 	// Run through again, setting variables and looking for differences
 	$tw.utils.each(this.currentValueFor,function(value,name) {
-		if (self.attributes[name] !== value) {
+		if(self.attributes[name] === undefined || !$tw.utils.isArrayEqual(self.attributes[name],value)) {
 			self.attributes[name] = value;
 			self.setVariable(name,value);
 			changedAttributes[name] = true;
@@ -68,9 +67,11 @@ LetWidget.prototype.computeAttributes = function() {
 LetWidget.prototype.getVariableInfo = function(name,options) {
 	// Special handling: If this variable exists in this very $let, we can
 	// use it, but only if it's been staged.
-	if ($tw.utils.hop(this.currentValueFor,name)) {
+	if($tw.utils.hop(this.currentValueFor,name)) {
+		var value = this.currentValueFor[name];
 		return {
-			text: this.currentValueFor[name]
+			text: value[0] || "",
+			resultList: value
 		};
 	}
 	return Widget.prototype.getVariableInfo.call(this,name,options);