mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-05 09:36:18 +00:00
Code Issues Releases Wiki Activity

Add data attribute support to button widget

Browse Source
This commit is contained in:
Jeremy Ruston 2023-10-04 22:12:51 +01:00
parent 1eceb5f47f
commit b4896d79d8
3 changed files with 37 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
core/modules/widgets/button.js
View File

@ -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,8 +272,19 @@ 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"]) {
this.updateDomNodeClasses();
} 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);
};

10
core/wiki/macros/tabs.tid
View File

@ -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">

3
editions/tw5.com/tiddlers/widgets/ButtonWidget.tid
View File

@ -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 |