mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2026-09-15 14:21:23 +00:00
Code Issues Releases Wiki Activity

Add data attribute support to button and other widgets (#7769)

Browse Source 
* Add data attribute support to button widget

* Fix typo

* Refactor ready for making mechanism more generic

* Apply more generic implementation to multiplate widgets

* Refactor to use existing widget.assignAttributes() method

* Fix typo

* Clarify docs

* Update docs

* Update select widget to support style.* attributes

* Remove obsolete comment

* Fixes refresh issues for checkbox and links widgets for data attributes (#7846)

* fix: refresh issues with checkbox and links widgets

* fix: indenting

* Feat: add support for data attributes to Draggable and Droppable widgets (#7845)

* Docs clarification

* docs: add style and data attributes to Draggable and Droppable widget docs (#7850)

* Refactors Select widget to directly create DOM node (#7848)

* fix: refactored SelectWidget to directly create DOM nodes

* fix: refactored SelectWidget to directly create DOM nodes

* fix: improve refresh handling for select widget

* Fixes issues in the PR "Button widget data attributes" (#7852)

* fix: fixed ordered attributes handling and improved tests to catch event attributes

* fix: clean up code from testing

* fix: more tests and refactoring

* fix: use lowercase when checking for event attribute prefix

* fix: use lowercase when checking for event attribute prefix

* fix: changed comment wording

* fix: minor refactoring

* refactor: for brevity

---------

Co-authored-by: Saq Imtiaz <saq.imtiaz@gmail.com>
This commit is contained in:
Jeremy Ruston
2023-11-22 20:05:40 +00:00
committed by GitHub
co-authored by Saq Imtiaz
parent 4c2979286b
commit 62bb8affa4
30 changed files with 399 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/modules/widgets/select.js
+34 -26
View File
@@ -40,7 +40,31 @@ SelectWidget.prototype.render = function(parent,nextSibling) {
this.parentDomNode = parent;
this.computeAttributes();
this.execute();
this.renderChildren(parent,nextSibling);
//Create element
var domNode = this.document.createElement("select");
if(this.selectClass) {
domNode.classname = this.selectClass;
}
// Assign data- attributes
this.assignAttributes(domNode,{
sourcePrefix: "data-",
destPrefix: "data-"
});
if(this.selectMultiple) {
domNode.setAttribute("multiple","multiple");
}
if(this.selectSize) {
domNode.setAttribute("size",this.selectSize);
}
if(this.selectTabindex) {
domNode.setAttribute("tabindex",this.selectTabindex);
}
if(this.selectTooltip) {
domNode.setAttribute("title",this.selectTooltip);
}
this.renderChildren(domNode,nextSibling);
this.parentDomNode.insertBefore(domNode,nextSibling);
this.domNodes.push(domNode);
this.setSelectValue();
if(this.selectFocus == "yes") {
this.getSelectDomNode().focus();
@@ -113,7 +137,7 @@ SelectWidget.prototype.setSelectValue = function() {
Get the DOM node of the select element
*/
SelectWidget.prototype.getSelectDomNode = function() {
return this.children[0].domNodes[0];
return this.domNodes[0];
};
// Return an array of the selected opion values
@@ -149,27 +173,7 @@ SelectWidget.prototype.execute = function() {
this.selectTooltip = this.getAttribute("tooltip");
this.selectFocus = this.getAttribute("focus");
// Make the child widgets
var selectNode = {
type: "element",
tag: "select",
children: this.parseTreeNode.children
};
if(this.selectClass) {
$tw.utils.addAttributeToParseTreeNode(selectNode,"class",this.selectClass);
}
if(this.selectMultiple) {
$tw.utils.addAttributeToParseTreeNode(selectNode,"multiple","multiple");
}
if(this.selectSize) {
$tw.utils.addAttributeToParseTreeNode(selectNode,"size",this.selectSize);
}
if(this.selectTabindex) {
$tw.utils.addAttributeToParseTreeNode(selectNode,"tabindex",this.selectTabindex);
}
if(this.selectTooltip) {
$tw.utils.addAttributeToParseTreeNode(selectNode,"title",this.selectTooltip);
}
this.makeChildWidgets([selectNode]);
this.makeChildWidgets();
};
/*
@@ -178,17 +182,21 @@ 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(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes.tooltip || changedAttributes.tabindex) {
this.refreshSelf();
return true;
// If the target tiddler value has changed, just update setting and refresh the children
} else {
if(changedAttributes.class) {
this.selectClass = this.getAttribute("class");
this.getSelectDomNode().setAttribute("class",this.selectClass);
}
this.assignAttributes(this.getSelectDomNode(),{
changedAttributes: changedAttributes,
sourcePrefix: "data-",
destPrefix: "data-"
});
var childrenRefreshed = this.refreshChildren(changedTiddlers);
// If the target tiddler value has changed, just update setting and refresh the children
if(changedTiddlers[this.selectTitle] || childrenRefreshed) {
this.setSelectValue();
}