mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-09-27 14:48:19 +00:00
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:
parent
ac797734de
commit
fb57eab2f4
@ -40,7 +40,31 @@ SelectWidget.prototype.render = function(parent,nextSibling) {
|
|||||||
this.parentDomNode = parent;
|
this.parentDomNode = parent;
|
||||||
this.computeAttributes();
|
this.computeAttributes();
|
||||||
this.execute();
|
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();
|
this.setSelectValue();
|
||||||
if(this.selectFocus == "yes") {
|
if(this.selectFocus == "yes") {
|
||||||
this.getSelectDomNode().focus();
|
this.getSelectDomNode().focus();
|
||||||
@ -113,7 +137,7 @@ SelectWidget.prototype.setSelectValue = function() {
|
|||||||
Get the DOM node of the select element
|
Get the DOM node of the select element
|
||||||
*/
|
*/
|
||||||
SelectWidget.prototype.getSelectDomNode = function() {
|
SelectWidget.prototype.getSelectDomNode = function() {
|
||||||
return this.children[0].domNodes[0];
|
return this.domNodes[0];
|
||||||
};
|
};
|
||||||
|
|
||||||
// Return an array of the selected opion values
|
// Return an array of the selected opion values
|
||||||
@ -149,28 +173,7 @@ SelectWidget.prototype.execute = function() {
|
|||||||
this.selectTooltip = this.getAttribute("tooltip");
|
this.selectTooltip = this.getAttribute("tooltip");
|
||||||
this.selectFocus = this.getAttribute("focus");
|
this.selectFocus = this.getAttribute("focus");
|
||||||
// Make the child widgets
|
// Make the child widgets
|
||||||
var selectNode = {
|
this.makeChildWidgets();
|
||||||
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]);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -179,16 +182,21 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
|
|||||||
SelectWidget.prototype.refresh = function(changedTiddlers) {
|
SelectWidget.prototype.refresh = function(changedTiddlers) {
|
||||||
var changedAttributes = this.computeAttributes();
|
var changedAttributes = this.computeAttributes();
|
||||||
// If we're using a different tiddler/field/index then completely refresh ourselves
|
// 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();
|
this.refreshSelf();
|
||||||
return true;
|
return true;
|
||||||
} else {
|
} else {
|
||||||
// If the target tiddler value has changed, just update setting and refresh the children
|
|
||||||
if(changedAttributes.class) {
|
if(changedAttributes.class) {
|
||||||
this.selectClass = this.getAttribute("class");
|
this.selectClass = this.getAttribute("class");
|
||||||
this.getSelectDomNode().setAttribute("class",this.selectClass);
|
this.getSelectDomNode().setAttribute("class",this.selectClass);
|
||||||
}
|
}
|
||||||
|
this.assignAttributes(this.getSelectDomNode(),{
|
||||||
|
changedAttributes: changedAttributes,
|
||||||
|
sourcePrefix: "data-",
|
||||||
|
destPrefix: "data-"
|
||||||
|
});
|
||||||
var childrenRefreshed = this.refreshChildren(changedTiddlers);
|
var childrenRefreshed = this.refreshChildren(changedTiddlers);
|
||||||
|
// If the target tiddler value has changed, just update setting and refresh the children
|
||||||
if(changedTiddlers[this.selectTitle] || childrenRefreshed) {
|
if(changedTiddlers[this.selectTitle] || childrenRefreshed) {
|
||||||
this.setSelectValue();
|
this.setSelectValue();
|
||||||
}
|
}
|
||||||
|
@ -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
|
Get the number of ancestor widgets for this widget
|
||||||
*/
|
*/
|
||||||
|
@ -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>
|
Loading…
Reference in New Issue
Block a user