tiddlywiki 5.1.23 → 5.2.2

package/core/modules/widgets/eventcatcher.js

@@ -37,50 +37,68 @@ EventWidget.prototype.render = function(parent,nextSibling) {
 	var tag = this.parseTreeNode.isBlock ? "div" : "span";
 	if(this.elementTag && $tw.config.htmlUnsafeElements.indexOf(this.elementTag) === -1) {
 		tag = this.elementTag;
-	}	
+	}
 	var domNode = this.document.createElement(tag);
 	this.domNode = domNode;
 	// Assign classes
-	this.assignDomNodeClasses();	
+	this.assignDomNodeClasses();
 	// Add our event handler
 	$tw.utils.each(this.types,function(type) {
 		domNode.addEventListener(type,function(event) {
 			var selector = self.getAttribute("selector"),
-				actions = self.getAttribute("actions-"+type),
+				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(!selectedNode.matches(selector) && selectedNode !== domNode) {
+				while(!$tw.utils.domMatchesSelector(selectedNode,selector) && selectedNode !== domNode) {
 					selectedNode = selectedNode.parentNode;
 				}
-				// If we found one, copy the attributes as variables, otherwise exit
-				if(selectedNode.matches(selector)) {
+				// Exit if we didn't find one
+				if(selectedNode === domNode) {
+					return false;
+				}
+				// Only set up variables if we have actions to invoke
+				if(actions) {
 					$tw.utils.each(selectedNode.attributes,function(attribute) {
 						variables["dom-" + attribute.name] = attribute.value.toString();
 					});
 					//Add a variable with a popup coordinate string for the selected node
 					variables["tv-popup-coords"] = "(" + selectedNode.offsetLeft + "," + selectedNode.offsetTop +"," + selectedNode.offsetWidth + "," + selectedNode.offsetHeight + ")";
-					
+
 					//Add variables for offset of selected node
 					variables["tv-selectednode-posx"] = selectedNode.offsetLeft.toString();
 					variables["tv-selectednode-posy"] = selectedNode.offsetTop.toString();
 					variables["tv-selectednode-width"] = selectedNode.offsetWidth.toString();
 					variables["tv-selectednode-height"] = selectedNode.offsetHeight.toString();
+					
+					if(event.clientX && event.clientY) {
+						//Add variables for event X and Y position relative to selected node
+						selectedNodeRect = selectedNode.getBoundingClientRect();
+						variables["event-fromselected-posx"] = (event.clientX - selectedNodeRect.left).toString();
+						variables["event-fromselected-posy"] = (event.clientY - selectedNodeRect.top).toString();
 
-					//Add variables for event X and Y position relative to selected node
-					selectedNodeRect = selectedNode.getBoundingClientRect();				
-					variables["event-fromselected-posx"] = (event.clientX - selectedNodeRect.left).toString();
-					variables["event-fromselected-posy"] = (event.clientY - selectedNodeRect.top).toString();
+						//Add variables for event X and Y position relative to event catcher node
+						catcherNodeRect = self.domNode.getBoundingClientRect();
+						variables["event-fromcatcher-posx"] = (event.clientX - catcherNodeRect.left).toString();
+						variables["event-fromcatcher-posy"] = (event.clientY - catcherNodeRect.top).toString();
 
-					//Add variables for event X and Y position relative to event catcher node
-					catcherNodeRect = self.domNode.getBoundingClientRect();
-					variables["event-fromcatcher-posx"] = (event.clientX - catcherNodeRect.left).toString();
-					variables["event-fromcatcher-posy"] = (event.clientY - catcherNodeRect.top).toString();
-				} else {
-					return false;
+						//Add variables for event X and Y position relative to the viewport
+						variables["event-fromviewport-posx"] = event.clientX.toString();
+						variables["event-fromviewport-posy"] = event.clientY.toString();
+					}
 				}
 			}
 			// Execute our actions with the variables
@@ -106,6 +124,8 @@ EventWidget.prototype.render = function(parent,nextSibling) {
 					variables["event-detail"] = event.detail.toString();
 				}
 				self.invokeActionString(actions,self,event,variables);
+			}
+			if((actions && stopPropagation === "onaction") || stopPropagation === "always") {
 				event.preventDefault();
 				event.stopPropagation();
 				return true;
@@ -125,7 +145,15 @@ Compute the internal state of the widget
 EventWidget.prototype.execute = function() {
 	var self = this;
 	// Get attributes that require a refresh on change
-	this.types = this.getAttribute("events","").split(" ");
+	this.types = [];
+	$tw.utils.each(this.attributes,function(value,key) {
+		if(key.charAt(0) === "$") {
+			self.types.push(key.slice(1));
+		}
+	});
+	if(!this.types.length) {
+		this.types = this.getAttribute("events","").split(" ");
+	}
 	this.elementTag = this.getAttribute("tag");
 	// Make child widgets
 	this.makeChildWidgets();
@@ -134,19 +162,20 @@ EventWidget.prototype.execute = function() {
 EventWidget.prototype.assignDomNodeClasses = function() {
 	var classes = this.getAttribute("class","").split(" ");
 	classes.push("tc-eventcatcher");
-	this.domNode.className = classes.join(" ");	
+	this.domNode.className = classes.join(" ");
 };
 
 /*
 Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
 */
 EventWidget.prototype.refresh = function(changedTiddlers) {
-	var changedAttributes = this.computeAttributes();
-	if(changedAttributes["events"] || changedAttributes["tag"]) {
+	var changedAttributes = this.computeAttributes(),
+		changedAttributesCount = $tw.utils.count(changedAttributes);
+	if(changedAttributesCount === 1 && changedAttributes["class"]) {
+		this.assignDomNodeClasses();
+	} else if(changedAttributesCount > 0) {
 		this.refreshSelf();
 		return true;
-	} else if(changedAttributes["class"]) {
-		this.assignDomNodeClasses();
 	}
 	return this.refreshChildren(changedTiddlers);
 };

package/core/modules/widgets/fieldmangler.js

@@ -16,12 +16,6 @@ var Widget = require("$:/core/modules/widgets/widget.js").widget;
 
 var FieldManglerWidget = function(parseTreeNode,options) {
 	this.initialise(parseTreeNode,options);
-	this.addEventListeners([
-		{type: "tm-remove-field", handler: "handleRemoveFieldEvent"},
-		{type: "tm-add-field", handler: "handleAddFieldEvent"},
-		{type: "tm-remove-tag", handler: "handleRemoveTagEvent"},
-		{type: "tm-add-tag", handler: "handleAddTagEvent"}
-	]);
 };
 
 /*
@@ -33,6 +27,12 @@ FieldManglerWidget.prototype = new Widget();
 Render this widget into the DOM
 */
 FieldManglerWidget.prototype.render = function(parent,nextSibling) {
+	this.addEventListeners([
+		{type: "tm-remove-field", handler: "handleRemoveFieldEvent"},
+		{type: "tm-add-field", handler: "handleAddFieldEvent"},
+		{type: "tm-remove-tag", handler: "handleRemoveTagEvent"},
+		{type: "tm-add-tag", handler: "handleAddTagEvent"}
+	]);
 	this.parentDomNode = parent;
 	this.computeAttributes();
 	this.execute();
@@ -58,7 +58,7 @@ FieldManglerWidget.prototype.refresh = function(changedTiddlers) {
 		this.refreshSelf();
 		return true;
 	} else {
-		return this.refreshChildren(changedTiddlers);		
+		return this.refreshChildren(changedTiddlers);
 	}
 };
 
@@ -67,32 +67,18 @@ FieldManglerWidget.prototype.handleRemoveFieldEvent = function(event) {
 		deletion = {};
 	deletion[event.param] = undefined;
 	this.wiki.addTiddler(new $tw.Tiddler(tiddler,deletion));
-	return true;
+	return false;
 };
 
 FieldManglerWidget.prototype.handleAddFieldEvent = function(event) {
 	var tiddler = this.wiki.getTiddler(this.mangleTitle),
 		addition = this.wiki.getModificationFields(),
-		hadInvalidFieldName = false,
 		addField = function(name,value) {
-			var trimmedName = name.toLowerCase().trim();
-			if(!$tw.utils.isValidFieldName(trimmedName)) {
-				if(!hadInvalidFieldName) {
-					alert($tw.language.getString(
-						"InvalidFieldName",
-						{variables:
-							{fieldName: trimmedName}
-						}
-					));
-					hadInvalidFieldName = true;
-					return;
-				}
-			} else {
-				if(!value && tiddler) {
-					value = tiddler.fields[trimmedName];
-				}
-				addition[trimmedName] = value || "";
+			var trimmedName = name.trim();
+			if(!value && tiddler) {
+				value = tiddler.fields[trimmedName];
 			}
+			addition[trimmedName] = value || "";
 			return;
 		};
 	addition.title = this.mangleTitle;
@@ -105,7 +91,7 @@ FieldManglerWidget.prototype.handleAddFieldEvent = function(event) {
 		}
 	}
 	this.wiki.addTiddler(new $tw.Tiddler(tiddler,addition));
-	return true;
+	return false;
 };
 
 FieldManglerWidget.prototype.handleRemoveTagEvent = function(event) {
@@ -122,7 +108,7 @@ FieldManglerWidget.prototype.handleRemoveTagEvent = function(event) {
 			this.wiki.addTiddler(new $tw.Tiddler(tiddler,modification));
 		}
 	}
-	return true;
+	return false;
 };
 
 FieldManglerWidget.prototype.handleAddTagEvent = function(event) {
@@ -133,14 +119,14 @@ FieldManglerWidget.prototype.handleAddTagEvent = function(event) {
 		if(tag !== "") {
 			modification.tags = (tiddler.fields.tags || []).slice(0);
 			$tw.utils.pushTop(modification.tags,tag);
-			this.wiki.addTiddler(new $tw.Tiddler(tiddler,modification));			
+			this.wiki.addTiddler(new $tw.Tiddler(tiddler,modification));
 		}
 	} else if(typeof event.param === "string" && event.param.trim() !== "" && this.mangleTitle.trim() !== "") {
 		var tag = [];
 		tag.push(event.param.trim());
 		this.wiki.addTiddler(new $tw.Tiddler({title: this.mangleTitle, tags: tag},modification));
 	}
-	return true;
+	return false;
 };
 
 exports.fieldmangler = FieldManglerWidget;

package/core/modules/widgets/image.js

@@ -86,7 +86,7 @@ ImageWidget.prototype.render = function(parent,nextSibling) {
 					default:
 						src = _canonical_uri;
 						break;
-				}	
+				}
 			} else {
 				// Just trigger loading of the tiddler
 				this.wiki.getTiddlerText(this.imageSource);
@@ -97,7 +97,7 @@ ImageWidget.prototype.render = function(parent,nextSibling) {
 	var domNode = this.document.createElement(tag);
 	domNode.setAttribute("src",src);
 	if(this.imageClass) {
-		domNode.setAttribute("class",this.imageClass);		
+		domNode.setAttribute("class",this.imageClass);
 	}
 	if(this.imageWidth) {
 		domNode.setAttribute("width",this.imageWidth);
@@ -106,11 +106,21 @@ ImageWidget.prototype.render = function(parent,nextSibling) {
 		domNode.setAttribute("height",this.imageHeight);
 	}
 	if(this.imageTooltip) {
-		domNode.setAttribute("title",this.imageTooltip);		
+		domNode.setAttribute("title",this.imageTooltip);
 	}
 	if(this.imageAlt) {
-		domNode.setAttribute("alt",this.imageAlt);		
+		domNode.setAttribute("alt",this.imageAlt);
 	}
+	// Add classes when the image loads or fails
+	$tw.utils.addClass(domNode,"tc-image-loading");
+	domNode.addEventListener("load",function() {
+		$tw.utils.removeClass(domNode,"tc-image-loading");
+		$tw.utils.addClass(domNode,"tc-image-loaded");
+	},false);
+	domNode.addEventListener("error",function() {
+		$tw.utils.removeClass(domNode,"tc-image-loading");
+		$tw.utils.addClass(domNode,"tc-image-error");
+	},false);
 	// Insert element
 	parent.insertBefore(domNode,nextSibling);
 	this.domNodes.push(domNode);
@@ -138,7 +148,7 @@ ImageWidget.prototype.refresh = function(changedTiddlers) {
 		this.refreshSelf();
 		return true;
 	} else {
-		return false;		
+		return false;
 	}
 };
 

package/core/modules/widgets/importvariables.js

@@ -46,7 +46,7 @@ ImportVariablesWidget.prototype.execute = function(tiddlerList) {
 	this.tiddlerList = tiddlerList || this.wiki.filterTiddlers(this.filter,this);
 	// Accumulate the <$set> widgets from each tiddler
 	$tw.utils.each(this.tiddlerList,function(title) {
-		var parser = widgetPointer.wiki.parseTiddler(title);
+		var parser = widgetPointer.wiki.parseTiddler(title,{parseAsInline:true});
 		if(parser) {
 			var parseTreeNode = parser.tree[0];
 			while(parseTreeNode && parseTreeNode.type === "set") {
@@ -118,7 +118,7 @@ ImportVariablesWidget.prototype.refresh = function(changedTiddlers) {
 		this.renderChildren(this.parentDomNode,this.findNextSiblingDomNode());
 		return true;
 	} else {
-		return this.refreshChildren(changedTiddlers);		
+		return this.refreshChildren(changedTiddlers);
 	}
 };
 

package/core/modules/widgets/jsontiddler.js

@@ -0,0 +1,91 @@
+/*\
+title: $:/core/modules/widgets/jsontiddler.js
+type: application/javascript
+module-type: widget
+
+Render a tiddler as JSON text
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+var Widget = require("$:/core/modules/widgets/widget.js").widget;
+
+var JSONTiddlerWidget = function(parseTreeNode,options) {
+	this.initialise(parseTreeNode,options);
+};
+
+/*
+Inherit from the base widget class
+*/
+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();
+	// Collect the fields from the optional base tiddler
+	var fields = this.getTiddlerFields();
+	// Add custom fields specified in attributes starting with $
+	$tw.utils.each(this.attributes,function(attribute,name) {
+		if(name.charAt(0) === "$") {
+			fields[name.slice(1)] = attribute;
+		}
+	});
+	// JSONify
+	var json = JSON.stringify(fields);
+	// Escape unsafe script characters
+	if(this.attEscapeUnsafeScriptChars) {
+		json = json.replace(/</g,"\\u003C");
+	}
+	// Update the DOM
+	var textNode = this.document.createTextNode(json);
+	parent.insertBefore(textNode,nextSibling);
+	this.domNodes.push(textNode);
+};
+
+/*
+Compute the internal state of the widget
+*/
+JSONTiddlerWidget.prototype.execute = function() {
+	this.attTiddler = this.getAttribute("tiddler");
+	this.attExclude = this.getAttribute("exclude","");
+	this.attEscapeUnsafeScriptChars = this.getAttribute("escapeUnsafeScriptChars","no") === "yes";
+};
+
+/*
+Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
+*/
+JSONTiddlerWidget.prototype.refresh = function(changedTiddlers) {
+	var changedAttributes = this.computeAttributes();
+	if($tw.utils.count(changedAttributes) > 0 || (this.attTiddler && changedTiddlers[this.attTiddler])) {
+		this.refreshSelf();
+		return true;
+	} else {
+		return false;
+	}
+};
+
+JSONTiddlerWidget.prototype.getTiddlerFields = function() {
+	var fields = {};
+	if(this.attTiddler) {
+		var tiddler = this.wiki.getTiddler(this.attTiddler);
+		if(tiddler) {
+			fields = tiddler.getFieldStrings({exclude: this.attExclude.split(" ")});
+		} else {
+			fields = {title: this.attTiddler};
+		}
+	}
+	return fields;
+};
+
+exports.jsontiddler = JSONTiddlerWidget;
+
+})();

package/core/modules/widgets/keyboard.js

@@ -40,31 +40,43 @@ KeyboardWidget.prototype.render = function(parent,nextSibling) {
 	// Create element
 	var domNode = this.document.createElement(tag);
 	// Assign classes
-	var classes = (this["class"] || "").split(" ");
-	classes.push("tc-keyboard");
-	domNode.className = classes.join(" ");
+	this.domNode = domNode;
+	this.assignDomNodeClasses();
 	// Add a keyboard event handler
-	domNode.addEventListener("keydown",function (event) {
-		if($tw.keyboardManager.checkKeyDescriptors(event,self.keyInfoArray)) {
-			var handled = self.invokeActions(self,event);
-			if(self.actions) {
-				self.invokeActionString(self.actions,self,event);
-			}
-			self.dispatchMessage(event);
-			if(handled || self.actions || self.message) {
-				event.preventDefault();
-				event.stopPropagation();
-			}
-			return true;
-		}
-		return false;
-	},false);
+	$tw.utils.addEventListeners(domNode,[
+		{name: "keydown", handlerObject: this, handlerMethod: "handleChangeEvent"}
+	]);
 	// Insert element
 	parent.insertBefore(domNode,nextSibling);
 	this.renderChildren(domNode,null);
 	this.domNodes.push(domNode);
 };
 
+KeyboardWidget.prototype.handleChangeEvent = function(event) {
+	var keyInfo = $tw.keyboardManager.getMatchingKeyDescriptor(event,this.keyInfoArray);
+	if(keyInfo) {
+		var handled = this.invokeActions(this,event);
+		if(this.actions) {
+			var variables = {
+					"event-key": event.key,
+					"event-code": event.code,
+					"modifier": $tw.keyboardManager.getEventModifierKeyDescriptor(event)
+				};
+			if(keyInfo.keyDescriptor) {
+				variables["event-key-descriptor"] = keyInfo.keyDescriptor;
+			}
+			this.invokeActionString(this.actions,this,event,variables);
+		}
+		this.dispatchMessage(event);
+		if(handled || this.actions || this.message) {
+			event.preventDefault();
+			event.stopPropagation();
+		}
+		return true;
+	}
+	return false;
+}
+
 KeyboardWidget.prototype.dispatchMessage = function(event) {
 	this.dispatchEvent({type: this.message, param: this.param, tiddlerTitle: this.getVariable("currentTiddler")});
 };
@@ -81,7 +93,6 @@ KeyboardWidget.prototype.execute = function() {
 	this.key = this.getAttribute("key","");
 	this.tag = this.getAttribute("tag","");
 	this.keyInfoArray = $tw.keyboardManager.parseKeyDescriptors(this.key);
-	this["class"] = this.getAttribute("class","");
 	if(this.key.substr(0,2) === "((" && this.key.substr(-2,2) === "))") {
 		this.shortcutTiddlers = [];
 		var name = this.key.substring(2,this.key.length -2);
@@ -93,14 +104,22 @@ KeyboardWidget.prototype.execute = function() {
 	this.makeChildWidgets();
 };
 
+KeyboardWidget.prototype.assignDomNodeClasses = function() {
+	var classes = this.getAttribute("class","").split(" ");
+	classes.push("tc-keyboard");
+	this.domNode.className = classes.join(" ");
+};
+
 /*
 Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
 */
 KeyboardWidget.prototype.refresh = function(changedTiddlers) {
 	var changedAttributes = this.computeAttributes();
-	if(changedAttributes.message || changedAttributes.param || changedAttributes.key || changedAttributes["class"] || changedAttributes.tag) {
+	if(changedAttributes.message || changedAttributes.param || changedAttributes.key || changedAttributes.tag) {
 		this.refreshSelf();
 		return true;
+	} else if(changedAttributes["class"]) {
+		this.assignDomNodeClasses();
 	}
 	// Update the keyInfoArray if one of its shortcut-config-tiddlers has changed
 	if(this.shortcutTiddlers && $tw.utils.hopArray(changedTiddlers,this.shortcutTiddlers)) {

package/core/modules/widgets/let.js

@@ -0,0 +1,96 @@
+/*\
+title: $:/core/modules/widgets/let.js
+type: application/javascript
+module-type: widget
+
+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>
+```
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+var Widget = require("$:/core/modules/widgets/widget.js").widget;
+
+var LetWidget = function(parseTreeNode,options) {
+	// Initialise
+	this.initialise(parseTreeNode,options);
+};
+
+/*
+Inherit from the base widget class
+*/
+LetWidget.prototype = new Widget();
+
+/*
+Render this widget into the DOM
+*/
+LetWidget.prototype.render = function(parent,nextSibling) {
+	this.parentDomNode = parent;
+	this.computeAttributes();
+	this.execute();
+	this.renderChildren(parent,nextSibling);
+};
+
+LetWidget.prototype.computeAttributes = function() {
+	// Before computing attributes, we must make clear that none of the
+	// existing attributes are staged for lookup, even on a refresh
+	var changedAttributes = {},
+		self = this;
+	this.currentValueFor = Object.create(null);
+	$tw.utils.each(this.parseTreeNode.orderedAttributes,function(attribute,index) {
+		var value = self.computeAttribute(attribute),
+			name = attribute.name;
+		if(name.charAt(0) !== "$") {
+			// Now that it's prepped, we're allowed to look this variable up
+			// when defining later variables
+			self.currentValueFor[name] = value;
+		}
+	});
+	// Run through again, setting variables and looking for differences
+	$tw.utils.each(this.currentValueFor,function(value,name) {
+		if (self.attributes[name] !== value) {
+			self.attributes[name] = value;
+			self.setVariable(name,value);
+			changedAttributes[name] = true;
+		}
+	});
+	return changedAttributes;
+};
+
+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)) {
+		return {
+			text: this.currentValueFor[name]
+		};
+	}
+	return Widget.prototype.getVariableInfo.call(this,name,options);
+};
+
+/*
+Refresh the widget by ensuring our attributes are up to date
+*/
+LetWidget.prototype.refresh = function(changedTiddlers) {
+	var changedAttributes = this.computeAttributes();
+	if($tw.utils.count(changedAttributes) > 0) {
+		this.refreshSelf();
+		return true;
+	}
+	return this.refreshChildren(changedTiddlers);
+};
+
+exports["let"] = LetWidget;
+
+})();

package/core/modules/widgets/link.js

@@ -77,7 +77,7 @@ LinkWidget.prototype.renderLink = function(parent,nextSibling) {
 			}
 		}
 		if(this.linkClasses) {
-			classes.push(this.linkClasses);			
+			classes.push(this.linkClasses);
 		}
 	} else if(this.overrideClasses !== "") {
 		classes.push(this.overrideClasses)
@@ -154,6 +154,12 @@ LinkWidget.prototype.handleClickEvent = function(event) {
 		navigateFromNode: this,
 		navigateFromClientRect: { top: bounds.top, left: bounds.left, width: bounds.width, right: bounds.right, bottom: bounds.bottom, height: bounds.height
 		},
+		navigateFromClientTop: bounds.top,
+		navigateFromClientLeft: bounds.left,
+		navigateFromClientWidth: bounds.width,
+		navigateFromClientRight: bounds.right,
+		navigateFromClientBottom: bounds.bottom,
+		navigateFromClientHeight: bounds.height,
 		navigateSuppressNavigation: event.metaKey || event.ctrlKey || (event.button === 1),
 		metaKey: event.metaKey,
 		ctrlKey: event.ctrlKey,
@@ -201,7 +207,8 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
 */
 LinkWidget.prototype.refresh = function(changedTiddlers) {
 	var changedAttributes = this.computeAttributes();
-	if(changedAttributes.to || changedTiddlers[this.to] || changedAttributes["aria-label"] || changedAttributes.tooltip) {
+	if(changedAttributes.to || changedTiddlers[this.to] || changedAttributes["aria-label"] || changedAttributes.tooltip ||
+		changedAttributes["class"] || changedAttributes.tabindex || changedAttributes.draggable || changedAttributes.tag) {
 		this.refreshSelf();
 		return true;
 	}

package/core/modules/widgets/linkcatcher.js

@@ -16,9 +16,6 @@ var Widget = require("$:/core/modules/widgets/widget.js").widget;
 
 var LinkCatcherWidget = function(parseTreeNode,options) {
 	this.initialise(parseTreeNode,options);
-	this.addEventListeners([
-		{type: "tm-navigate", handler: "handleNavigateEvent"}
-	]);
 };
 
 /*
@@ -30,6 +27,9 @@ LinkCatcherWidget.prototype = new Widget();
 Render this widget into the DOM
 */
 LinkCatcherWidget.prototype.render = function(parent,nextSibling) {
+	this.addEventListeners([
+		{type: "tm-navigate", handler: "handleNavigateEvent"}
+	]);
 	this.parentDomNode = parent;
 	this.computeAttributes();
 	this.execute();
@@ -61,7 +61,7 @@ LinkCatcherWidget.prototype.refresh = function(changedTiddlers) {
 		this.refreshSelf();
 		return true;
 	} else {
-		return this.refreshChildren(changedTiddlers);		
+		return this.refreshChildren(changedTiddlers);
 	}
 };