mirrors
/
TiddlyWiki5
mirror of https://github.com/Jermolene/TiddlyWiki5
1
0
Fork 0
Code Issues Releases Wiki Activity

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
This commit is contained in:
Saq Imtiaz 2023-11-21 11:20:14 +01:00 committed by GitHub
parent ac797734de
commit fb57eab2f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 61 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
core/modules/widgets/select.js
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,28 +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.assignAttributesToParseTreeNode(selectNode);
this.makeChildWidgets([selectNode]);
this.makeChildWidgets();
};
/*
@ -179,16 +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($tw.utils.count(changedAttributes) > 0) {
if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes.tooltip || changedAttributes.tabindex) {
this.refreshSelf();
return true;
} 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);
}
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();
}

14
core/modules/widgets/widget.js
View File

@ -458,20 +458,6 @@ Widget.prototype.assignAttributes = function(domNode,options) {
});
};
/*
Set the data- and style. attributes of a parse tree node according to the attributes of the widget
*/
Widget.prototype.assignAttributesToParseTreeNode = function(parseTreeNode) {
var self = this;
var DATA_ATTRIBUTE_PREFIX = "data-",
STYLE_ATTRIBUTE_PREFIX = "style.";
$tw.utils.each(this.attributes,function(value,name) {
if(name.substr(0,DATA_ATTRIBUTE_PREFIX.length) === DATA_ATTRIBUTE_PREFIX || name.substr(0,STYLE_ATTRIBUTE_PREFIX.length) === STYLE_ATTRIBUTE_PREFIX) {
$tw.utils.addAttributeToParseTreeNode(parseTreeNode,name,value);
}
});
};
/*
Get the number of ancestor widgets for this widget
*/

27
editions/test/tiddlers/tests/data/widgets/DataAttributes/SelectWidget-DataAttributes.tid Normal file
View File

@ -0,0 +1,27 @@
title: Widgets/DataAttributes/SelectWidget
description: Data Attributes for SelectWidget
type: text/vnd.tiddlywiki-multiple
tags: [[$:/tags/wiki-test-spec]]
title: Output
\whitespace trim
<$select tiddler='New Tiddler' field='text' default='Choose a new text' data-title={{Temp}} style.color={{{ [[Temp]get[color]] }}}>
<option disabled>Choose a new text</option>
<option>A Tale of Two Cities</option>
<option>A New Kind of Science</option>
<option>The Dice Man</option>
</$select>
+
title: Actions
<$action-setfield $tiddler="Temp" $field="text" $value="Title2" color="red"/>
+
title: Temp
color: black
Title1
+
title: ExpectedResult
<p><select data-title="Title2" value="Choose a new text" style="color:red;"><option disabled="true">Choose a new text</option><option>A Tale of Two Cities</option><option>A New Kind of Science</option><option>The Dice Man</option></select></p>