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

Merge pull request #2074 from mklauber/master

Browse Source 
Manage a list field by allowing the <$select> widget to select multiple items.
This commit is contained in:
Jeremy Ruston 2015-12-24 13:48:43 +00:00
commit dcc53b8e96
2 changed files with 55 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
core/modules/widgets/select.js
View File

@ -51,7 +51,12 @@ SelectWidget.prototype.render = function(parent,nextSibling) {
Handle a change event
*/
SelectWidget.prototype.handleChangeEvent = function(event) {
var value = this.getSelectDomNode().value;
if(this.selectMultiple == false) {
var value = this.getSelectDomNode().value;
} else {
var value = this.getSelectValues()
value = $tw.utils.stringifyList(value);
}
this.wiki.setText(this.selectTitle,this.selectField,this.selectIndex,value);
};
@ -81,9 +86,21 @@ SelectWidget.prototype.setSelectValue = function() {
}
}
// Assign it to the select element if it's different than the current value
var domNode = this.getSelectDomNode();
if(domNode.value !== value) {
domNode.value = value;
if (this.selectMultiple) {
value = value === undefined ? "" : value;
var select = this.getSelectDomNode();
var values = Array.isArray(value) ? value : $tw.utils.parseStringArray(value);
for(var i=0; i < select.children.length; i++){
if(values.indexOf(select.children[i].value) != -1) {
select.children[i].selected = true;
}
}
} else {
var domNode = this.getSelectDomNode();
if(domNode.value !== value) {
domNode.value = value;
}
}
};
@ -94,6 +111,22 @@ SelectWidget.prototype.getSelectDomNode = function() {
return this.children[0].domNodes[0];
};
// Return an array of the selected opion values
// select is an HTML select element
SelectWidget.prototype.getSelectValues = function() {
var select, result, options, opt;
select = this.getSelectDomNode();
result = [];
options = select && select.options;
for (var i=0; i<options.length; i++) {
opt = options[i];
if (opt.selected) {
result.push(opt.value || opt.text);
}
}
return result;
}
/*
Compute the internal state of the widget
*/
@ -104,6 +137,7 @@ SelectWidget.prototype.execute = function() {
this.selectIndex = this.getAttribute("index");
this.selectClass = this.getAttribute("class");
this.selectDefault = this.getAttribute("default");
this.selectMultiple = this.getAttribute("multiple", false);
// Make the child widgets
var selectNode = {
type: "element",
@ -113,6 +147,9 @@ SelectWidget.prototype.execute = function() {
if(this.selectClass) {
$tw.utils.addAttributeToParseTreeNode(selectNode,"class",this.selectClass);
}
if(this.selectMultiple) {
$tw.utils.addAttributeToParseTreeNode(selectNode,"multiple","multiple");
}
this.makeChildWidgets([selectNode]);
};

14
editions/tw5.com/tiddlers/widgets/SelectWidget.tid
View File

@ -99,3 +99,17 @@ This example uses a nested pair of list widgets. The outer one generates the `<o
</optgroup>
</$list>
</$select>"/>
!! Multiple Selections
This example uses the `multiple` keyword to specify that we should be able to select multiple items.
<$macrocall $name="wikitext-example-without-html" src="<$select tiddler='$:/generated-list-demo-state' field='testing' multiple>
<$list filter='[tag[TableOfContents]]'>
<option><$view field='title'/></option>
</$list>
</$select><br />
<$list filter='[list[$:/generated-list-demo-state!!testing]]'>
<$view field='title' /><br />
</$list>
"/>