Add data attribute support to button widget

core/modules/widgets/button.js

@@ -16,6 +16,8 @@ var Widget = require("$:/core/modules/widgets/widget.js").widget;
 
 var Popup = require("$:/core/modules/utils/dom/popup.js");
 
+var DATA_ATTRIBUTE_PREFIX = "data-";
+
 var ButtonWidget = function(parseTreeNode,options) {
 	this.initialise(parseTreeNode,options);
 };
@@ -59,6 +61,8 @@ ButtonWidget.prototype.render = function(parent,nextSibling) {
 		$tw.utils.pushTop(classes,"tc-popup-handle");
 	}
 	domNode.className = classes.join(" ");
+	// Assign data- attributes
+	this.updateDomNodeDataAttributes();
 	// Assign other attributes
 	if(this.style) {
 		domNode.setAttribute("style",this.style);
@@ -250,7 +254,15 @@ ButtonWidget.prototype.updateDomNodeClasses = function() {
 	//Add new classes from updated class attribute.
 	$tw.utils.pushTop(domNodeClasses,newClasses);
 	this.domNode.className = domNodeClasses.join(" ");
+};
+
+ButtonWidget.prototype.updateDomNodeDataAttributes = function() {
+	$tw.utils.each(this.attributes,function(value,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
@@ -260,9 +272,20 @@ ButtonWidget.prototype.refresh = function(changedTiddlers) {
 	if(changedAttributes.actions || changedAttributes.to || changedAttributes.message || changedAttributes.param || changedAttributes.set || changedAttributes.setTo || changedAttributes.popup || changedAttributes.hover || changedAttributes.selectedClass || changedAttributes.style || changedAttributes.dragFilter || changedAttributes.dragTiddler || (this.set && changedTiddlers[this.set]) || (this.popup && changedTiddlers[this.popup]) || (this.popupTitle && changedTiddlers[this.popupTitle]) || changedAttributes.popupAbsCoords || changedAttributes.setTitle || changedAttributes.setField || changedAttributes.setIndex || changedAttributes.popupTitle || changedAttributes.disabled || changedAttributes["default"]) {
 		this.refreshSelf();
 		return true;
-	} else if(changedAttributes["class"]) {
+	} else {
+		if(changedAttributes["class"]) {
 			this.updateDomNodeClasses();
 		}
+		var gotDataAttribute = false;
+		$tw.utils.each(changedAttributes,function(value,name) {
+			if(name.substr(0,DATA_ATTRIBUTE_PREFIX.length) === DATA_ATTRIBUTE_PREFIX) {
+				gotDataAttribute = true;
+			}
+		});
+		if(gotDataAttribute) {
+			this.updateDomNodeDataAttributes();
+		}
+	}
 	return this.refreshChildren(changedTiddlers);
 };
 

core/wiki/macros/tabs.tid

@@ -4,7 +4,15 @@ code-body: yes
 
 \define tabs-button()
 \whitespace trim
-<$button set=<<tabsState>> setTo=<<currentTab>> default=<<__default__>> selectedClass="tc-tab-selected" tooltip={{!!tooltip}} role="switch">
+<$button
+	set=<<tabsState>>
+	setTo=<<currentTab>>
+	default=<<__default__>>
+	selectedClass="tc-tab-selected"
+	tooltip={{!!tooltip}}
+	role="switch"
+	data-tab-title=<<currentTab>>
+>
 	<$tiddler tiddler=<<save-currentTiddler>>>
 		<$set name="tv-wikilinks" value="no">
 			<$transclude tiddler=<<__buttonTemplate__>> mode="inline">

editions/tw5.com/tiddlers/widgets/ButtonWidget.tid

@@ -1,6 +1,6 @@
 caption: button
 created: 20131024141900000
-modified: 20220810192251345
+modified: 20231004221035849
 tags: Widgets TriggeringWidgets
 title: ButtonWidget
 type: text/vnd.tiddlywiki
@@ -41,6 +41,7 @@ The content of the `<$button>` widget is displayed within the button.
 |aria-label |Optional [[Accessibility]] label |
 |tooltip |Optional tooltip |
 |class |An optional CSS class name to be assigned to the HTML element|
+|data-* |<<.from-version "5.3.2">> Optional [[data attributes|https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes]] to be assigned to the HTML element |
 |style |An optional CSS style attribute to be assigned to the HTML element |
 |tag |An optional html tag to use instead of the default "button" |
 |dragTiddler |An optional tiddler title making the button draggable and identifying the payload tiddler. See DraggableWidget for details |