Apply more generic implementation to multiplate widgets

core/modules/widgets/browse.js

@@ -70,6 +70,8 @@ BrowseWidget.prototype.render = function(parent,nextSibling) {
 		}
 		return false;
 	},false);
+	// Assign data- attributes
+	this.updateDomNodeDataAttributes(null,domNode);
 	// Insert element
 	parent.insertBefore(domNode,nextSibling);
 	this.renderChildren(domNode,null);
@@ -95,6 +97,11 @@ BrowseWidget.prototype.execute = function() {
 Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
 */
 BrowseWidget.prototype.refresh = function(changedTiddlers) {
+	var changedAttributes = this.computeAttributes();
+	if($tw.utils.count(changedAttributes) > 0) {
+		this.refreshSelf();
+		return true;	
+	}
 	return false;
 };
 

core/modules/widgets/button.js

@@ -254,19 +254,6 @@ ButtonWidget.prototype.updateDomNodeClasses = function() {
 	this.domNode.className = domNodeClasses.join(" ");
 };
 
-ButtonWidget.prototype.updateDomNodeDataAttributes = function(changedAttributes,domNode) {
-	var self = this;
-	changedAttributes = changedAttributes || this.attributes;
-	domNode = domNode || this.domNode;
-	var DATA_ATTRIBUTE_PREFIX = "data-";
-	$tw.utils.each(changedAttributes,function(value,name) {
-		value = self.getAttribute(name);
-		if(name.substr(0,DATA_ATTRIBUTE_PREFIX.length) === DATA_ATTRIBUTE_PREFIX) {
-			domNode.setAttribute(name,value);
-		}
-	});
-};
-
 /*
 Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
 */

core/modules/widgets/checkbox.js

@@ -53,6 +53,8 @@ CheckboxWidget.prototype.render = function(parent,nextSibling) {
 	this.labelDomNode.appendChild(this.inputDomNode);
 	this.spanDomNode = this.document.createElement("span");
 	this.labelDomNode.appendChild(this.spanDomNode);
+	// Assign data- attributes
+	this.updateDomNodeDataAttributes(null,this.inputDomNode);
 	// Add a click event handler
 	$tw.utils.addEventListeners(this.inputDomNode,[
 		{name: "change", handlerObject: this, handlerMethod: "handleChangeEvent"}

core/modules/widgets/link.js

@@ -43,6 +43,8 @@ LinkWidget.prototype.render = function(parent,nextSibling) {
 	} else {
 		// Just insert the link text
 		var domNode = this.document.createElement("span");
+		// Assign data- attributes
+		this.updateDomNodeDataAttributes(null,domNode);
 		parent.insertBefore(domNode,nextSibling);
 		this.renderChildren(domNode,null);
 		this.domNodes.push(domNode);
@@ -207,8 +209,7 @@ 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 ||
-		changedAttributes["class"] || changedAttributes.tabindex || changedAttributes.draggable || changedAttributes.tag) {
+	if($tw.utils.count(changedAttributes) > 0) {
 		this.refreshSelf();
 		return true;
 	}

core/modules/widgets/radio.js

@@ -40,6 +40,7 @@ RadioWidget.prototype.render = function(parent,nextSibling) {
 	);
 	this.inputDomNode = this.document.createElement("input");
 	this.inputDomNode.setAttribute("type","radio");
+	this.updateDomNodeDataAttributes(null,this.inputDomNode);
 	if(isChecked) {
 		this.inputDomNode.checked = true;
 	}

core/modules/widgets/range.js

@@ -50,6 +50,7 @@ RangeWidget.prototype.render = function(parent,nextSibling) {
 		this.inputDomNode.setAttribute("disabled",true);
 	}
 	this.inputDomNode.value = this.getValue();
+	this.updateDomNodeDataAttributes(null,this.inputDomNode);
 	// Add a click event handler
 	$tw.utils.addEventListeners(this.inputDomNode,[
 		{name:"mousedown", handlerObject:this, handlerMethod:"handleMouseDownEvent"},

core/modules/widgets/select.js

@@ -169,6 +169,7 @@ SelectWidget.prototype.execute = function() {
 	if(this.selectTooltip) {
 		$tw.utils.addAttributeToParseTreeNode(selectNode,"title",this.selectTooltip);
 	}
+	this.updateParseTreeDataAttributes(selectNode);
 	this.makeChildWidgets([selectNode]);
 };
 
@@ -178,16 +179,15 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
 SelectWidget.prototype.refresh = function(changedTiddlers) {
 	var changedAttributes = this.computeAttributes();
 	// If we're using a different tiddler/field/index then completely refresh ourselves
-	if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes.tooltip) {
+	if($tw.utils.count(changedAttributes) > 0) {
 		this.refreshSelf();
 		return true;
-	// If the target tiddler value has changed, just update setting and refresh the children
 	} else {
+		// If the target tiddler value has changed, just update setting and refresh the children
 		if(changedAttributes.class) {
 			this.selectClass = this.getAttribute("class");
 			this.getSelectDomNode().setAttribute("class",this.selectClass); 
 		}
-		
 		var childrenRefreshed = this.refreshChildren(changedTiddlers);
 		if(changedTiddlers[this.selectTitle] || childrenRefreshed) {
 			this.setSelectValue();

core/modules/widgets/widget.js

@@ -811,6 +811,38 @@ Widget.evaluateVariable  = function(widget,name,options) {
 	return result;
 };
 
+/*
+Set/update the data- attributes of a DOM node according to the attributes of a widget
+changedAttributes: hashmap by name of attributes that have changed (the values of the hashmap entry doesn't matter)
+domNode: optional domNode to be assigned
+*/
+Widget.prototype.updateDomNodeDataAttributes = function(changedAttributes,domNode) {
+	var self = this;
+	changedAttributes = changedAttributes || this.attributes;
+	domNode = domNode || this.domNode;
+	var DATA_ATTRIBUTE_PREFIX = "data-";
+	$tw.utils.each(changedAttributes,function(value,name) {
+		value = self.getAttribute(name);
+		if(name.substr(0,DATA_ATTRIBUTE_PREFIX.length) === DATA_ATTRIBUTE_PREFIX) {
+			domNode.setAttribute(name,value);
+		}
+	});
+};
+
+/*
+Set the data- attributes of a parse tree node according to the attributes of the widget
+domNode: optional domNode to be assigned
+*/
+Widget.prototype.updateParseTreeDataAttributes = function(parseTreeNode) {
+	var self = this;
+	var DATA_ATTRIBUTE_PREFIX = "data-";
+	$tw.utils.each(this.attributes,function(value,name) {
+		if(name.substr(0,DATA_ATTRIBUTE_PREFIX.length) === DATA_ATTRIBUTE_PREFIX) {
+			$tw.utils.addAttributeToParseTreeNode(parseTreeNode,name,value);
+		}
+	});
+};
+
 exports.widget = Widget;
 
 })();