luci-base: ui.js: fix multi vs. multiple keyword confusion

The "luci.form" and "luci.tools.widgets" classes use the "multiple"
keyword while ui.js uses "multi" internally, leading to single-value
dropdowns widget values getting stored as uci lists.

Fix the issue by using "multiple" everywhere.

Fixes: #2871
Signed-off-by: Jo-Philipp Wich <jo@mein.io>

diff --git a/modules/luci-base/htdocs/luci-static/resources/ui.js b/modules/luci-base/htdocs/luci-static/resources/ui.js
index 9e43c2d1250149dceb73bea8c6767c3e3b0dbacc..9c16a9a0dd6646b17187365a7d3749ba0d781138 100644 (file)
--- a/modules/luci-base/htdocs/luci-static/resources/ui.js
+++ b/modules/luci-base/htdocs/luci-static/resources/ui.js
@@ -213,13 +213,13 @@ var UISelect = UIElement.extend({
                if (!Array.isArray(value))
                        value = (value != null && value != '') ? [ value ] : [];
 
-               if (!options.multi && value.length > 1)
+               if (!options.multiple && value.length > 1)
                        value.length = 1;
 
                this.values = value;
                this.choices = choices;
                this.options = Object.assign({
-                       multi: false,
+                       multiple: false,
                        widget: 'select',
                        orientation: 'horizontal'
                }, options);
@@ -240,7 +240,7 @@ var UISelect = UIElement.extend({
                                'name': this.options.name,
                                'size': this.options.size,
                                'class': 'cbi-input-select',
-                               'multiple': this.options.multi ? '' : null
+                               'multiple': this.options.multiple ? '' : null
                        }));
 
                        if (this.options.optional)
@@ -267,8 +267,8 @@ var UISelect = UIElement.extend({
                                        E('input', {
                                                'id': this.options.id ? 'widget.' + this.options.id : null,
                                                'name': this.options.id || this.options.name,
-                                               'type': this.options.multi ? 'checkbox' : 'radio',
-                                               'class': this.options.multi ? 'cbi-input-checkbox' : 'cbi-input-radio',
+                                               'type': this.options.multiple ? 'checkbox' : 'radio',
+                                               'class': this.options.multiple ? 'cbi-input-checkbox' : 'cbi-input-radio',
                                                'value': keys[i],
                                                'checked': (this.values.indexOf(keys[i]) > -1) ? '' : null
                                        }),
@@ -345,7 +345,7 @@ var UIDropdown = UIElement.extend({
                this.choices = choices;
                this.options = Object.assign({
                        sort:               true,
-                       multi:              Array.isArray(value),
+                       multiple:           Array.isArray(value),
                        optional:           true,
                        select_placeholder: _('-- Please choose --'),
                        custom_placeholder: _('-- custom --'),
@@ -361,7 +361,7 @@ var UIDropdown = UIElement.extend({
                var sb = E('div', {
                        'id': this.options.id,
                        'class': 'cbi-dropdown',
-                       'multiple': this.options.multi ? '' : null,
+                       'multiple': this.options.multiple ? '' : null,
                        'optional': this.options.optional ? '' : null,
                }, E('ul'));
 
@@ -409,7 +409,7 @@ var UIDropdown = UIElement.extend({
        bind: function(sb) {
                var o = this.options;
 
-               o.multi = sb.hasAttribute('multiple');
+               o.multiple = sb.hasAttribute('multiple');
                o.optional = sb.hasAttribute('optional');
                o.placeholder = sb.getAttribute('placeholder') || o.placeholder;
                o.display_items = parseInt(sb.getAttribute('display-items') || o.display_items);
@@ -425,7 +425,7 @@ var UIDropdown = UIElement.extend({
                    ndisplay = this.options.display_items,
                    n = 0;
 
-               if (this.options.multi) {
+               if (this.options.multiple) {
                        var items = ul.querySelectorAll('li');
 
                        for (var i = 0; i < items.length; i++) {
@@ -657,7 +657,7 @@ var UIDropdown = UIElement.extend({
                if (li.hasAttribute('unselectable'))
                        return;
 
-               if (this.options.multi) {
+               if (this.options.multiple) {
                        var cbox = li.querySelector('input[type="checkbox"]'),
                            items = li.parentNode.querySelectorAll('li'),
                            label = sb.querySelector('ul.preview'),
@@ -780,7 +780,7 @@ var UIDropdown = UIElement.extend({
                        element: sb
                };
 
-               if (this.options.multi)
+               if (this.options.multiple)
                        detail.values = values;
                else
                        detail.value = values.length ? values[0] : null;
@@ -800,12 +800,12 @@ var UIDropdown = UIElement.extend({
                        for (var value in values) {
                                this.createItems(sb, value);
 
-                               if (!this.options.multi)
+                               if (!this.options.multiple)
                                        break;
                        }
                }
 
-               if (this.options.multi) {
+               if (this.options.multiple) {
                        var lis = ul.querySelectorAll('li[data-value]');
                        for (var i = 0; i < lis.length; i++) {
                                var value = lis[i].getAttribute('data-value');
@@ -857,7 +857,7 @@ var UIDropdown = UIElement.extend({
                    val = (value || '').trim(),
                    ul = sb.querySelector('ul');
 
-               if (!sbox.options.multi)
+               if (!sbox.options.multiple)
                        val = val.length ? [ val ] : [];
                else
                        val = val.length ? val.split(/\s+/) : [];
@@ -881,7 +881,7 @@ var UIDropdown = UIElement.extend({
 
                                new_item = E(markup.replace(/{{value}}/g, item));
 
-                               if (sbox.options.multi) {
+                               if (sbox.options.multiple) {
                                        sbox.transformItem(sb, new_item);
                                }
                                else {
@@ -1071,7 +1071,7 @@ var UIDropdown = UIElement.extend({
        },
 
        setValue: function(values) {
-               if (this.options.multi) {
+               if (this.options.multiple) {
                        if (!Array.isArray(values))
                                values = (values != null && values != '') ? [ values ] : [];
 
@@ -1104,7 +1104,7 @@ var UIDropdown = UIElement.extend({
                for (var i = 0; i < h.length; i++)
                        v.push(h[i].value);
 
-               return this.options.multi ? v : v[0];
+               return this.options.multiple ? v : v[0];
        }
 });
 
@@ -1116,7 +1116,7 @@ var UICombobox = UIDropdown.extend({
                        dropdown_items: -1,
                        sort: true
                }, options, {
-                       multi: false,
+                       multiple: false,
                        create: true,
                        optional: true
                }) ]);
@@ -1134,7 +1134,7 @@ var UIDynamicList = UIElement.extend({
                this.values = values;
                this.choices = choices;
                this.options = Object.assign({}, options, {
-                       multi: false,
+                       multiple: false,
                        optional: true
                });
        },