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:
Matt Lauber
2015-11-13 07:50:34 -05:00
parent ac00aa8407
commit c535dd605c
2 changed files with 56 additions and 12 deletions
+42 -5
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 = value.map(function(s) { return "[["+s+"]]"}).join(" ");
}
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 : 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();
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 = 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
*/
@@ -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]);
};
@@ -137,4 +174,4 @@ SelectWidget.prototype.refresh = function(changedTiddlers) {
exports.select = SelectWidget;
})();
})();