mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-09-28 15:08:46 +00:00
Grant the select widget the ability to select multiple values.
Multiple values are placed in a given tiddler-field combination as if that field were a list field.
This commit is contained in:
parent
ac00aa8407
commit
c535dd605c
@ -51,7 +51,12 @@ SelectWidget.prototype.render = function(parent,nextSibling) {
|
|||||||
Handle a change event
|
Handle a change event
|
||||||
*/
|
*/
|
||||||
SelectWidget.prototype.handleChangeEvent = function(event) {
|
SelectWidget.prototype.handleChangeEvent = function(event) {
|
||||||
|
if(this.selectMultiple == false) {
|
||||||
var value = this.getSelectDomNode().value;
|
var value = this.getSelectDomNode().value;
|
||||||
|
} else {
|
||||||
|
var value = this.getSelectValues();
|
||||||
|
value = value.map(function(s) { return "[["+s+"]]"}).join(" ");
|
||||||
|
}
|
||||||
this.wiki.setText(this.selectTitle,this.selectField,this.selectIndex,value);
|
this.wiki.setText(this.selectTitle,this.selectField,this.selectIndex,value);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -81,10 +86,22 @@ SelectWidget.prototype.setSelectValue = function() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Assign it to the select element if it's different than the current value
|
// Assign it to the select element if it's different than the current value
|
||||||
|
if (this.selectMultiple) {
|
||||||
|
value = value === undefined ? "" : value;
|
||||||
|
var select = this.getSelectDomNode();
|
||||||
|
var values = Array.isArray(value) ? value : value.split(",");
|
||||||
|
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();
|
var domNode = this.getSelectDomNode();
|
||||||
if(domNode.value !== value) {
|
if(domNode.value !== value) {
|
||||||
domNode.value = value;
|
domNode.value = value;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -94,6 +111,22 @@ SelectWidget.prototype.getSelectDomNode = function() {
|
|||||||
return this.children[0].domNodes[0];
|
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 = this.getSelectDomNode()
|
||||||
|
var result = [];
|
||||||
|
var options = select && select.options;
|
||||||
|
var opt;
|
||||||
|
for (var i=0, iLen=options.length; i<iLen; i++) {
|
||||||
|
opt = options[i];
|
||||||
|
if (opt.selected) {
|
||||||
|
result.push(opt.value || opt.text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Compute the internal state of the widget
|
Compute the internal state of the widget
|
||||||
*/
|
*/
|
||||||
@ -104,6 +137,7 @@ SelectWidget.prototype.execute = function() {
|
|||||||
this.selectIndex = this.getAttribute("index");
|
this.selectIndex = this.getAttribute("index");
|
||||||
this.selectClass = this.getAttribute("class");
|
this.selectClass = this.getAttribute("class");
|
||||||
this.selectDefault = this.getAttribute("default");
|
this.selectDefault = this.getAttribute("default");
|
||||||
|
this.selectMultiple = this.getAttribute("multiple", false);
|
||||||
// Make the child widgets
|
// Make the child widgets
|
||||||
var selectNode = {
|
var selectNode = {
|
||||||
type: "element",
|
type: "element",
|
||||||
@ -113,6 +147,9 @@ SelectWidget.prototype.execute = function() {
|
|||||||
if(this.selectClass) {
|
if(this.selectClass) {
|
||||||
$tw.utils.addAttributeToParseTreeNode(selectNode,"class",this.selectClass);
|
$tw.utils.addAttributeToParseTreeNode(selectNode,"class",this.selectClass);
|
||||||
}
|
}
|
||||||
|
if(this.selectMultiple) {
|
||||||
|
$tw.utils.addAttributeToParseTreeNode(selectNode,"multiple","multiple");
|
||||||
|
}
|
||||||
this.makeChildWidgets([selectNode]);
|
this.makeChildWidgets([selectNode]);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -1,10 +1,3 @@
|
|||||||
caption: select
|
|
||||||
created: 20131024141900000
|
|
||||||
modified: 20141203155137508
|
|
||||||
tags: Widgets
|
|
||||||
title: SelectWidget
|
|
||||||
type: text/vnd.tiddlywiki
|
|
||||||
|
|
||||||
! Introduction
|
! Introduction
|
||||||
|
|
||||||
The select widget displays a popup menu based on a [[HTML select element|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select]]. The popup (or dropdown) contains a list of items defined by `<option>` and `<optgroup>` elements.
|
The select widget displays a popup menu based on a [[HTML select element|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select]]. The popup (or dropdown) contains a list of items defined by `<option>` and `<optgroup>` elements.
|
||||||
@ -99,3 +92,17 @@ This example uses a nested pair of list widgets. The outer one generates the `<o
|
|||||||
</optgroup>
|
</optgroup>
|
||||||
</$list>
|
</$list>
|
||||||
</$select>"/>
|
</$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>
|
||||||
|
"/>
|
Loading…
Reference in New Issue
Block a user