10 var callSessionAccess
= rpc
.declare({
13 params
: [ 'scope', 'object', 'function' ],
14 expect
: { 'access': false }
17 var CBIJSONConfig
= baseclass
.extend({
18 __init__: function(data
) {
19 data
= Object
.assign({}, data
);
26 for (var sectiontype
in data
) {
27 if (!data
.hasOwnProperty(sectiontype
))
30 if (Array
.isArray(data
[sectiontype
])) {
31 for (var i
= 0, index
= 0; i
< data
[sectiontype
].length
; i
++) {
32 var item
= data
[sectiontype
][i
],
35 if (!L
.isObject(item
))
38 if (typeof(item
['.name']) == 'string') {
43 name
= sectiontype
+ num_sections
;
47 if (!this.data
.hasOwnProperty(name
))
48 section_ids
.push(name
);
50 this.data
[name
] = Object
.assign(item
, {
51 '.index': num_sections
++,
52 '.anonymous': anonymous
,
58 else if (L
.isObject(data
[sectiontype
])) {
59 this.data
[sectiontype
] = Object
.assign(data
[sectiontype
], {
65 section_ids
.push(sectiontype
);
70 section_ids
.sort(L
.bind(function(a
, b
) {
71 var indexA
= (this.data
[a
]['.index'] != null) ? +this.data
[a
]['.index'] : 9999,
72 indexB
= (this.data
[b
]['.index'] != null) ? +this.data
[b
]['.index'] : 9999;
75 return (indexA
- indexB
);
80 for (var i
= 0; i
< section_ids
.length
; i
++)
81 this.data
[section_ids
[i
]]['.index'] = i
;
85 return Promise
.resolve(this.data
);
89 return Promise
.resolve();
92 get: function(config
, section
, option
) {
97 return this.data
[section
];
99 if (!this.data
.hasOwnProperty(section
))
102 var value
= this.data
[section
][option
];
104 if (Array
.isArray(value
))
108 return String(value
);
113 set: function(config
, section
, option
, value
) {
114 if (section
== null || option
== null || option
.charAt(0) == '.')
117 if (!this.data
.hasOwnProperty(section
))
121 delete this.data
[section
][option
];
122 else if (Array
.isArray(value
))
123 this.data
[section
][option
] = value
;
125 this.data
[section
][option
] = String(value
);
128 unset: function(config
, section
, option
) {
129 return this.set(config
, section
, option
, null);
132 sections: function(config
, sectiontype
, callback
) {
135 for (var section_id
in this.data
)
136 if (sectiontype
== null || this.data
[section_id
]['.type'] == sectiontype
)
137 rv
.push(this.data
[section_id
]);
139 rv
.sort(function(a
, b
) { return a
['.index'] - b
['.index'] });
141 if (typeof(callback
) == 'function')
142 for (var i
= 0; i
< rv
.length
; i
++)
143 callback
.call(this, rv
[i
], rv
[i
]['.name']);
148 add: function(config
, sectiontype
, sectionname
) {
149 var num_sections_type
= 0, next_index
= 0;
151 for (var name
in this.data
) {
152 num_sections_type
+= (this.data
[name
]['.type'] == sectiontype
);
153 next_index
= Math
.max(next_index
, this.data
[name
]['.index']);
156 var section_id
= sectionname
|| sectiontype
+ num_sections_type
;
158 if (!this.data
.hasOwnProperty(section_id
)) {
159 this.data
[section_id
] = {
161 '.type': sectiontype
,
162 '.anonymous': (sectionname
== null),
163 '.index': next_index
+ 1
170 remove: function(config
, section
) {
171 if (this.data
.hasOwnProperty(section
))
172 delete this.data
[section
];
175 resolveSID: function(config
, section_id
) {
179 move: function(config
, section_id1
, section_id2
, after
) {
180 return uci
.move.apply(this, [config
, section_id1
, section_id2
, after
]);
185 * @class AbstractElement
186 * @memberof LuCI.form
190 * The `AbstractElement` class serves as abstract base for the different form
191 * elements implemented by `LuCI.form`. It provides the common logic for
192 * loading and rendering values, for nesting elements and for defining common
195 * This class is private and not directly accessible by user code.
197 var CBIAbstractElement
= baseclass
.extend(/** @lends LuCI.form.AbstractElement.prototype */ {
198 __init__: function(title
, description
) {
199 this.title
= title
|| '';
200 this.description
= description
|| '';
205 * Add another form element as children to this element.
207 * @param {AbstractElement} element
208 * The form element to add.
210 append: function(obj
) {
211 this.children
.push(obj
);
215 * Parse this elements form input.
217 * The `parse()` function recursively walks the form element tree and
218 * triggers input value reading and validation for each encountered element.
220 * Elements which are hidden due to unsatisified dependencies are skipped.
222 * @returns {Promise<void>}
223 * Returns a promise resolving once this element's value and the values of
224 * all child elements have been parsed. The returned promise is rejected
225 * if any parsed values are not meeting the validation constraints of their
226 * respective elements.
229 var args
= arguments
;
230 this.children
.forEach(function(child
) {
231 child
.parse
.apply(child
, args
);
236 * Render the form element.
238 * The `render()` function recursively walks the form element tree and
239 * renders the markup for each element, returning the assembled DOM tree.
242 * @returns {Node|Promise<Node>}
243 * May return a DOM Node or a promise resolving to a DOM node containing
244 * the form element's markup, including the markup of any child elements.
247 L
.error('InternalError', 'Not implemented');
251 loadChildren: function(/* ... */) {
254 if (Array
.isArray(this.children
))
255 for (var i
= 0; i
< this.children
.length
; i
++)
256 if (!this.children
[i
].disable
)
257 tasks
.push(this.children
[i
].load
.apply(this.children
[i
], arguments
));
259 return Promise
.all(tasks
);
263 renderChildren: function(tab_name
/*, ... */) {
267 if (Array
.isArray(this.children
))
268 for (var i
= 0; i
< this.children
.length
; i
++)
269 if (tab_name
=== null || this.children
[i
].tab
=== tab_name
)
270 if (!this.children
[i
].disable
)
271 tasks
.push(this.children
[i
].render
.apply(
272 this.children
[i
], this.varargs(arguments
, 1, index
++)));
274 return Promise
.all(tasks
);
278 * Strip any HTML tags from the given input string.
280 * @param {string} input
281 * The input string to clean.
284 * The cleaned input string with HTML removes removed.
286 stripTags: function(s
) {
287 if (typeof(s
) == 'string' && !s
.match(/[<>]/))
290 var x
= E('div', {}, s
);
291 return x
.textContent
|| x
.innerText
|| '';
295 * Format the given named property as title string.
297 * This function looks up the given named property and formats its value
298 * suitable for use as element caption or description string. It also
299 * strips any HTML tags from the result.
301 * If the property value is a string, it is passed to `String.format()`
302 * along with any additional parameters passed to `titleFn()`.
304 * If the property value is a function, it is invoked with any additional
305 * `titleFn()` parameters as arguments and the obtained return value is
306 * converted to a string.
308 * In all other cases, `null` is returned.
310 * @param {string} property
311 * The name of the element property to use.
313 * @param {...*} fmt_args
314 * Extra values to format the title string with.
316 * @returns {string|null}
317 * The formatted title string or `null` if the property did not exist or
318 * was neither a string nor a function.
320 titleFn: function(attr
/*, ... */) {
323 if (typeof(this[attr
]) == 'function')
324 s
= this[attr
].apply(this, this.varargs(arguments
, 1));
325 else if (typeof(this[attr
]) == 'string')
326 s
= (arguments
.length
> 1) ? ''.format
.apply(this[attr
], this.varargs(arguments
, 1)) : this[attr
];
329 s
= this.stripTags(String(s
)).trim();
331 if (s
== null || s
== '')
340 * @memberof LuCI.form
341 * @augments LuCI.form.AbstractElement
345 * The `Map` class represents one complete form. A form usually maps one UCI
346 * configuraton file and is divided into multiple sections containing multiple
349 * It serves as main entry point into the `LuCI.form` for typical view code.
351 * @param {string} config
352 * The UCI configuration to map. It is automatically loaded along when the
353 * resulting map instance.
355 * @param {string} [title]
356 * The title caption of the form. A form title is usually rendered as separate
357 * headline element before the actual form contents. If omitted, the
358 * corresponding headline element will not be rendered.
360 * @param {string} [description]
361 * The description text of the form which is usually rendered as text
362 * paragraph below the form title and before the actual form conents.
363 * If omitted, the corresponding paragraph element will not be rendered.
365 var CBIMap
= CBIAbstractElement
.extend(/** @lends LuCI.form.Map.prototype */ {
366 __init__: function(config
/*, ... */) {
367 this.super('__init__', this.varargs(arguments
, 1));
369 this.config
= config
;
370 this.parsechain
= [ config
];
375 * Toggle readonly state of the form.
377 * If set to `true`, the Map instance is marked readonly and any form
378 * option elements added to it will inherit the readonly state.
380 * If left unset, the Map will test the access permission of the primary
381 * uci configuration upon loading and mark the form readonly if no write
382 * permissions are granted.
384 * @name LuCI.form.Map.prototype#readonly
389 * Find all DOM nodes within this Map which match the given search
390 * parameters. This function is essentially a convenience wrapper around
391 * `querySelectorAll()`.
393 * This function is sensitive to the amount of arguments passed to it;
394 * if only one argument is specified, it is used as selector-expression
395 * as-is. When two arguments are passed, the first argument is treated
396 * as attribute name, the second one as attribute value to match.
398 * As an example, `map.findElements('input')` would find all `<input>`
399 * nodes while `map.findElements('type', 'text')` would find any DOM node
400 * with a `type="text"` attribute.
402 * @param {string} selector_or_attrname
403 * If invoked with only one parameter, this argument is a
404 * `querySelectorAll()` compatible selector expression. If invoked with
405 * two parameters, this argument is the attribute name to filter for.
407 * @param {string} [attrvalue]
408 * In case the function is invoked with two parameters, this argument
409 * specifies the attribute value to match.
411 * @throws {InternalError}
412 * Throws an `InternalError` if more than two function parameters are
415 * @returns {NodeList}
416 * Returns a (possibly empty) DOM `NodeList` containing the found DOM nodes.
418 findElements: function(/* ... */) {
421 if (arguments
.length
== 1)
423 else if (arguments
.length
== 2)
424 q
= '[%s="%s"]'.format(arguments
[0], arguments
[1]);
426 L
.error('InternalError', 'Expecting one or two arguments to findElements()');
428 return this.root
.querySelectorAll(q
);
432 * Find the first DOM node within this Map which matches the given search
433 * parameters. This function is essentially a convenience wrapper around
434 * `findElements()` which only returns the first found node.
436 * This function is sensitive to the amount of arguments passed to it;
437 * if only one argument is specified, it is used as selector-expression
438 * as-is. When two arguments are passed, the first argument is treated
439 * as attribute name, the second one as attribute value to match.
441 * As an example, `map.findElement('input')` would find the first `<input>`
442 * node while `map.findElement('type', 'text')` would find the first DOM
443 * node with a `type="text"` attribute.
445 * @param {string} selector_or_attrname
446 * If invoked with only one parameter, this argument is a `querySelector()`
447 * compatible selector expression. If invoked with two parameters, this
448 * argument is the attribute name to filter for.
450 * @param {string} [attrvalue]
451 * In case the function is invoked with two parameters, this argument
452 * specifies the attribute value to match.
454 * @throws {InternalError}
455 * Throws an `InternalError` if more than two function parameters are
458 * @returns {Node|null}
459 * Returns the first found DOM node or `null` if no element matched.
461 findElement: function(/* ... */) {
462 var res
= this.findElements
.apply(this, arguments
);
463 return res
.length
? res
[0] : null;
467 * Tie another UCI configuration to the map.
469 * By default, a map instance will only load the UCI configuration file
470 * specified in the constructor but sometimes access to values from
471 * further configuration files is required. This function allows for such
472 * use cases by registering further UCI configuration files which are
475 * @param {string} config
476 * The additional UCI configuration file to tie to the map. If the given
477 * config already is in the list of required files, it will be ignored.
479 chain: function(config
) {
480 if (this.parsechain
.indexOf(config
) == -1)
481 this.parsechain
.push(config
);
485 * Add a configuration section to the map.
487 * LuCI forms follow the structure of the underlying UCI configurations,
488 * means that a map, which represents a single UCI configuration, is
489 * divided into multiple sections which in turn contain an arbitrary
492 * While UCI itself only knows two kinds of sections - named and anonymous
493 * ones - the form class offers various flavors of form section elements
494 * to present configuration sections in different ways. Refer to the
495 * documentation of the different section classes for details.
497 * @param {LuCI.form.AbstractSection} sectionclass
498 * The section class to use for rendering the configuration section.
499 * Note that this value must be the class itself, not a class instance
500 * obtained from calling `new`. It must also be a class dervied from
501 * `LuCI.form.AbstractSection`.
503 * @param {...string} classargs
504 * Additional arguments which are passed as-is to the contructor of the
505 * given section class. Refer to the class specific constructor
506 * documentation for details.
508 * @returns {LuCI.form.AbstractSection}
509 * Returns the instantiated section class instance.
511 section: function(cbiClass
/*, ... */) {
512 if (!CBIAbstractSection
.isSubclass(cbiClass
))
513 L
.error('TypeError', 'Class must be a descendent of CBIAbstractSection');
515 var obj
= cbiClass
.instantiate(this.varargs(arguments
, 1, this));
521 * Load the configuration covered by this map.
523 * The `load()` function first loads all referenced UCI configurations,
524 * then it recursively walks the form element tree and invokes the
525 * load function of each child element.
527 * @returns {Promise<void>}
528 * Returns a promise resolving once the entire form completed loading all
529 * data. The promise may reject with an error if any configuration failed
530 * to load or if any of the child elements load functions rejected with
534 var doCheckACL
= (!(this instanceof CBIJSONMap
) && this.readonly
== null),
535 loadTasks
= [ doCheckACL
? callSessionAccess('uci', this.config
, 'write') : true ],
536 configs
= this.parsechain
|| [ this.config
];
538 loadTasks
.push
.apply(loadTasks
, configs
.map(L
.bind(function(config
, i
) {
539 return i
? L
.resolveDefault(this.data
.load(config
)) : this.data
.load(config
);
542 return Promise
.all(loadTasks
).then(L
.bind(function(res
) {
543 if (res
[0] === false)
544 this.readonly
= true;
546 return this.loadChildren();
551 * Parse the form input values.
553 * The `parse()` function recursively walks the form element tree and
554 * triggers input value reading and validation for each child element.
556 * Elements which are hidden due to unsatisified dependencies are skipped.
558 * @returns {Promise<void>}
559 * Returns a promise resolving once the entire form completed parsing all
560 * input values. The returned promise is rejected if any parsed values are
561 * not meeting the validation constraints of their respective elements.
566 if (Array
.isArray(this.children
))
567 for (var i
= 0; i
< this.children
.length
; i
++)
568 tasks
.push(this.children
[i
].parse());
570 return Promise
.all(tasks
);
574 * Save the form input values.
576 * This function parses the current form, saves the resulting UCI changes,
577 * reloads the UCI configuration data and redraws the form elements.
579 * @param {function} [cb]
580 * An optional callback function that is invoked after the form is parsed
581 * but before the changed UCI data is saved. This is useful to perform
582 * additional data manipulation steps before saving the changes.
584 * @param {boolean} [silent=false]
585 * If set to `true`, trigger an alert message to the user in case saving
586 * the form data failes. Otherwise fail silently.
588 * @returns {Promise<void>}
589 * Returns a promise resolving once the entire save operation is complete.
590 * The returned promise is rejected if any step of the save operation
593 save: function(cb
, silent
) {
598 .then(this.data
.save
.bind(this.data
))
599 .then(this.load
.bind(this))
602 ui
.showModal(_('Save error'), [
603 E('p', {}, [ _('An error occurred while saving the form:') ]),
604 E('p', {}, [ E('em', { 'style': 'white-space:pre' }, [ e
.message
]) ]),
605 E('div', { 'class': 'right' }, [
606 E('button', { 'class': 'btn', 'click': ui
.hideModal
}, [ _('Dismiss') ])
611 return Promise
.reject(e
);
612 }).then(this.renderContents
.bind(this));
616 * Reset the form by re-rendering its contents. This will revert all
617 * unsaved user inputs to their initial form state.
619 * @returns {Promise<Node>}
620 * Returns a promise resolving to the toplevel form DOM node once the
621 * re-rendering is complete.
624 return this.renderContents();
628 * Render the form markup.
630 * @returns {Promise<Node>}
631 * Returns a promise resolving to the toplevel form DOM node once the
632 * rendering is complete.
635 return this.load().then(this.renderContents
.bind(this));
639 renderContents: function() {
640 var mapEl
= this.root
|| (this.root
= E('div', {
641 'id': 'cbi-%s'.format(this.config
),
643 'cbi-dependency-check': L
.bind(this.checkDepends
, this)
646 dom
.bindClassInstance(mapEl
, this);
648 return this.renderChildren(null).then(L
.bind(function(nodes
) {
649 var initialRender
= !mapEl
.firstChild
;
651 dom
.content(mapEl
, null);
653 if (this.title
!= null && this.title
!= '')
654 mapEl
.appendChild(E('h2', { 'name': 'content' }, this.title
));
656 if (this.description
!= null && this.description
!= '')
657 mapEl
.appendChild(E('div', { 'class': 'cbi-map-descr' }, this.description
));
660 dom
.append(mapEl
, E('div', { 'class': 'cbi-map-tabbed' }, nodes
));
662 dom
.append(mapEl
, nodes
);
664 if (!initialRender
) {
665 mapEl
.classList
.remove('flash');
667 window
.setTimeout(function() {
668 mapEl
.classList
.add('flash');
674 var tabGroups
= mapEl
.querySelectorAll('.cbi-map-tabbed, .cbi-section-node-tabbed');
676 for (var i
= 0; i
< tabGroups
.length
; i
++)
677 ui
.tabs
.initTabGroup(tabGroups
[i
].childNodes
);
684 * Find a form option element instance.
686 * @param {string} name_or_id
687 * The name or the full ID of the option element to look up.
689 * @param {string} [section_id]
690 * The ID of the UCI section containing the option to look up. May be
691 * omitted if a full ID is passed as first argument.
693 * @param {string} [config]
694 * The name of the UCI configuration the option instance is belonging to.
695 * Defaults to the main UCI configuration of the map if omitted.
697 * @returns {Array<LuCI.form.AbstractValue,string>|null}
698 * Returns a two-element array containing the form option instance as
699 * first item and the corresponding UCI section ID as second item.
700 * Returns `null` if the option could not be found.
702 lookupOption: function(name
, section_id
, config_name
) {
703 var id
, elem
, sid
, inst
;
705 if (name
.indexOf('.') > -1)
706 id
= 'cbid.%s'.format(name
);
708 id
= 'cbid.%s.%s.%s'.format(config_name
|| this.config
, section_id
, name
);
710 elem
= this.findElement('data-field', id
);
711 sid
= elem
? id
.split(/\./)[2] : null;
712 inst
= elem
? dom
.findClassInstance(elem
) : null;
714 return (inst
instanceof CBIAbstractValue
) ? [ inst
, sid
] : null;
718 checkDepends: function(ev
, n
) {
721 for (var i
= 0, s
= this.children
[0]; (s
= this.children
[i
]) != null; i
++)
722 if (s
.checkDepends(ev
, n
))
725 if (changed
&& (n
|| 0) < 10)
726 this.checkDepends(ev
, (n
|| 10) + 1);
728 ui
.tabs
.updateTabs(ev
, this.root
);
732 isDependencySatisfied: function(depends
, config_name
, section_id
) {
735 if (!Array
.isArray(depends
) || !depends
.length
)
738 for (var i
= 0; i
< depends
.length
; i
++) {
740 reverse
= depends
[i
]['!reverse'],
741 contains
= depends
[i
]['!contains'];
743 for (var dep
in depends
[i
]) {
744 if (dep
== '!reverse' || dep
== '!contains') {
747 else if (dep
== '!default') {
752 var res
= this.lookupOption(dep
, section_id
, config_name
),
753 val
= (res
&& res
[0].isActive(res
[1])) ? res
[0].formvalue(res
[1]) : null;
756 ? isContained(val
, depends
[i
][dep
])
757 : isEqual(val
, depends
[i
][dep
]);
759 istat
= (istat
&& equal
);
772 * @constructor JSONMap
773 * @memberof LuCI.form
774 * @augments LuCI.form.Map
778 * A `JSONMap` class functions similar to [LuCI.form.Map]{@link LuCI.form.Map}
779 * but uses a multidimensional JavaScript object instead of UCI configuration
782 * @param {Object<string, Object<string, *>|Array<Object<string, *>>>} data
783 * The JavaScript object to use as data source. Internally, the object is
784 * converted into an UCI-like format. Its toplevel keys are treated like UCI
785 * section types while the object or array-of-object values are treated as
788 * @param {string} [title]
789 * The title caption of the form. A form title is usually rendered as separate
790 * headline element before the actual form contents. If omitted, the
791 * corresponding headline element will not be rendered.
793 * @param {string} [description]
794 * The description text of the form which is usually rendered as text
795 * paragraph below the form title and before the actual form conents.
796 * If omitted, the corresponding paragraph element will not be rendered.
798 var CBIJSONMap
= CBIMap
.extend(/** @lends LuCI.form.JSONMap.prototype */ {
799 __init__: function(data
/*, ... */) {
800 this.super('__init__', this.varargs(arguments
, 1, 'json'));
802 this.config
= 'json';
803 this.parsechain
= [ 'json' ];
804 this.data
= new CBIJSONConfig(data
);
809 * @class AbstractSection
810 * @memberof LuCI.form
811 * @augments LuCI.form.AbstractElement
815 * The `AbstractSection` class serves as abstract base for the different form
816 * section styles implemented by `LuCI.form`. It provides the common logic for
817 * enumerating underlying configuration section instances, for registering
818 * form options and for handling tabs to segment child options.
820 * This class is private and not directly accessible by user code.
822 var CBIAbstractSection
= CBIAbstractElement
.extend(/** @lends LuCI.form.AbstractSection.prototype */ {
823 __init__: function(map
, sectionType
/*, ... */) {
824 this.super('__init__', this.varargs(arguments
, 2));
826 this.sectiontype
= sectionType
;
828 this.config
= map
.config
;
830 this.optional
= true;
831 this.addremove
= false;
832 this.dynamic
= false;
836 * Access the parent option container instance.
838 * In case this section is nested within an option element container,
839 * this property will hold a reference to the parent option instance.
841 * If this section is not nested, the property is `null`.
843 * @name LuCI.form.AbstractSection.prototype#parentoption
844 * @type LuCI.form.AbstractValue
849 * Enumerate the UCI section IDs covered by this form section element.
852 * @throws {InternalError}
853 * Throws an `InternalError` exception if the function is not implemented.
855 * @returns {string[]}
856 * Returns an array of UCI section IDs covered by this form element.
857 * The sections will be rendered in the same order as the returned array.
859 cfgsections: function() {
860 L
.error('InternalError', 'Not implemented');
864 * Filter UCI section IDs to render.
866 * The filter function is invoked for each UCI section ID of a given type
867 * and controls whether the given UCI section is rendered or ignored by
868 * the form section element.
870 * The default implementation always returns `true`. User code or
871 * classes extending `AbstractSection` may overwrite this function with
872 * custom implementations.
875 * @param {string} section_id
876 * The UCI section ID to test.
879 * Returns `true` when the given UCI section ID should be handled and
880 * `false` when it should be ignored.
882 filter: function(section_id
) {
887 * Load the configuration covered by this section.
889 * The `load()` function recursively walks the section element tree and
890 * invokes the load function of each child option element.
892 * @returns {Promise<void>}
893 * Returns a promise resolving once the values of all child elements have
894 * been loaded. The promise may reject with an error if any of the child
895 * elements load functions rejected with an error.
898 var section_ids
= this.cfgsections(),
901 if (Array
.isArray(this.children
))
902 for (var i
= 0; i
< section_ids
.length
; i
++)
903 tasks
.push(this.loadChildren(section_ids
[i
])
904 .then(Function
.prototype.bind
.call(function(section_id
, set_values
) {
905 for (var i
= 0; i
< set_values
.length
; i
++)
906 this.children
[i
].cfgvalue(section_id
, set_values
[i
]);
907 }, this, section_ids
[i
])));
909 return Promise
.all(tasks
);
913 * Parse this sections form input.
915 * The `parse()` function recursively walks the section element tree and
916 * triggers input value reading and validation for each encountered child
919 * Options which are hidden due to unsatisified dependencies are skipped.
921 * @returns {Promise<void>}
922 * Returns a promise resolving once the values of all child elements have
923 * been parsed. The returned promise is rejected if any parsed values are
924 * not meeting the validation constraints of their respective elements.
927 var section_ids
= this.cfgsections(),
930 if (Array
.isArray(this.children
))
931 for (var i
= 0; i
< section_ids
.length
; i
++)
932 for (var j
= 0; j
< this.children
.length
; j
++)
933 tasks
.push(this.children
[j
].parse(section_ids
[i
]));
935 return Promise
.all(tasks
);
939 * Add an option tab to the section.
941 * The child option elements of a section may be divided into multiple
942 * tabs to provide a better overview to the user.
944 * Before options can be moved into a tab pane, the corresponding tab
945 * has to be defined first, which is done by calling this function.
947 * Note that once tabs are defined, user code must use the `taboption()`
948 * method to add options to specific tabs. Option elements added by
949 * `option()` will not be assigned to any tab and not be rendered in this
952 * @param {string} name
953 * The name of the tab to register. It may be freely chosen and just serves
954 * as an identifier to differentiate tabs.
956 * @param {string} title
957 * The human readable caption of the tab.
959 * @param {string} [description]
960 * An additional description text for the corresponding tab pane. It is
961 * displayed as text paragraph below the tab but before the tab pane
962 * contents. If omitted, no description will be rendered.
965 * Throws an exeption if a tab with the same `name` already exists.
967 tab: function(name
, title
, description
) {
968 if (this.tabs
&& this.tabs
[name
])
969 throw 'Tab already declared';
974 description
: description
,
978 this.tabs
= this.tabs
|| [];
979 this.tabs
.push(entry
);
980 this.tabs
[name
] = entry
;
982 this.tab_names
= this.tab_names
|| [];
983 this.tab_names
.push(name
);
987 * Add a configuration option widget to the section.
989 * Note that [taboption()]{@link LuCI.form.AbstractSection#taboption}
990 * should be used instead if this form section element uses tabs.
992 * @param {LuCI.form.AbstractValue} optionclass
993 * The option class to use for rendering the configuration option. Note
994 * that this value must be the class itself, not a class instance obtained
995 * from calling `new`. It must also be a class dervied from
996 * [LuCI.form.AbstractSection]{@link LuCI.form.AbstractSection}.
998 * @param {...*} classargs
999 * Additional arguments which are passed as-is to the contructor of the
1000 * given option class. Refer to the class specific constructor
1001 * documentation for details.
1003 * @throws {TypeError}
1004 * Throws a `TypeError` exception in case the passed class value is not a
1005 * descendent of `AbstractValue`.
1007 * @returns {LuCI.form.AbstractValue}
1008 * Returns the instantiated option class instance.
1010 option: function(cbiClass
/*, ... */) {
1011 if (!CBIAbstractValue
.isSubclass(cbiClass
))
1012 throw L
.error('TypeError', 'Class must be a descendent of CBIAbstractValue');
1014 var obj
= cbiClass
.instantiate(this.varargs(arguments
, 1, this.map
, this));
1020 * Add a configuration option widget to a tab of the section.
1022 * @param {string} tabname
1023 * The name of the section tab to add the option element to.
1025 * @param {LuCI.form.AbstractValue} optionclass
1026 * The option class to use for rendering the configuration option. Note
1027 * that this value must be the class itself, not a class instance obtained
1028 * from calling `new`. It must also be a class dervied from
1029 * [LuCI.form.AbstractSection]{@link LuCI.form.AbstractSection}.
1031 * @param {...*} classargs
1032 * Additional arguments which are passed as-is to the contructor of the
1033 * given option class. Refer to the class specific constructor
1034 * documentation for details.
1036 * @throws {ReferenceError}
1037 * Throws a `ReferenceError` exception when the given tab name does not
1040 * @throws {TypeError}
1041 * Throws a `TypeError` exception in case the passed class value is not a
1042 * descendent of `AbstractValue`.
1044 * @returns {LuCI.form.AbstractValue}
1045 * Returns the instantiated option class instance.
1047 taboption: function(tabName
/*, ... */) {
1048 if (!this.tabs
|| !this.tabs
[tabName
])
1049 throw L
.error('ReferenceError', 'Associated tab not declared');
1051 var obj
= this.option
.apply(this, this.varargs(arguments
, 1));
1053 this.tabs
[tabName
].children
.push(obj
);
1058 * Query underlying option configuration values.
1060 * This function is sensitive to the amount of arguments passed to it;
1061 * if only one argument is specified, the configuration values of all
1062 * options within this section are returned as dictionary.
1064 * If both the section ID and an option name are supplied, this function
1065 * returns the configuration value of the specified option only.
1067 * @param {string} section_id
1068 * The configuration section ID
1070 * @param {string} [option]
1071 * The name of the option to query
1073 * @returns {null|string|string[]|Object<string, null|string|string[]>}
1074 * Returns either a dictionary of option names and their corresponding
1075 * configuration values or just a single configuration value, depending
1076 * on the amount of passed arguments.
1078 cfgvalue: function(section_id
, option
) {
1079 var rv
= (arguments
.length
== 1) ? {} : null;
1081 for (var i
= 0, o
; (o
= this.children
[i
]) != null; i
++)
1083 rv
[o
.option
] = o
.cfgvalue(section_id
);
1084 else if (o
.option
== option
)
1085 return o
.cfgvalue(section_id
);
1091 * Query underlying option widget input values.
1093 * This function is sensitive to the amount of arguments passed to it;
1094 * if only one argument is specified, the widget input values of all
1095 * options within this section are returned as dictionary.
1097 * If both the section ID and an option name are supplied, this function
1098 * returns the widget input value of the specified option only.
1100 * @param {string} section_id
1101 * The configuration section ID
1103 * @param {string} [option]
1104 * The name of the option to query
1106 * @returns {null|string|string[]|Object<string, null|string|string[]>}
1107 * Returns either a dictionary of option names and their corresponding
1108 * widget input values or just a single widget input value, depending
1109 * on the amount of passed arguments.
1111 formvalue: function(section_id
, option
) {
1112 var rv
= (arguments
.length
== 1) ? {} : null;
1114 for (var i
= 0, o
; (o
= this.children
[i
]) != null; i
++) {
1115 var func
= this.map
.root
? this.children
[i
].formvalue
: this.children
[i
].cfgvalue
;
1118 rv
[o
.option
] = func
.call(o
, section_id
);
1119 else if (o
.option
== option
)
1120 return func
.call(o
, section_id
);
1127 * Obtain underlying option LuCI.ui widget instances.
1129 * This function is sensitive to the amount of arguments passed to it;
1130 * if only one argument is specified, the LuCI.ui widget instances of all
1131 * options within this section are returned as dictionary.
1133 * If both the section ID and an option name are supplied, this function
1134 * returns the LuCI.ui widget instance value of the specified option only.
1136 * @param {string} section_id
1137 * The configuration section ID
1139 * @param {string} [option]
1140 * The name of the option to query
1142 * @returns {null|LuCI.ui.AbstractElement|Object<string, null|LuCI.ui.AbstractElement>}
1143 * Returns either a dictionary of option names and their corresponding
1144 * widget input values or just a single widget input value, depending
1145 * on the amount of passed arguments.
1147 getUIElement: function(section_id
, option
) {
1148 var rv
= (arguments
.length
== 1) ? {} : null;
1150 for (var i
= 0, o
; (o
= this.children
[i
]) != null; i
++)
1152 rv
[o
.option
] = o
.getUIElement(section_id
);
1153 else if (o
.option
== option
)
1154 return o
.getUIElement(section_id
);
1160 * Obtain underlying option objects.
1162 * This function is sensitive to the amount of arguments passed to it;
1163 * if no option name is specified, all options within this section are
1164 * returned as dictionary.
1166 * If an option name is supplied, this function returns the matching
1167 * LuCI.form.AbstractValue instance only.
1169 * @param {string} [option]
1170 * The name of the option object to obtain
1172 * @returns {null|LuCI.form.AbstractValue|Object<string, LuCI.form.AbstractValue>}
1173 * Returns either a dictionary of option names and their corresponding
1174 * option instance objects or just a single object instance value,
1175 * depending on the amount of passed arguments.
1177 getOption: function(option
) {
1178 var rv
= (arguments
.length
== 0) ? {} : null;
1180 for (var i
= 0, o
; (o
= this.children
[i
]) != null; i
++)
1183 else if (o
.option
== option
)
1190 renderUCISection: function(section_id
) {
1191 var renderTasks
= [];
1194 return this.renderOptions(null, section_id
);
1196 for (var i
= 0; i
< this.tab_names
.length
; i
++)
1197 renderTasks
.push(this.renderOptions(this.tab_names
[i
], section_id
));
1199 return Promise
.all(renderTasks
)
1200 .then(this.renderTabContainers
.bind(this, section_id
));
1204 renderTabContainers: function(section_id
, nodes
) {
1205 var config_name
= this.uciconfig
|| this.map
.config
,
1206 containerEls
= E([]);
1208 for (var i
= 0; i
< nodes
.length
; i
++) {
1209 var tab_name
= this.tab_names
[i
],
1210 tab_data
= this.tabs
[tab_name
],
1211 containerEl
= E('div', {
1212 'id': 'container.%s.%s.%s'.format(config_name
, section_id
, tab_name
),
1213 'data-tab': tab_name
,
1214 'data-tab-title': tab_data
.title
,
1215 'data-tab-active': tab_name
=== this.selected_tab
1218 if (tab_data
.description
!= null && tab_data
.description
!= '')
1219 containerEl
.appendChild(
1220 E('div', { 'class': 'cbi-tab-descr' }, tab_data
.description
));
1222 containerEl
.appendChild(nodes
[i
]);
1223 containerEls
.appendChild(containerEl
);
1226 return containerEls
;
1230 renderOptions: function(tab_name
, section_id
) {
1231 var in_table
= (this instanceof CBITableSection
);
1232 return this.renderChildren(tab_name
, section_id
, in_table
).then(function(nodes
) {
1233 var optionEls
= E([]);
1234 for (var i
= 0; i
< nodes
.length
; i
++)
1235 optionEls
.appendChild(nodes
[i
]);
1241 checkDepends: function(ev
, n
) {
1242 var changed
= false,
1243 sids
= this.cfgsections();
1245 for (var i
= 0, sid
= sids
[0]; (sid
= sids
[i
]) != null; i
++) {
1246 for (var j
= 0, o
= this.children
[0]; (o
= this.children
[j
]) != null; j
++) {
1247 var isActive
= o
.isActive(sid
),
1248 isSatisified
= o
.checkDepends(sid
);
1250 if (isActive
!= isSatisified
) {
1251 o
.setActive(sid
, !isActive
);
1252 isActive
= !isActive
;
1257 o
.triggerValidation(sid
);
1266 var isEqual = function(x
, y
) {
1267 if (typeof(y
) == 'object' && y
instanceof RegExp
)
1268 return (x
== null) ? false : y
.test(x
);
1270 if (x
!= null && y
!= null && typeof(x
) != typeof(y
))
1273 if ((x
== null && y
!= null) || (x
!= null && y
== null))
1276 if (Array
.isArray(x
)) {
1277 if (x
.length
!= y
.length
)
1280 for (var i
= 0; i
< x
.length
; i
++)
1281 if (!isEqual(x
[i
], y
[i
]))
1284 else if (typeof(x
) == 'object') {
1286 if (x
.hasOwnProperty(k
) && !y
.hasOwnProperty(k
))
1289 if (!isEqual(x
[k
], y
[k
]))
1294 if (y
.hasOwnProperty(k
) && !x
.hasOwnProperty(k
))
1304 var isContained = function(x
, y
) {
1305 if (Array
.isArray(x
)) {
1306 for (var i
= 0; i
< x
.length
; i
++)
1310 else if (L
.isObject(x
)) {
1311 if (x
.hasOwnProperty(y
) && x
[y
] != null)
1314 else if (typeof(x
) == 'string') {
1315 return (x
.indexOf(y
) > -1);
1322 * @class AbstractValue
1323 * @memberof LuCI.form
1324 * @augments LuCI.form.AbstractElement
1328 * The `AbstractValue` class serves as abstract base for the different form
1329 * option styles implemented by `LuCI.form`. It provides the common logic for
1330 * handling option input values, for dependencies among options and for
1331 * validation constraints that should be applied to entered values.
1333 * This class is private and not directly accessible by user code.
1335 var CBIAbstractValue
= CBIAbstractElement
.extend(/** @lends LuCI.form.AbstractValue.prototype */ {
1336 __init__: function(map
, section
, option
/*, ... */) {
1337 this.super('__init__', this.varargs(arguments
, 3));
1339 this.section
= section
;
1340 this.option
= option
;
1342 this.config
= map
.config
;
1346 this.rmempty
= true;
1347 this.default = null;
1349 this.optional
= false;
1353 * If set to `false`, the underlying option value is retained upon saving
1354 * the form when the option element is disabled due to unsatisfied
1355 * dependency constraints.
1357 * @name LuCI.form.AbstractValue.prototype#rmempty
1363 * If set to `true`, the underlying ui input widget is allowed to be empty,
1364 * otherwise the option element is marked invalid when no value is entered
1365 * or selected by the user.
1367 * @name LuCI.form.AbstractValue.prototype#optional
1373 * Sets a default value to use when the underlying UCI option is not set.
1375 * @name LuCI.form.AbstractValue.prototype#default
1381 * Specifies a datatype constraint expression to validate input values
1382 * against. Refer to {@link LuCI.validation} for details on the format.
1384 * If the user entered input does not match the datatype validation, the
1385 * option element is marked as invalid.
1387 * @name LuCI.form.AbstractValue.prototype#datatype
1393 * Specifies a custom validation function to test the user input for
1394 * validity. The validation function must return `true` to accept the
1395 * value. Any other return value type is converted to a string and
1396 * displayed to the user as validation error message.
1398 * If the user entered input does not pass the validation function, the
1399 * option element is marked as invalid.
1401 * @name LuCI.form.AbstractValue.prototype#validate
1407 * Override the UCI configuration name to read the option value from.
1409 * By default, the configuration name is inherited from the parent Map.
1410 * By setting this property, a deviating configuration may be specified.
1412 * The default is null, means inheriting from the parent form.
1414 * @name LuCI.form.AbstractValue.prototype#uciconfig
1420 * Override the UCI section name to read the option value from.
1422 * By default, the section ID is inherited from the parent section element.
1423 * By setting this property, a deviating section may be specified.
1425 * The default is null, means inheriting from the parent section.
1427 * @name LuCI.form.AbstractValue.prototype#ucisection
1433 * Override the UCI option name to read the value from.
1435 * By default, the elements name, which is passed as third argument to
1436 * the constructor, is used as UCI option name. By setting this property,
1437 * a deviating UCI option may be specified.
1439 * The default is null, means using the option element name.
1441 * @name LuCI.form.AbstractValue.prototype#ucioption
1447 * Mark grid section option element as editable.
1449 * Options which are displayed in the table portion of a `GridSection`
1450 * instance are rendered as readonly text by default. By setting the
1451 * `editable` property of a child option element to `true`, that element
1452 * is rendered as full input widget within its cell instead of a text only
1455 * This property has no effect on options that are not children of grid
1458 * @name LuCI.form.AbstractValue.prototype#editable
1464 * Move grid section option element into the table, the modal popup or both.
1466 * If this property is `null` (the default), the option element is
1467 * displayed in both the table preview area and the per-section instance
1468 * modal popup of a grid section. When it is set to `false` the option
1469 * is only shown in the table but not the modal popup. When set to `true`,
1470 * the option is only visible in the modal popup but not the table.
1472 * This property has no effect on options that are not children of grid
1475 * @name LuCI.form.AbstractValue.prototype#modalonly
1481 * Make option element readonly.
1483 * This property defaults to the readonly state of the parent form element.
1484 * When set to `true`, the underlying widget is rendered in disabled state,
1485 * means its contents cannot be changed and the widget cannot be interacted
1488 * @name LuCI.form.AbstractValue.prototype#readonly
1494 * Override the cell width of a table or grid section child option.
1496 * If the property is set to a numeric value, it is treated as pixel width
1497 * which is set on the containing cell element of the option, essentially
1498 * forcing a certain column width. When the property is set to a string
1499 * value, it is applied as-is to the CSS `width` property.
1501 * This property has no effect on options that are not children of grid or
1502 * table section elements.
1504 * @name LuCI.form.AbstractValue.prototype#width
1505 * @type number|string
1510 * Register a custom value change handler.
1512 * If this property is set to a function value, the function is invoked
1513 * whenever the value of the underlying UI input element is changing.
1515 * The invoked handler function will receive the DOM click element as
1516 * first and the underlying configuration section ID as well as the input
1517 * value as second and third argument respectively.
1519 * @name LuCI.form.AbstractValue.prototype#onchange
1525 * Add a dependency contraint to the option.
1527 * Dependency constraints allow making the presence of option elements
1528 * dependant on the current values of certain other options within the
1529 * same form. An option element with unsatisfied dependencies will be
1530 * hidden from the view and its current value is omitted when saving.
1532 * Multiple constraints (that is, multiple calls to `depends()`) are
1533 * treated as alternatives, forming a logical "or" expression.
1535 * By passing an object of name => value pairs as first argument, it is
1536 * possible to depend on multiple options simultaneously, allowing to form
1537 * a logical "and" expression.
1539 * Option names may be given in "dot notation" which allows to reference
1540 * option elements outside of the current form section. If a name without
1541 * dot is specified, it refers to an option within the same configuration
1542 * section. If specified as <code>configname.sectionid.optionname</code>,
1543 * options anywhere within the same form may be specified.
1545 * The object notation also allows for a number of special keys which are
1546 * not treated as option names but as modifiers to influence the dependency
1547 * constraint evaluation. The associated value of these special "tag" keys
1548 * is ignored. The recognized tags are:
1552 * <code>!reverse</code><br>
1553 * Invert the dependency, instead of requiring another option to be
1554 * equal to the dependency value, that option should <em>not</em> be
1558 * <code>!contains</code><br>
1559 * Instead of requiring an exact match, the dependency is considered
1560 * satisfied when the dependency value is contained within the option
1564 * <code>!default</code><br>
1565 * The dependency is always satisfied
1573 * <code>opt.depends("foo", "test")</code><br>
1574 * Require the value of `foo` to be `test`.
1577 * <code>opt.depends({ foo: "test" })</code><br>
1578 * Equivalent to the previous example.
1581 * <code>opt.depends({ foo: /test/ })</code><br>
1582 * Require the value of `foo` to match the regular expression `/test/`.
1585 * <code>opt.depends({ foo: "test", bar: "qrx" })</code><br>
1586 * Require the value of `foo` to be `test` and the value of `bar` to be
1590 * <code>opt.depends({ foo: "test" })<br>
1591 * opt.depends({ bar: "qrx" })</code><br>
1592 * Require either <code>foo</code> to be set to <code>test</code>,
1593 * <em>or</em> the <code>bar</code> option to be <code>qrx</code>.
1596 * <code>opt.depends("test.section1.foo", "bar")</code><br>
1597 * Require the "foo" form option within the "section1" section to be
1601 * <code>opt.depends({ foo: "test", "!contains": true })</code><br>
1602 * Require the "foo" option value to contain the substring "test".
1606 * @param {string|Object<string, string|RegExp>} optionname_or_depends
1607 * The name of the option to depend on or an object describing multiple
1608 * dependencies which must be satified (a logical "and" expression).
1610 * @param {string} optionvalue|RegExp
1611 * When invoked with a plain option name as first argument, this parameter
1612 * specifies the expected value. In case an object is passed as first
1613 * argument, this parameter is ignored.
1615 depends: function(field
, value
) {
1618 if (typeof(field
) === 'string')
1619 deps
= {}, deps
[field
] = value
;
1623 this.deps
.push(deps
);
1627 transformDepList: function(section_id
, deplist
) {
1628 var list
= deplist
|| this.deps
,
1631 if (Array
.isArray(list
)) {
1632 for (var i
= 0; i
< list
.length
; i
++) {
1635 for (var k
in list
[i
]) {
1636 if (list
[i
].hasOwnProperty(k
)) {
1637 if (k
.charAt(0) === '!')
1638 dep
[k
] = list
[i
][k
];
1639 else if (k
.indexOf('.') !== -1)
1640 dep
['cbid.%s'.format(k
)] = list
[i
][k
];
1642 dep
['cbid.%s.%s.%s'.format(
1643 this.uciconfig
|| this.section
.uciconfig
|| this.map
.config
,
1644 this.ucisection
|| section_id
,
1650 for (var k
in dep
) {
1651 if (dep
.hasOwnProperty(k
)) {
1663 transformChoices: function() {
1664 if (!Array
.isArray(this.keylist
) || this.keylist
.length
== 0)
1669 for (var i
= 0; i
< this.keylist
.length
; i
++)
1670 choices
[this.keylist
[i
]] = this.vallist
[i
];
1676 checkDepends: function(section_id
) {
1677 var config_name
= this.uciconfig
|| this.section
.uciconfig
|| this.map
.config
,
1678 active
= this.map
.isDependencySatisfied(this.deps
, config_name
, section_id
);
1681 this.updateDefaultValue(section_id
);
1687 updateDefaultValue: function(section_id
) {
1688 if (!L
.isObject(this.defaults
))
1691 var config_name
= this.uciconfig
|| this.section
.uciconfig
|| this.map
.config
,
1692 cfgvalue
= L
.toArray(this.cfgvalue(section_id
))[0],
1693 default_defval
= null, satisified_defval
= null;
1695 for (var value
in this.defaults
) {
1696 if (!this.defaults
[value
] || this.defaults
[value
].length
== 0) {
1697 default_defval
= value
;
1700 else if (this.map
.isDependencySatisfied(this.defaults
[value
], config_name
, section_id
)) {
1701 satisified_defval
= value
;
1706 if (satisified_defval
== null)
1707 satisified_defval
= default_defval
;
1709 var node
= this.map
.findElement('id', this.cbid(section_id
));
1710 if (node
&& node
.getAttribute('data-changed') != 'true' && satisified_defval
!= null && cfgvalue
== null)
1711 dom
.callClassMethod(node
, 'setValue', satisified_defval
);
1713 this.default = satisified_defval
;
1717 * Obtain the internal ID ("cbid") of the element instance.
1719 * Since each form section element may map multiple underlying
1720 * configuration sections, the configuration section ID is required to
1721 * form a fully qualified ID pointing to the specific element instance
1722 * within the given specific section.
1724 * @param {string} section_id
1725 * The configuration section ID
1727 * @throws {TypeError}
1728 * Throws a `TypeError` exception when no `section_id` was specified.
1731 * Returns the element ID.
1733 cbid: function(section_id
) {
1734 if (section_id
== null)
1735 L
.error('TypeError', 'Section ID required');
1737 return 'cbid.%s.%s.%s'.format(
1738 this.uciconfig
|| this.section
.uciconfig
|| this.map
.config
,
1739 section_id
, this.option
);
1743 * Load the underlying configuration value.
1745 * The default implementation of this method reads and returns the
1746 * underlying UCI option value (or the related JavaScript property for
1747 * `JSONMap` instances). It may be overwritten by user code to load data
1748 * from nonstandard sources.
1750 * @param {string} section_id
1751 * The configuration section ID
1753 * @throws {TypeError}
1754 * Throws a `TypeError` exception when no `section_id` was specified.
1756 * @returns {*|Promise<*>}
1757 * Returns the configuration value to initialize the option element with.
1758 * The return value of this function is filtered through `Promise.resolve()`
1759 * so it may return promises if overridden by user code.
1761 load: function(section_id
) {
1762 if (section_id
== null)
1763 L
.error('TypeError', 'Section ID required');
1765 return this.map
.data
.get(
1766 this.uciconfig
|| this.section
.uciconfig
|| this.map
.config
,
1767 this.ucisection
|| section_id
,
1768 this.ucioption
|| this.option
);
1772 * Obtain the underlying `LuCI.ui` element instance.
1774 * @param {string} section_id
1775 * The configuration section ID
1777 * @throws {TypeError}
1778 * Throws a `TypeError` exception when no `section_id` was specified.
1780 * @return {LuCI.ui.AbstractElement|null}
1781 * Returns the `LuCI.ui` element instance or `null` in case the form
1782 * option implementation does not use `LuCI.ui` widgets.
1784 getUIElement: function(section_id
) {
1785 var node
= this.map
.findElement('id', this.cbid(section_id
)),
1786 inst
= node
? dom
.findClassInstance(node
) : null;
1787 return (inst
instanceof ui
.AbstractElement
) ? inst
: null;
1791 * Query the underlying configuration value.
1793 * The default implementation of this method returns the cached return
1794 * value of [load()]{@link LuCI.form.AbstractValue#load}. It may be
1795 * overwritten by user code to obtain the configuration value in a
1798 * @param {string} section_id
1799 * The configuration section ID
1801 * @throws {TypeError}
1802 * Throws a `TypeError` exception when no `section_id` was specified.
1805 * Returns the configuration value.
1807 cfgvalue: function(section_id
, set_value
) {
1808 if (section_id
== null)
1809 L
.error('TypeError', 'Section ID required');
1811 if (arguments
.length
== 2) {
1812 this.data
= this.data
|| {};
1813 this.data
[section_id
] = set_value
;
1816 return this.data
? this.data
[section_id
] : null;
1820 * Query the current form input value.
1822 * The default implementation of this method returns the current input
1823 * value of the underlying [LuCI.ui]{@link LuCI.ui.AbstractElement} widget.
1824 * It may be overwritten by user code to handle input values differently.
1826 * @param {string} section_id
1827 * The configuration section ID
1829 * @throws {TypeError}
1830 * Throws a `TypeError` exception when no `section_id` was specified.
1833 * Returns the current input value.
1835 formvalue: function(section_id
) {
1836 var elem
= this.getUIElement(section_id
);
1837 return elem
? elem
.getValue() : null;
1841 * Obtain a textual input representation.
1843 * The default implementation of this method returns the HTML escaped
1844 * current input value of the underlying
1845 * [LuCI.ui]{@link LuCI.ui.AbstractElement} widget. User code or specific
1846 * option element implementations may overwrite this function to apply a
1847 * different logic, e.g. to return `Yes` or `No` depending on the checked
1848 * state of checkbox elements.
1850 * @param {string} section_id
1851 * The configuration section ID
1853 * @throws {TypeError}
1854 * Throws a `TypeError` exception when no `section_id` was specified.
1857 * Returns the text representation of the current input value.
1859 textvalue: function(section_id
) {
1860 var cval
= this.cfgvalue(section_id
);
1863 cval
= this.default;
1865 if (Array
.isArray(cval
))
1866 cval
= cval
.join(' ');
1868 return (cval
!= null) ? '%h'.format(cval
) : null;
1872 * Apply custom validation logic.
1874 * This method is invoked whenever incremental validation is performed on
1875 * the user input, e.g. on keyup or blur events.
1877 * The default implementation of this method does nothing and always
1878 * returns `true`. User code may overwrite this method to provide
1879 * additional validation logic which is not covered by data type
1883 * @param {string} section_id
1884 * The configuration section ID
1887 * The value to validate
1890 * The method shall return `true` to accept the given value. Any other
1891 * return value is treated as failure, converted to a string and displayed
1892 * as error message to the user.
1894 validate: function(section_id
, value
) {
1899 * Test whether the input value is currently valid.
1901 * @param {string} section_id
1902 * The configuration section ID
1904 * @returns {boolean}
1905 * Returns `true` if the input value currently is valid, otherwise it
1908 isValid: function(section_id
) {
1909 var elem
= this.getUIElement(section_id
);
1910 return elem
? elem
.isValid() : true;
1914 * Test whether the option element is currently active.
1916 * An element is active when it is not hidden due to unsatisfied dependency
1919 * @param {string} section_id
1920 * The configuration section ID
1922 * @returns {boolean}
1923 * Returns `true` if the option element currently is active, otherwise it
1926 isActive: function(section_id
) {
1927 var field
= this.map
.findElement('data-field', this.cbid(section_id
));
1928 return (field
!= null && !field
.classList
.contains('hidden'));
1932 setActive: function(section_id
, active
) {
1933 var field
= this.map
.findElement('data-field', this.cbid(section_id
));
1935 if (field
&& field
.classList
.contains('hidden') == active
) {
1936 field
.classList
[active
? 'remove' : 'add']('hidden');
1938 if (dom
.matches(field
.parentNode
, '.td.cbi-value-field'))
1939 field
.parentNode
.classList
[active
? 'remove' : 'add']('inactive');
1948 triggerValidation: function(section_id
) {
1949 var elem
= this.getUIElement(section_id
);
1950 return elem
? elem
.triggerValidation() : true;
1954 * Parse the option element input.
1956 * The function is invoked when the `parse()` method has been invoked on
1957 * the parent form and triggers input value reading and validation.
1959 * @param {string} section_id
1960 * The configuration section ID
1962 * @returns {Promise<void>}
1963 * Returns a promise resolving once the input value has been read and
1964 * validated or rejecting in case the input value does not meet the
1965 * validation constraints.
1967 parse: function(section_id
) {
1968 var active
= this.isActive(section_id
),
1969 cval
= this.cfgvalue(section_id
),
1970 fval
= active
? this.formvalue(section_id
) : null;
1972 if (active
&& !this.isValid(section_id
)) {
1973 var title
= this.stripTags(this.title
).trim();
1974 return Promise
.reject(new TypeError(_('Option "%s" contains an invalid input value.').format(title
|| this.option
)));
1977 if (fval
!= '' && fval
!= null) {
1978 if (this.forcewrite
|| !isEqual(cval
, fval
))
1979 return Promise
.resolve(this.write(section_id
, fval
));
1982 if (!active
|| this.rmempty
|| this.optional
) {
1983 return Promise
.resolve(this.remove(section_id
));
1985 else if (!isEqual(cval
, fval
)) {
1986 var title
= this.stripTags(this.title
).trim();
1987 return Promise
.reject(new TypeError(_('Option "%s" must not be empty.').format(title
|| this.option
)));
1991 return Promise
.resolve();
1995 * Write the current input value into the configuration.
1997 * This function is invoked upon saving the parent form when the option
1998 * element is valid and when its input value has been changed compared to
1999 * the initial value returned by
2000 * [cfgvalue()]{@link LuCI.form.AbstractValue#cfgvalue}.
2002 * The default implementation simply sets the given input value in the
2003 * UCI configuration (or the associated JavaScript object property in
2004 * case of `JSONMap` forms). It may be overwritten by user code to
2005 * implement alternative save logic, e.g. to transform the input value
2006 * before it is written.
2008 * @param {string} section_id
2009 * The configuration section ID
2011 * @param {string|string[]} formvalue
2012 * The input value to write.
2014 write: function(section_id
, formvalue
) {
2015 return this.map
.data
.set(
2016 this.uciconfig
|| this.section
.uciconfig
|| this.map
.config
,
2017 this.ucisection
|| section_id
,
2018 this.ucioption
|| this.option
,
2023 * Remove the corresponding value from the configuration.
2025 * This function is invoked upon saving the parent form when the option
2026 * element has been hidden due to unsatisfied dependencies or when the
2027 * user cleared the input value and the option is marked optional.
2029 * The default implementation simply removes the associated option from the
2030 * UCI configuration (or the associated JavaScript object property in
2031 * case of `JSONMap` forms). It may be overwritten by user code to
2032 * implement alternative removal logic, e.g. to retain the original value.
2034 * @param {string} section_id
2035 * The configuration section ID
2037 remove: function(section_id
) {
2038 var this_cfg
= this.uciconfig
|| this.section
.uciconfig
|| this.map
.config
,
2039 this_sid
= this.ucisection
|| section_id
,
2040 this_opt
= this.ucioption
|| this.option
;
2042 for (var i
= 0; i
< this.section
.children
.length
; i
++) {
2043 var sibling
= this.section
.children
[i
];
2045 if (sibling
=== this || sibling
.ucioption
== null)
2048 var sibling_cfg
= sibling
.uciconfig
|| sibling
.section
.uciconfig
|| sibling
.map
.config
,
2049 sibling_sid
= sibling
.ucisection
|| section_id
,
2050 sibling_opt
= sibling
.ucioption
|| sibling
.option
;
2052 if (this_cfg
!= sibling_cfg
|| this_sid
!= sibling_sid
|| this_opt
!= sibling_opt
)
2055 if (!sibling
.isActive(section_id
))
2058 /* found another active option aliasing the same uci option name,
2059 * so we can't remove the value */
2063 this.map
.data
.unset(this_cfg
, this_sid
, this_opt
);
2068 * @class TypedSection
2069 * @memberof LuCI.form
2070 * @augments LuCI.form.AbstractSection
2074 * The `TypedSection` class maps all or - if `filter()` is overwritten - a
2075 * subset of the underlying UCI configuration sections of a given type.
2077 * Layout wise, the configuration section instances mapped by the section
2078 * element (sometimes referred to as "section nodes") are stacked beneath
2079 * each other in a single column, with an optional section remove button next
2080 * to each section node and a section add button at the end, depending on the
2081 * value of the `addremove` property.
2083 * @param {LuCI.form.Map|LuCI.form.JSONMap} form
2084 * The configuration form this section is added to. It is automatically passed
2085 * by [section()]{@link LuCI.form.Map#section}.
2087 * @param {string} section_type
2088 * The type of the UCI section to map.
2090 * @param {string} [title]
2091 * The title caption of the form section element.
2093 * @param {string} [description]
2094 * The description text of the form section element.
2096 var CBITypedSection
= CBIAbstractSection
.extend(/** @lends LuCI.form.TypedSection.prototype */ {
2097 __name__
: 'CBI.TypedSection',
2100 * If set to `true`, the user may add or remove instances from the form
2101 * section widget, otherwise only preexisting sections may be edited.
2102 * The default is `false`.
2104 * @name LuCI.form.TypedSection.prototype#addremove
2110 * If set to `true`, mapped section instances are treated as anonymous
2111 * UCI sections, which means that section instance elements will be
2112 * rendered without title element and that no name is required when adding
2113 * new sections. The default is `false`.
2115 * @name LuCI.form.TypedSection.prototype#anonymous
2121 * When set to `true`, instead of rendering section instances one below
2122 * another, treat each instance as separate tab pane and render a tab menu
2123 * at the top of the form section element, allowing the user to switch
2124 * among instances. The default is `false`.
2126 * @name LuCI.form.TypedSection.prototype#tabbed
2132 * Override the caption used for the section add button at the bottom of
2133 * the section form element. If set to a string, it will be used as-is,
2134 * if set to a function, the function will be invoked and its return value
2135 * is used as caption, after converting it to a string. If this property
2136 * is not set, the default is `Add`.
2138 * @name LuCI.form.TypedSection.prototype#addbtntitle
2139 * @type string|function
2144 * Override the UCI configuration name to read the section IDs from. By
2145 * default, the configuration name is inherited from the parent `Map`.
2146 * By setting this property, a deviating configuration may be specified.
2147 * The default is `null`, means inheriting from the parent form.
2149 * @name LuCI.form.TypedSection.prototype#uciconfig
2155 cfgsections: function() {
2156 return this.map
.data
.sections(this.uciconfig
|| this.map
.config
, this.sectiontype
)
2157 .map(function(s
) { return s
['.name'] })
2158 .filter(L
.bind(this.filter
, this));
2162 handleAdd: function(ev
, name
) {
2163 var config_name
= this.uciconfig
|| this.map
.config
;
2165 this.map
.data
.add(config_name
, this.sectiontype
, name
);
2166 return this.map
.save(null, true);
2170 handleRemove: function(section_id
, ev
) {
2171 var config_name
= this.uciconfig
|| this.map
.config
;
2173 this.map
.data
.remove(config_name
, section_id
);
2174 return this.map
.save(null, true);
2178 renderSectionAdd: function(extra_class
) {
2179 if (!this.addremove
)
2182 var createEl
= E('div', { 'class': 'cbi-section-create' }),
2183 config_name
= this.uciconfig
|| this.map
.config
,
2184 btn_title
= this.titleFn('addbtntitle');
2186 if (extra_class
!= null)
2187 createEl
.classList
.add(extra_class
);
2189 if (this.anonymous
) {
2190 createEl
.appendChild(E('button', {
2191 'class': 'cbi-button cbi-button-add',
2192 'title': btn_title
|| _('Add'),
2193 'click': ui
.createHandlerFn(this, 'handleAdd'),
2194 'disabled': this.map
.readonly
|| null
2195 }, [ btn_title
|| _('Add') ]));
2198 var nameEl
= E('input', {
2200 'class': 'cbi-section-create-name',
2201 'disabled': this.map
.readonly
|| null
2204 dom
.append(createEl
, [
2205 E('div', {}, nameEl
),
2207 'class': 'cbi-button cbi-button-add',
2209 'value': btn_title
|| _('Add'),
2210 'title': btn_title
|| _('Add'),
2211 'click': ui
.createHandlerFn(this, function(ev
) {
2212 if (nameEl
.classList
.contains('cbi-input-invalid'))
2215 return this.handleAdd(ev
, nameEl
.value
);
2217 'disabled': this.map
.readonly
|| null
2221 ui
.addValidator(nameEl
, 'uciname', true, 'blur', 'keyup');
2228 renderSectionPlaceholder: function() {
2230 E('em', _('This section contains no values yet')),
2236 renderContents: function(cfgsections
, nodes
) {
2237 var section_id
= null,
2238 config_name
= this.uciconfig
|| this.map
.config
,
2239 sectionEl
= E('div', {
2240 'id': 'cbi-%s-%s'.format(config_name
, this.sectiontype
),
2241 'class': 'cbi-section',
2242 'data-tab': (this.map
.tabbed
&& !this.parentoption
) ? this.sectiontype
: null,
2243 'data-tab-title': (this.map
.tabbed
&& !this.parentoption
) ? this.title
|| this.sectiontype
: null
2246 if (this.title
!= null && this.title
!= '')
2247 sectionEl
.appendChild(E('h3', {}, this.title
));
2249 if (this.description
!= null && this.description
!= '')
2250 sectionEl
.appendChild(E('div', { 'class': 'cbi-section-descr' }, this.description
));
2252 for (var i
= 0; i
< nodes
.length
; i
++) {
2253 if (this.addremove
) {
2254 sectionEl
.appendChild(
2255 E('div', { 'class': 'cbi-section-remove right' },
2257 'class': 'cbi-button',
2258 'name': 'cbi.rts.%s.%s'.format(config_name
, cfgsections
[i
]),
2259 'data-section-id': cfgsections
[i
],
2260 'click': ui
.createHandlerFn(this, 'handleRemove', cfgsections
[i
]),
2261 'disabled': this.map
.readonly
|| null
2262 }, [ _('Delete') ])));
2265 if (!this.anonymous
)
2266 sectionEl
.appendChild(E('h3', cfgsections
[i
].toUpperCase()));
2268 sectionEl
.appendChild(E('div', {
2269 'id': 'cbi-%s-%s'.format(config_name
, cfgsections
[i
]),
2271 ? 'cbi-section-node cbi-section-node-tabbed' : 'cbi-section-node',
2272 'data-section-id': cfgsections
[i
]
2276 if (nodes
.length
== 0)
2277 sectionEl
.appendChild(this.renderSectionPlaceholder());
2279 sectionEl
.appendChild(this.renderSectionAdd());
2281 dom
.bindClassInstance(sectionEl
, this);
2287 render: function() {
2288 var cfgsections
= this.cfgsections(),
2291 for (var i
= 0; i
< cfgsections
.length
; i
++)
2292 renderTasks
.push(this.renderUCISection(cfgsections
[i
]));
2294 return Promise
.all(renderTasks
).then(this.renderContents
.bind(this, cfgsections
));
2299 * @class TableSection
2300 * @memberof LuCI.form
2301 * @augments LuCI.form.TypedSection
2305 * The `TableSection` class maps all or - if `filter()` is overwritten - a
2306 * subset of the underlying UCI configuration sections of a given type.
2308 * Layout wise, the configuration section instances mapped by the section
2309 * element (sometimes referred to as "section nodes") are rendered as rows
2310 * within an HTML table element, with an optional section remove button in the
2311 * last column and a section add button below the table, depending on the
2312 * value of the `addremove` property.
2314 * @param {LuCI.form.Map|LuCI.form.JSONMap} form
2315 * The configuration form this section is added to. It is automatically passed
2316 * by [section()]{@link LuCI.form.Map#section}.
2318 * @param {string} section_type
2319 * The type of the UCI section to map.
2321 * @param {string} [title]
2322 * The title caption of the form section element.
2324 * @param {string} [description]
2325 * The description text of the form section element.
2327 var CBITableSection
= CBITypedSection
.extend(/** @lends LuCI.form.TableSection.prototype */ {
2328 __name__
: 'CBI.TableSection',
2331 * If set to `true`, the user may add or remove instances from the form
2332 * section widget, otherwise only preexisting sections may be edited.
2333 * The default is `false`.
2335 * @name LuCI.form.TableSection.prototype#addremove
2341 * If set to `true`, mapped section instances are treated as anonymous
2342 * UCI sections, which means that section instance elements will be
2343 * rendered without title element and that no name is required when adding
2344 * new sections. The default is `false`.
2346 * @name LuCI.form.TableSection.prototype#anonymous
2352 * Override the caption used for the section add button at the bottom of
2353 * the section form element. If set to a string, it will be used as-is,
2354 * if set to a function, the function will be invoked and its return value
2355 * is used as caption, after converting it to a string. If this property
2356 * is not set, the default is `Add`.
2358 * @name LuCI.form.TableSection.prototype#addbtntitle
2359 * @type string|function
2364 * Override the per-section instance title caption shown in the first
2365 * column of the table unless `anonymous` is set to true. If set to a
2366 * string, it will be used as `String.format()` pattern with the name of
2367 * the underlying UCI section as first argument, if set to a function, the
2368 * function will be invoked with the section name as first argument and
2369 * its return value is used as caption, after converting it to a string.
2370 * If this property is not set, the default is the name of the underlying
2371 * UCI configuration section.
2373 * @name LuCI.form.TableSection.prototype#sectiontitle
2374 * @type string|function
2379 * Override the per-section instance modal popup title caption shown when
2380 * clicking the `More…` button in a section specifying `max_cols`. If set
2381 * to a string, it will be used as `String.format()` pattern with the name
2382 * of the underlying UCI section as first argument, if set to a function,
2383 * the function will be invoked with the section name as first argument and
2384 * its return value is used as caption, after converting it to a string.
2385 * If this property is not set, the default is the name of the underlying
2386 * UCI configuration section.
2388 * @name LuCI.form.TableSection.prototype#modaltitle
2389 * @type string|function
2394 * Override the UCI configuration name to read the section IDs from. By
2395 * default, the configuration name is inherited from the parent `Map`.
2396 * By setting this property, a deviating configuration may be specified.
2397 * The default is `null`, means inheriting from the parent form.
2399 * @name LuCI.form.TableSection.prototype#uciconfig
2405 * Specify a maximum amount of columns to display. By default, one table
2406 * column is rendered for each child option of the form section element.
2407 * When this option is set to a positive number, then no more columns than
2408 * the given amount are rendered. When the number of child options exceeds
2409 * the specified amount, a `More…` button is rendered in the last column,
2410 * opening a modal dialog presenting all options elements in `NamedSection`
2411 * style when clicked.
2413 * @name LuCI.form.TableSection.prototype#max_cols
2419 * If set to `true`, alternating `cbi-rowstyle-1` and `cbi-rowstyle-2` CSS
2420 * classes are added to the table row elements. Not all LuCI themes
2421 * implement these row style classes. The default is `false`.
2423 * @name LuCI.form.TableSection.prototype#rowcolors
2429 * Enables a per-section instance row `Edit` button which triggers a certain
2430 * action when clicked. If set to a string, the string value is used
2431 * as `String.format()` pattern with the name of the underlying UCI section
2432 * as first format argument. The result is then interpreted as URL which
2433 * LuCI will navigate to when the user clicks the edit button.
2435 * If set to a function, this function will be registered as click event
2436 * handler on the rendered edit button, receiving the section instance
2437 * name as first and the DOM click event as second argument.
2439 * @name LuCI.form.TableSection.prototype#extedit
2440 * @type string|function
2445 * If set to `true`, a sort button is added to the last column, allowing
2446 * the user to reorder the section instances mapped by the section form
2449 * @name LuCI.form.TableSection.prototype#sortable
2455 * If set to `true`, the header row with the options descriptions will
2456 * not be displayed. By default, descriptions row is automatically displayed
2457 * when at least one option has a description.
2459 * @name LuCI.form.TableSection.prototype#nodescriptions
2465 * The `TableSection` implementation does not support option tabbing, so
2466 * its implementation of `tab()` will always throw an exception when
2470 * @throws Throws an exception when invoked.
2473 throw 'Tabs are not supported by TableSection';
2477 renderContents: function(cfgsections
, nodes
) {
2478 var section_id
= null,
2479 config_name
= this.uciconfig
|| this.map
.config
,
2480 max_cols
= isNaN(this.max_cols
) ? this.children
.length
: this.max_cols
,
2481 has_more
= max_cols
< this.children
.length
,
2482 sectionEl
= E('div', {
2483 'id': 'cbi-%s-%s'.format(config_name
, this.sectiontype
),
2484 'class': 'cbi-section cbi-tblsection',
2485 'data-tab': (this.map
.tabbed
&& !this.parentoption
) ? this.sectiontype
: null,
2486 'data-tab-title': (this.map
.tabbed
&& !this.parentoption
) ? this.title
|| this.sectiontype
: null
2488 tableEl
= E('table', {
2489 'class': 'table cbi-section-table'
2492 if (this.title
!= null && this.title
!= '')
2493 sectionEl
.appendChild(E('h3', {}, this.title
));
2495 if (this.description
!= null && this.description
!= '')
2496 sectionEl
.appendChild(E('div', { 'class': 'cbi-section-descr' }, this.description
));
2498 tableEl
.appendChild(this.renderHeaderRows(max_cols
));
2500 for (var i
= 0; i
< nodes
.length
; i
++) {
2501 var sectionname
= this.titleFn('sectiontitle', cfgsections
[i
]);
2503 if (sectionname
== null)
2504 sectionname
= cfgsections
[i
];
2506 var trEl
= E('tr', {
2507 'id': 'cbi-%s-%s'.format(config_name
, cfgsections
[i
]),
2508 'class': 'tr cbi-section-table-row',
2509 'data-sid': cfgsections
[i
],
2510 'draggable': this.sortable
? true : null,
2511 'mousedown': this.sortable
? L
.bind(this.handleDragInit
, this) : null,
2512 'dragstart': this.sortable
? L
.bind(this.handleDragStart
, this) : null,
2513 'dragover': this.sortable
? L
.bind(this.handleDragOver
, this) : null,
2514 'dragenter': this.sortable
? L
.bind(this.handleDragEnter
, this) : null,
2515 'dragleave': this.sortable
? L
.bind(this.handleDragLeave
, this) : null,
2516 'dragend': this.sortable
? L
.bind(this.handleDragEnd
, this) : null,
2517 'drop': this.sortable
? L
.bind(this.handleDrop
, this) : null,
2518 'data-title': (sectionname
&& (!this.anonymous
|| this.sectiontitle
)) ? sectionname
: null,
2519 'data-section-id': cfgsections
[i
]
2522 if (this.extedit
|| this.rowcolors
)
2523 trEl
.classList
.add(!(tableEl
.childNodes
.length
% 2)
2524 ? 'cbi-rowstyle-1' : 'cbi-rowstyle-2');
2526 for (var j
= 0; j
< max_cols
&& nodes
[i
].firstChild
; j
++)
2527 trEl
.appendChild(nodes
[i
].firstChild
);
2529 trEl
.appendChild(this.renderRowActions(cfgsections
[i
], has_more
? _('More…') : null));
2530 tableEl
.appendChild(trEl
);
2533 if (nodes
.length
== 0)
2534 tableEl
.appendChild(E('tr', { 'class': 'tr cbi-section-table-row placeholder' },
2535 E('td', { 'class': 'td' },
2536 E('em', {}, _('This section contains no values yet')))));
2538 sectionEl
.appendChild(tableEl
);
2540 sectionEl
.appendChild(this.renderSectionAdd('cbi-tblsection-create'));
2542 dom
.bindClassInstance(sectionEl
, this);
2548 renderHeaderRows: function(max_cols
, has_action
) {
2549 var has_titles
= false,
2550 has_descriptions
= false,
2551 max_cols
= isNaN(this.max_cols
) ? this.children
.length
: this.max_cols
,
2552 has_more
= max_cols
< this.children
.length
,
2553 anon_class
= (!this.anonymous
|| this.sectiontitle
) ? 'named' : 'anonymous',
2556 for (var i
= 0, opt
; i
< max_cols
&& (opt
= this.children
[i
]) != null; i
++) {
2560 has_titles
= has_titles
|| !!opt
.title
;
2561 has_descriptions
= has_descriptions
|| !!opt
.description
;
2565 var trEl
= E('tr', {
2566 'class': 'tr cbi-section-table-titles ' + anon_class
,
2567 'data-title': (!this.anonymous
|| this.sectiontitle
) ? _('Name') : null
2570 for (var i
= 0, opt
; i
< max_cols
&& (opt
= this.children
[i
]) != null; i
++) {
2574 trEl
.appendChild(E('th', {
2575 'class': 'th cbi-section-table-cell',
2576 'data-widget': opt
.__name__
2579 if (opt
.width
!= null)
2580 trEl
.lastElementChild
.style
.width
=
2581 (typeof(opt
.width
) == 'number') ? opt
.width
+'px' : opt
.width
;
2584 trEl
.lastElementChild
.appendChild(E('a', {
2585 'href': opt
.titleref
,
2586 'class': 'cbi-title-ref',
2587 'title': this.titledesc
|| _('Go to relevant configuration page')
2590 dom
.content(trEl
.lastElementChild
, opt
.title
);
2593 if (this.sortable
|| this.extedit
|| this.addremove
|| has_more
|| has_action
)
2594 trEl
.appendChild(E('th', {
2595 'class': 'th cbi-section-table-cell cbi-section-actions'
2598 trEls
.appendChild(trEl
);
2601 if (has_descriptions
&& !this.nodescriptions
) {
2602 var trEl
= E('tr', {
2603 'class': 'tr cbi-section-table-descr ' + anon_class
2606 for (var i
= 0, opt
; i
< max_cols
&& (opt
= this.children
[i
]) != null; i
++) {
2610 trEl
.appendChild(E('th', {
2611 'class': 'th cbi-section-table-cell',
2612 'data-widget': opt
.__name__
2613 }, opt
.description
));
2615 if (opt
.width
!= null)
2616 trEl
.lastElementChild
.style
.width
=
2617 (typeof(opt
.width
) == 'number') ? opt
.width
+'px' : opt
.width
;
2620 if (this.sortable
|| this.extedit
|| this.addremove
|| has_more
|| has_action
)
2621 trEl
.appendChild(E('th', {
2622 'class': 'th cbi-section-table-cell cbi-section-actions'
2625 trEls
.appendChild(trEl
);
2632 renderRowActions: function(section_id
, more_label
) {
2633 var config_name
= this.uciconfig
|| this.map
.config
;
2635 if (!this.sortable
&& !this.extedit
&& !this.addremove
&& !more_label
)
2638 var tdEl
= E('td', {
2639 'class': 'td cbi-section-table-cell nowrap cbi-section-actions'
2642 if (this.sortable
) {
2643 dom
.append(tdEl
.lastElementChild
, [
2645 'title': _('Drag to reorder'),
2646 'class': 'btn cbi-button drag-handle center',
2647 'style': 'cursor:move',
2648 'disabled': this.map
.readonly
|| null
2656 if (typeof(this.extedit
) == 'function')
2657 evFn
= L
.bind(this.extedit
, this);
2658 else if (typeof(this.extedit
) == 'string')
2659 evFn
= L
.bind(function(sid
, ev
) {
2660 location
.href
= this.extedit
.format(sid
);
2661 }, this, section_id
);
2663 dom
.append(tdEl
.lastElementChild
,
2666 'class': 'cbi-button cbi-button-edit',
2673 dom
.append(tdEl
.lastElementChild
,
2675 'title': more_label
,
2676 'class': 'cbi-button cbi-button-edit',
2677 'click': ui
.createHandlerFn(this, 'renderMoreOptionsModal', section_id
)
2682 if (this.addremove
) {
2683 var btn_title
= this.titleFn('removebtntitle', section_id
);
2685 dom
.append(tdEl
.lastElementChild
,
2687 'title': btn_title
|| _('Delete'),
2688 'class': 'cbi-button cbi-button-remove',
2689 'click': ui
.createHandlerFn(this, 'handleRemove', section_id
),
2690 'disabled': this.map
.readonly
|| null
2691 }, [ btn_title
|| _('Delete') ])
2699 handleDragInit: function(ev
) {
2700 scope
.dragState
= { node
: ev
.target
};
2704 handleDragStart: function(ev
) {
2705 if (!scope
.dragState
|| !scope
.dragState
.node
.classList
.contains('drag-handle')) {
2706 scope
.dragState
= null;
2707 ev
.preventDefault();
2711 scope
.dragState
.node
= dom
.parent(scope
.dragState
.node
, '.tr');
2712 ev
.dataTransfer
.setData('text', 'drag');
2713 ev
.target
.style
.opacity
= 0.4;
2717 handleDragOver: function(ev
) {
2718 var n
= scope
.dragState
.targetNode
,
2719 r
= scope
.dragState
.rect
,
2720 t
= r
.top
+ r
.height
/ 2;
2722 if (ev
.clientY
<= t
) {
2723 n
.classList
.remove('drag-over-below');
2724 n
.classList
.add('drag-over-above');
2727 n
.classList
.remove('drag-over-above');
2728 n
.classList
.add('drag-over-below');
2731 ev
.dataTransfer
.dropEffect
= 'move';
2732 ev
.preventDefault();
2737 handleDragEnter: function(ev
) {
2738 scope
.dragState
.rect
= ev
.currentTarget
.getBoundingClientRect();
2739 scope
.dragState
.targetNode
= ev
.currentTarget
;
2743 handleDragLeave: function(ev
) {
2744 ev
.currentTarget
.classList
.remove('drag-over-above');
2745 ev
.currentTarget
.classList
.remove('drag-over-below');
2749 handleDragEnd: function(ev
) {
2752 n
.style
.opacity
= '';
2753 n
.classList
.add('flash');
2754 n
.parentNode
.querySelectorAll('.drag-over-above, .drag-over-below')
2755 .forEach(function(tr
) {
2756 tr
.classList
.remove('drag-over-above');
2757 tr
.classList
.remove('drag-over-below');
2762 handleDrop: function(ev
) {
2763 var s
= scope
.dragState
;
2765 if (s
.node
&& s
.targetNode
) {
2766 var config_name
= this.uciconfig
|| this.map
.config
,
2767 ref_node
= s
.targetNode
,
2770 if (ref_node
.classList
.contains('drag-over-below')) {
2771 ref_node
= ref_node
.nextElementSibling
;
2775 var sid1
= s
.node
.getAttribute('data-sid'),
2776 sid2
= s
.targetNode
.getAttribute('data-sid');
2778 s
.node
.parentNode
.insertBefore(s
.node
, ref_node
);
2779 this.map
.data
.move(config_name
, sid1
, sid2
, after
);
2782 scope
.dragState
= null;
2783 ev
.target
.style
.opacity
= '';
2784 ev
.stopPropagation();
2785 ev
.preventDefault();
2790 handleModalCancel: function(modalMap
, ev
) {
2791 return Promise
.resolve(ui
.hideModal());
2795 handleModalSave: function(modalMap
, ev
) {
2796 return modalMap
.save(null, true)
2797 .then(L
.bind(this.map
.load
, this.map
))
2798 .then(L
.bind(this.map
.reset
, this.map
))
2800 .catch(function() {});
2804 * Add further options to the per-section instanced modal popup.
2806 * This function may be overwritten by user code to perform additional
2807 * setup steps before displaying the more options modal which is useful to
2808 * e.g. query additional data or to inject further option elements.
2810 * The default implementation of this function does nothing.
2813 * @param {LuCI.form.NamedSection} modalSection
2814 * The `NamedSection` instance about to be rendered in the modal popup.
2816 * @param {string} section_id
2817 * The ID of the underlying UCI section the modal popup belongs to.
2820 * The DOM event emitted by clicking the `More…` button.
2822 * @returns {*|Promise<*>}
2823 * Return values of this function are ignored but if a promise is returned,
2824 * it is run to completion before the rendering is continued, allowing
2825 * custom logic to perform asynchroneous work before the modal dialog
2828 addModalOptions: function(modalSection
, section_id
, ev
) {
2833 renderMoreOptionsModal: function(section_id
, ev
) {
2834 var parent
= this.map
,
2835 title
= parent
.title
,
2837 m
= new CBIMap(this.map
.config
, null, null),
2838 s
= m
.section(CBINamedSection
, section_id
, this.sectiontype
);
2841 m
.readonly
= parent
.readonly
;
2844 s
.tab_names
= this.tab_names
;
2846 if ((name
= this.titleFn('modaltitle', section_id
)) != null)
2848 else if ((name
= this.titleFn('sectiontitle', section_id
)) != null)
2849 title
= '%s - %s'.format(parent
.title
, name
);
2850 else if (!this.anonymous
)
2851 title
= '%s - %s'.format(parent
.title
, section_id
);
2853 for (var i
= 0; i
< this.children
.length
; i
++) {
2854 var o1
= this.children
[i
];
2856 if (o1
.modalonly
=== false)
2859 var o2
= s
.option(o1
.constructor, o1
.option
, o1
.title
, o1
.description
);
2862 if (!o1
.hasOwnProperty(k
))
2879 return Promise
.resolve(this.addModalOptions(s
, section_id
, ev
)).then(L
.bind(m
.render
, m
)).then(L
.bind(function(nodes
) {
2880 ui
.showModal(title
, [
2882 E('div', { 'class': 'right' }, [
2885 'click': ui
.createHandlerFn(this, 'handleModalCancel', m
)
2886 }, [ _('Dismiss') ]), ' ',
2888 'class': 'cbi-button cbi-button-positive important',
2889 'click': ui
.createHandlerFn(this, 'handleModalSave', m
),
2890 'disabled': m
.readonly
|| null
2894 }, this)).catch(L
.error
);
2899 * @class GridSection
2900 * @memberof LuCI.form
2901 * @augments LuCI.form.TableSection
2905 * The `GridSection` class maps all or - if `filter()` is overwritten - a
2906 * subset of the underlying UCI configuration sections of a given type.
2908 * A grid section functions similar to a {@link LuCI.form.TableSection} but
2909 * supports tabbing in the modal overlay. Option elements added with
2910 * [option()]{@link LuCI.form.GridSection#option} are shown in the table while
2911 * elements added with [taboption()]{@link LuCI.form.GridSection#taboption}
2912 * are displayed in the modal popup.
2914 * Another important difference is that the table cells show a readonly text
2915 * preview of the corresponding option elements by default, unless the child
2916 * option element is explicitely made writable by setting the `editable`
2917 * property to `true`.
2919 * Additionally, the grid section honours a `modalonly` property of child
2920 * option elements. Refer to the [AbstractValue]{@link LuCI.form.AbstractValue}
2921 * documentation for details.
2923 * Layout wise, a grid section looks mostly identical to table sections.
2925 * @param {LuCI.form.Map|LuCI.form.JSONMap} form
2926 * The configuration form this section is added to. It is automatically passed
2927 * by [section()]{@link LuCI.form.Map#section}.
2929 * @param {string} section_type
2930 * The type of the UCI section to map.
2932 * @param {string} [title]
2933 * The title caption of the form section element.
2935 * @param {string} [description]
2936 * The description text of the form section element.
2938 var CBIGridSection
= CBITableSection
.extend(/** @lends LuCI.form.GridSection.prototype */ {
2940 * Add an option tab to the section.
2942 * The modal option elements of a grid section may be divided into multiple
2943 * tabs to provide a better overview to the user.
2945 * Before options can be moved into a tab pane, the corresponding tab
2946 * has to be defined first, which is done by calling this function.
2948 * Note that tabs are only effective in modal popups, options added with
2949 * `option()` will not be assigned to a specific tab and are rendered in
2950 * the table view only.
2952 * @param {string} name
2953 * The name of the tab to register. It may be freely chosen and just serves
2954 * as an identifier to differentiate tabs.
2956 * @param {string} title
2957 * The human readable caption of the tab.
2959 * @param {string} [description]
2960 * An additional description text for the corresponding tab pane. It is
2961 * displayed as text paragraph below the tab but before the tab pane
2962 * contents. If omitted, no description will be rendered.
2965 * Throws an exeption if a tab with the same `name` already exists.
2967 tab: function(name
, title
, description
) {
2968 CBIAbstractSection
.prototype.tab
.call(this, name
, title
, description
);
2972 handleAdd: function(ev
, name
) {
2973 var config_name
= this.uciconfig
|| this.map
.config
,
2974 section_id
= this.map
.data
.add(config_name
, this.sectiontype
, name
);
2976 this.addedSection
= section_id
;
2977 return this.renderMoreOptionsModal(section_id
);
2981 handleModalSave: function(/* ... */) {
2982 return this.super('handleModalSave', arguments
)
2983 .then(L
.bind(function() { this.addedSection
= null }, this));
2987 handleModalCancel: function(/* ... */) {
2988 var config_name
= this.uciconfig
|| this.map
.config
;
2990 if (this.addedSection
!= null) {
2991 this.map
.data
.remove(config_name
, this.addedSection
);
2992 this.addedSection
= null;
2995 return this.super('handleModalCancel', arguments
);
2999 renderUCISection: function(section_id
) {
3000 return this.renderOptions(null, section_id
);
3004 renderChildren: function(tab_name
, section_id
, in_table
) {
3005 var tasks
= [], index
= 0;
3007 for (var i
= 0, opt
; (opt
= this.children
[i
]) != null; i
++) {
3008 if (opt
.disable
|| opt
.modalonly
)
3012 tasks
.push(opt
.render(index
++, section_id
, in_table
));
3014 tasks
.push(this.renderTextValue(section_id
, opt
));
3017 return Promise
.all(tasks
);
3021 renderTextValue: function(section_id
, opt
) {
3022 var title
= this.stripTags(opt
.title
).trim(),
3023 descr
= this.stripTags(opt
.description
).trim(),
3024 value
= opt
.textvalue(section_id
);
3027 'class': 'td cbi-value-field',
3028 'data-title': (title
!= '') ? title
: null,
3029 'data-description': (descr
!= '') ? descr
: null,
3030 'data-name': opt
.option
,
3031 'data-widget': opt
.typename
|| opt
.__name__
3032 }, (value
!= null) ? value
: E('em', _('none')));
3036 renderHeaderRows: function(section_id
) {
3037 return this.super('renderHeaderRows', [ NaN
, true ]);
3041 renderRowActions: function(section_id
) {
3042 return this.super('renderRowActions', [ section_id
, _('Edit') ]);
3047 var section_ids
= this.cfgsections(),
3050 if (Array
.isArray(this.children
)) {
3051 for (var i
= 0; i
< section_ids
.length
; i
++) {
3052 for (var j
= 0; j
< this.children
.length
; j
++) {
3053 if (!this.children
[j
].editable
|| this.children
[j
].modalonly
)
3056 tasks
.push(this.children
[j
].parse(section_ids
[i
]));
3061 return Promise
.all(tasks
);
3066 * @class NamedSection
3067 * @memberof LuCI.form
3068 * @augments LuCI.form.AbstractSection
3072 * The `NamedSection` class maps exactly one UCI section instance which is
3073 * specified when constructing the class instance.
3075 * Layout and functionality wise, a named section is essentially a
3076 * `TypedSection` which allows exactly one section node.
3078 * @param {LuCI.form.Map|LuCI.form.JSONMap} form
3079 * The configuration form this section is added to. It is automatically passed
3080 * by [section()]{@link LuCI.form.Map#section}.
3082 * @param {string} section_id
3083 * The name (ID) of the UCI section to map.
3085 * @param {string} section_type
3086 * The type of the UCI section to map.
3088 * @param {string} [title]
3089 * The title caption of the form section element.
3091 * @param {string} [description]
3092 * The description text of the form section element.
3094 var CBINamedSection
= CBIAbstractSection
.extend(/** @lends LuCI.form.NamedSection.prototype */ {
3095 __name__
: 'CBI.NamedSection',
3096 __init__: function(map
, section_id
/*, ... */) {
3097 this.super('__init__', this.varargs(arguments
, 2, map
));
3099 this.section
= section_id
;
3103 * If set to `true`, the user may remove or recreate the sole mapped
3104 * configuration instance from the form section widget, otherwise only a
3105 * preexisting section may be edited. The default is `false`.
3107 * @name LuCI.form.NamedSection.prototype#addremove
3113 * Override the UCI configuration name to read the section IDs from. By
3114 * default, the configuration name is inherited from the parent `Map`.
3115 * By setting this property, a deviating configuration may be specified.
3116 * The default is `null`, means inheriting from the parent form.
3118 * @name LuCI.form.NamedSection.prototype#uciconfig
3124 * The `NamedSection` class overwrites the generic `cfgsections()`
3125 * implementation to return a one-element array containing the mapped
3126 * section ID as sole element. User code should not normally change this.
3128 * @returns {string[]}
3129 * Returns a one-element array containing the mapped section ID.
3131 cfgsections: function() {
3132 return [ this.section
];
3136 handleAdd: function(ev
) {
3137 var section_id
= this.section
,
3138 config_name
= this.uciconfig
|| this.map
.config
;
3140 this.map
.data
.add(config_name
, this.sectiontype
, section_id
);
3141 return this.map
.save(null, true);
3145 handleRemove: function(ev
) {
3146 var section_id
= this.section
,
3147 config_name
= this.uciconfig
|| this.map
.config
;
3149 this.map
.data
.remove(config_name
, section_id
);
3150 return this.map
.save(null, true);
3154 renderContents: function(data
) {
3155 var ucidata
= data
[0], nodes
= data
[1],
3156 section_id
= this.section
,
3157 config_name
= this.uciconfig
|| this.map
.config
,
3158 sectionEl
= E('div', {
3159 'id': ucidata
? null : 'cbi-%s-%s'.format(config_name
, section_id
),
3160 'class': 'cbi-section',
3161 'data-tab': (this.map
.tabbed
&& !this.parentoption
) ? this.sectiontype
: null,
3162 'data-tab-title': (this.map
.tabbed
&& !this.parentoption
) ? this.title
|| this.sectiontype
: null
3165 if (typeof(this.title
) === 'string' && this.title
!== '')
3166 sectionEl
.appendChild(E('h3', {}, this.title
));
3168 if (typeof(this.description
) === 'string' && this.description
!== '')
3169 sectionEl
.appendChild(E('div', { 'class': 'cbi-section-descr' }, this.description
));
3172 if (this.addremove
) {
3173 sectionEl
.appendChild(
3174 E('div', { 'class': 'cbi-section-remove right' },
3176 'class': 'cbi-button',
3177 'click': ui
.createHandlerFn(this, 'handleRemove'),
3178 'disabled': this.map
.readonly
|| null
3179 }, [ _('Delete') ])));
3182 sectionEl
.appendChild(E('div', {
3183 'id': 'cbi-%s-%s'.format(config_name
, section_id
),
3185 ? 'cbi-section-node cbi-section-node-tabbed' : 'cbi-section-node',
3186 'data-section-id': section_id
3189 else if (this.addremove
) {
3190 sectionEl
.appendChild(
3192 'class': 'cbi-button cbi-button-add',
3193 'click': ui
.createHandlerFn(this, 'handleAdd'),
3194 'disabled': this.map
.readonly
|| null
3198 dom
.bindClassInstance(sectionEl
, this);
3204 render: function() {
3205 var config_name
= this.uciconfig
|| this.map
.config
,
3206 section_id
= this.section
;
3208 return Promise
.all([
3209 this.map
.data
.get(config_name
, section_id
),
3210 this.renderUCISection(section_id
)
3211 ]).then(this.renderContents
.bind(this));
3217 * @memberof LuCI.form
3218 * @augments LuCI.form.AbstractValue
3222 * The `Value` class represents a simple one-line form input using the
3223 * {@link LuCI.ui.Textfield} or - in case choices are added - the
3224 * {@link LuCI.ui.Combobox} class as underlying widget.
3226 * @param {LuCI.form.Map|LuCI.form.JSONMap} form
3227 * The configuration form this section is added to. It is automatically passed
3228 * by [option()]{@link LuCI.form.AbstractSection#option} or
3229 * [taboption()]{@link LuCI.form.AbstractSection#taboption} when adding the
3230 * option to the section.
3232 * @param {LuCI.form.AbstractSection} section
3233 * The configuration section this option is added to. It is automatically passed
3234 * by [option()]{@link LuCI.form.AbstractSection#option} or
3235 * [taboption()]{@link LuCI.form.AbstractSection#taboption} when adding the
3236 * option to the section.
3238 * @param {string} option
3239 * The name of the UCI option to map.
3241 * @param {string} [title]
3242 * The title caption of the option element.
3244 * @param {string} [description]
3245 * The description text of the option element.
3247 var CBIValue
= CBIAbstractValue
.extend(/** @lends LuCI.form.Value.prototype */ {
3248 __name__
: 'CBI.Value',
3251 * If set to `true`, the field is rendered as password input, otherwise
3252 * as plain text input.
3254 * @name LuCI.form.Value.prototype#password
3260 * Set a placeholder string to use when the input field is empty.
3262 * @name LuCI.form.Value.prototype#placeholder
3268 * Add a predefined choice to the form option. By adding one or more
3269 * choices, the plain text input field is turned into a combobox widget
3270 * which prompts the user to select a predefined choice, or to enter a
3273 * @param {string} key
3274 * The choice value to add.
3276 * @param {Node|string} value
3277 * The caption for the choice value. May be a DOM node, a document fragment
3278 * or a plain text string. If omitted, the `key` value is used as caption.
3280 value: function(key
, val
) {
3281 this.keylist
= this.keylist
|| [];
3282 this.keylist
.push(String(key
));
3284 this.vallist
= this.vallist
|| [];
3285 this.vallist
.push(dom
.elem(val
) ? val
: String(val
!= null ? val
: key
));
3289 render: function(option_index
, section_id
, in_table
) {
3290 return Promise
.resolve(this.cfgvalue(section_id
))
3291 .then(this.renderWidget
.bind(this, section_id
, option_index
))
3292 .then(this.renderFrame
.bind(this, section_id
, in_table
, option_index
));
3296 handleValueChange: function(section_id
, state
, ev
) {
3297 if (typeof(this.onchange
) != 'function')
3300 var value
= this.formvalue(section_id
);
3302 if (isEqual(value
, state
.previousValue
))
3305 state
.previousValue
= value
;
3306 this.onchange
.call(this, ev
, section_id
, value
);
3310 renderFrame: function(section_id
, in_table
, option_index
, nodes
) {
3311 var config_name
= this.uciconfig
|| this.section
.uciconfig
|| this.map
.config
,
3312 depend_list
= this.transformDepList(section_id
),
3316 var title
= this.stripTags(this.title
).trim();
3317 optionEl
= E('td', {
3318 'class': 'td cbi-value-field',
3319 'data-title': (title
!= '') ? title
: null,
3320 'data-description': this.stripTags(this.description
).trim(),
3321 'data-name': this.option
,
3322 'data-widget': this.typename
|| (this.template
? this.template
.replace(/^.+\//, '') : null) || this.__name__
3324 'id': 'cbi-%s-%s-%s'.format(config_name
, section_id
, this.option
),
3325 'data-index': option_index
,
3326 'data-depends': depend_list
,
3327 'data-field': this.cbid(section_id
)
3331 optionEl
= E('div', {
3332 'class': 'cbi-value',
3333 'id': 'cbi-%s-%s-%s'.format(config_name
, section_id
, this.option
),
3334 'data-index': option_index
,
3335 'data-depends': depend_list
,
3336 'data-field': this.cbid(section_id
),
3337 'data-name': this.option
,
3338 'data-widget': this.typename
|| (this.template
? this.template
.replace(/^.+\//, '') : null) || this.__name__
3341 if (this.last_child
)
3342 optionEl
.classList
.add('cbi-value-last');
3344 if (typeof(this.title
) === 'string' && this.title
!== '') {
3345 optionEl
.appendChild(E('label', {
3346 'class': 'cbi-value-title',
3347 'for': 'widget.cbid.%s.%s.%s'.format(config_name
, section_id
, this.option
),
3348 'click': function(ev
) {
3349 var node
= ev
.currentTarget
,
3350 elem
= node
.nextElementSibling
.querySelector('#' + node
.getAttribute('for')) || node
.nextElementSibling
.querySelector('[data-widget-id="' + node
.getAttribute('for') + '"]');
3358 this.titleref
? E('a', {
3359 'class': 'cbi-title-ref',
3360 'href': this.titleref
,
3361 'title': this.titledesc
|| _('Go to relevant configuration page')
3362 }, this.title
) : this.title
));
3364 optionEl
.appendChild(E('div', { 'class': 'cbi-value-field' }));
3369 (optionEl
.lastChild
|| optionEl
).appendChild(nodes
);
3371 if (!in_table
&& typeof(this.description
) === 'string' && this.description
!== '')
3372 dom
.append(optionEl
.lastChild
|| optionEl
,
3373 E('div', { 'class': 'cbi-value-description' }, this.description
));
3375 if (depend_list
&& depend_list
.length
)
3376 optionEl
.classList
.add('hidden');
3378 optionEl
.addEventListener('widget-change',
3379 L
.bind(this.map
.checkDepends
, this.map
));
3381 optionEl
.addEventListener('widget-change',
3382 L
.bind(this.handleValueChange
, this, section_id
, {}));
3384 dom
.bindClassInstance(optionEl
, this);
3390 renderWidget: function(section_id
, option_index
, cfgvalue
) {
3391 var value
= (cfgvalue
!= null) ? cfgvalue
: this.default,
3392 choices
= this.transformChoices(),
3396 var placeholder
= (this.optional
|| this.rmempty
)
3397 ? E('em', _('unspecified')) : _('-- Please choose --');
3399 widget
= new ui
.Combobox(Array
.isArray(value
) ? value
.join(' ') : value
, choices
, {
3400 id
: this.cbid(section_id
),
3402 optional
: this.optional
|| this.rmempty
,
3403 datatype
: this.datatype
,
3404 select_placeholder
: this.placeholder
|| placeholder
,
3405 validate
: L
.bind(this.validate
, this, section_id
),
3406 disabled
: (this.readonly
!= null) ? this.readonly
: this.map
.readonly
3410 widget
= new ui
.Textfield(Array
.isArray(value
) ? value
.join(' ') : value
, {
3411 id
: this.cbid(section_id
),
3412 password
: this.password
,
3413 optional
: this.optional
|| this.rmempty
,
3414 datatype
: this.datatype
,
3415 placeholder
: this.placeholder
,
3416 validate
: L
.bind(this.validate
, this, section_id
),
3417 disabled
: (this.readonly
!= null) ? this.readonly
: this.map
.readonly
3421 return widget
.render();
3426 * @class DynamicList
3427 * @memberof LuCI.form
3428 * @augments LuCI.form.Value
3432 * The `DynamicList` class represents a multi value widget allowing the user
3433 * to enter multiple unique values, optionally selected from a set of
3434 * predefined choices. It builds upon the {@link LuCI.ui.DynamicList} widget.
3436 * @param {LuCI.form.Map|LuCI.form.JSONMap} form
3437 * The configuration form this section is added to. It is automatically passed
3438 * by [option()]{@link LuCI.form.AbstractSection#option} or
3439 * [taboption()]{@link LuCI.form.AbstractSection#taboption} when adding the
3440 * option to the section.
3442 * @param {LuCI.form.AbstractSection} section
3443 * The configuration section this option is added to. It is automatically passed
3444 * by [option()]{@link LuCI.form.AbstractSection#option} or
3445 * [taboption()]{@link LuCI.form.AbstractSection#taboption} when adding the
3446 * option to the section.
3448 * @param {string} option
3449 * The name of the UCI option to map.
3451 * @param {string} [title]
3452 * The title caption of the option element.
3454 * @param {string} [description]
3455 * The description text of the option element.
3457 var CBIDynamicList
= CBIValue
.extend(/** @lends LuCI.form.DynamicList.prototype */ {
3458 __name__
: 'CBI.DynamicList',
3461 renderWidget: function(section_id
, option_index
, cfgvalue
) {
3462 var value
= (cfgvalue
!= null) ? cfgvalue
: this.default,
3463 choices
= this.transformChoices(),
3464 items
= L
.toArray(value
);
3466 var widget
= new ui
.DynamicList(items
, choices
, {
3467 id
: this.cbid(section_id
),
3469 optional
: this.optional
|| this.rmempty
,
3470 datatype
: this.datatype
,
3471 placeholder
: this.placeholder
,
3472 validate
: L
.bind(this.validate
, this, section_id
),
3473 disabled
: (this.readonly
!= null) ? this.readonly
: this.map
.readonly
3476 return widget
.render();
3482 * @memberof LuCI.form
3483 * @augments LuCI.form.Value
3487 * The `ListValue` class implements a simple static HTML select element
3488 * allowing the user to chose a single value from a set of predefined choices.
3489 * It builds upon the {@link LuCI.ui.Select} widget.
3491 * @param {LuCI.form.Map|LuCI.form.JSONMap} form
3492 * The configuration form this section is added to. It is automatically passed
3493 * by [option()]{@link LuCI.form.AbstractSection#option} or
3494 * [taboption()]{@link LuCI.form.AbstractSection#taboption} when adding the
3495 * option to the section.
3497 * @param {LuCI.form.AbstractSection} section
3498 * The configuration section this option is added to. It is automatically passed
3499 * by [option()]{@link LuCI.form.AbstractSection#option} or
3500 * [taboption()]{@link LuCI.form.AbstractSection#taboption} when adding the
3501 * option to the section.
3503 * @param {string} option
3504 * The name of the UCI option to map.
3506 * @param {string} [title]
3507 * The title caption of the option element.
3509 * @param {string} [description]
3510 * The description text of the option element.
3512 var CBIListValue
= CBIValue
.extend(/** @lends LuCI.form.ListValue.prototype */ {
3513 __name__
: 'CBI.ListValue',
3515 __init__: function() {
3516 this.super('__init__', arguments
);
3517 this.widget
= 'select';
3518 this.orientation
= 'horizontal';
3523 * Set the size attribute of the underlying HTML select element.
3525 * @name LuCI.form.ListValue.prototype#size
3531 * Set the type of the underlying form controls.
3533 * May be one of `select` or `radio`. If set to `select`, an HTML
3534 * select element is rendered, otherwise a collection of `radio`
3537 * @name LuCI.form.ListValue.prototype#widget
3543 * Set the orientation of the underlying radio or checkbox elements.
3545 * May be one of `horizontal` or `vertical`. Only applies to non-select
3548 * @name LuCI.form.ListValue.prototype#orientation
3550 * @default horizontal
3554 renderWidget: function(section_id
, option_index
, cfgvalue
) {
3555 var choices
= this.transformChoices();
3556 var widget
= new ui
.Select((cfgvalue
!= null) ? cfgvalue
: this.default, choices
, {
3557 id
: this.cbid(section_id
),
3560 widget
: this.widget
,
3561 optional
: this.optional
,
3562 orientation
: this.orientation
,
3563 placeholder
: this.placeholder
,
3564 validate
: L
.bind(this.validate
, this, section_id
),
3565 disabled
: (this.readonly
!= null) ? this.readonly
: this.map
.readonly
3568 return widget
.render();
3574 * @memberof LuCI.form
3575 * @augments LuCI.form.Value
3579 * The `FlagValue` element builds upon the {@link LuCI.ui.Checkbox} widget to
3580 * implement a simple checkbox element.
3582 * @param {LuCI.form.Map|LuCI.form.JSONMap} form
3583 * The configuration form this section is added to. It is automatically passed
3584 * by [option()]{@link LuCI.form.AbstractSection#option} or
3585 * [taboption()]{@link LuCI.form.AbstractSection#taboption} when adding the
3586 * option to the section.
3588 * @param {LuCI.form.AbstractSection} section
3589 * The configuration section this option is added to. It is automatically passed
3590 * by [option()]{@link LuCI.form.AbstractSection#option} or
3591 * [taboption()]{@link LuCI.form.AbstractSection#taboption} when adding the
3592 * option to the section.
3594 * @param {string} option
3595 * The name of the UCI option to map.
3597 * @param {string} [title]
3598 * The title caption of the option element.
3600 * @param {string} [description]
3601 * The description text of the option element.
3603 var CBIFlagValue
= CBIValue
.extend(/** @lends LuCI.form.FlagValue.prototype */ {
3604 __name__
: 'CBI.FlagValue',
3606 __init__: function() {
3607 this.super('__init__', arguments
);
3610 this.disabled
= '0';
3611 this.default = this.disabled
;
3615 * Sets the input value to use for the checkbox checked state.
3617 * @name LuCI.form.FlagValue.prototype#enabled
3623 * Sets the input value to use for the checkbox unchecked state.
3625 * @name LuCI.form.FlagValue.prototype#disabled
3631 * Set a tooltip for the flag option.
3633 * If set to a string, it will be used as-is as a tooltip.
3635 * If set to a function, the function will be invoked and the return
3636 * value will be shown as a tooltip. If the return value of the function
3637 * is `null` no tooltip will be set.
3639 * @name LuCI.form.TypedSection.prototype#tooltip
3640 * @type string|function
3645 * Set a tooltip icon.
3647 * If set, this icon will be shown for the default one.
3648 * This could also be a png icon from the resources directory.
3650 * @name LuCI.form.TypedSection.prototype#tooltipicon
3656 renderWidget: function(section_id
, option_index
, cfgvalue
) {
3659 if (typeof(this.tooltip
) == 'function')
3660 tooltip
= this.tooltip
.apply(this, [section_id
]);
3661 else if (typeof(this.tooltip
) == 'string')
3662 tooltip
= (arguments
.length
> 1) ? ''.format
.apply(this.tooltip
, this.varargs(arguments
, 1)) : this.tooltip
;
3664 var widget
= new ui
.Checkbox((cfgvalue
!= null) ? cfgvalue
: this.default, {
3665 id
: this.cbid(section_id
),
3666 value_enabled
: this.enabled
,
3667 value_disabled
: this.disabled
,
3668 validate
: L
.bind(this.validate
, this, section_id
),
3670 tooltipicon
: this.tooltipicon
,
3671 disabled
: (this.readonly
!= null) ? this.readonly
: this.map
.readonly
3674 return widget
.render();
3678 * Query the checked state of the underlying checkbox widget and return
3679 * either the `enabled` or the `disabled` property value, depending on
3680 * the checked state.
3684 formvalue: function(section_id
) {
3685 var elem
= this.getUIElement(section_id
),
3686 checked
= elem
? elem
.isChecked() : false;
3687 return checked
? this.enabled
: this.disabled
;
3691 * Query the checked state of the underlying checkbox widget and return
3692 * either a localized `Yes` or `No` string, depending on the checked state.
3696 textvalue: function(section_id
) {
3697 var cval
= this.cfgvalue(section_id
);
3700 cval
= this.default;
3702 return (cval
== this.enabled
) ? _('Yes') : _('No');
3706 parse: function(section_id
) {
3707 if (this.isActive(section_id
)) {
3708 var fval
= this.formvalue(section_id
);
3710 if (!this.isValid(section_id
)) {
3711 var title
= this.stripTags(this.title
).trim();
3712 return Promise
.reject(new TypeError(_('Option "%s" contains an invalid input value.').format(title
|| this.option
)));
3715 if (fval
== this.default && (this.optional
|| this.rmempty
))
3716 return Promise
.resolve(this.remove(section_id
));
3718 return Promise
.resolve(this.write(section_id
, fval
));
3721 return Promise
.resolve(this.remove(section_id
));
3728 * @memberof LuCI.form
3729 * @augments LuCI.form.DynamicList
3733 * The `MultiValue` class is a modified variant of the `DynamicList` element
3734 * which leverages the {@link LuCI.ui.Dropdown} widget to implement a multi
3735 * select dropdown element.
3737 * @param {LuCI.form.Map|LuCI.form.JSONMap} form
3738 * The configuration form this section is added to. It is automatically passed
3739 * by [option()]{@link LuCI.form.AbstractSection#option} or
3740 * [taboption()]{@link LuCI.form.AbstractSection#taboption} when adding the
3741 * option to the section.
3743 * @param {LuCI.form.AbstractSection} section
3744 * The configuration section this option is added to. It is automatically passed
3745 * by [option()]{@link LuCI.form.AbstractSection#option} or
3746 * [taboption()]{@link LuCI.form.AbstractSection#taboption} when adding the
3747 * option to the section.
3749 * @param {string} option
3750 * The name of the UCI option to map.
3752 * @param {string} [title]
3753 * The title caption of the option element.
3755 * @param {string} [description]
3756 * The description text of the option element.
3758 var CBIMultiValue
= CBIDynamicList
.extend(/** @lends LuCI.form.MultiValue.prototype */ {
3759 __name__
: 'CBI.MultiValue',
3761 __init__: function() {
3762 this.super('__init__', arguments
);
3763 this.placeholder
= _('-- Please choose --');
3767 * Allows to specify the [display_items]{@link LuCI.ui.Dropdown.InitOptions}
3768 * property of the underlying dropdown widget. If omitted, the value of
3769 * the `size` property is used or `3` when `size` is unspecified as well.
3771 * @name LuCI.form.MultiValue.prototype#display_size
3777 * Allows to specify the [dropdown_items]{@link LuCI.ui.Dropdown.InitOptions}
3778 * property of the underlying dropdown widget. If omitted, the value of
3779 * the `size` property is used or `-1` when `size` is unspecified as well.
3781 * @name LuCI.form.MultiValue.prototype#dropdown_size
3787 renderWidget: function(section_id
, option_index
, cfgvalue
) {
3788 var value
= (cfgvalue
!= null) ? cfgvalue
: this.default,
3789 choices
= this.transformChoices();
3791 var widget
= new ui
.Dropdown(L
.toArray(value
), choices
, {
3792 id
: this.cbid(section_id
),
3795 optional
: this.optional
|| this.rmempty
,
3796 select_placeholder
: this.placeholder
,
3797 display_items
: this.display_size
|| this.size
|| 3,
3798 dropdown_items
: this.dropdown_size
|| this.size
|| -1,
3799 validate
: L
.bind(this.validate
, this, section_id
),
3800 disabled
: (this.readonly
!= null) ? this.readonly
: this.map
.readonly
3803 return widget
.render();
3809 * @memberof LuCI.form
3810 * @augments LuCI.form.Value
3814 * The `TextValue` class implements a multi-line textarea input using
3815 * {@link LuCI.ui.Textarea}.
3817 * @param {LuCI.form.Map|LuCI.form.JSONMap} form
3818 * The configuration form this section is added to. It is automatically passed
3819 * by [option()]{@link LuCI.form.AbstractSection#option} or
3820 * [taboption()]{@link LuCI.form.AbstractSection#taboption} when adding the
3821 * option to the section.
3823 * @param {LuCI.form.AbstractSection} section
3824 * The configuration section this option is added to. It is automatically passed
3825 * by [option()]{@link LuCI.form.AbstractSection#option} or
3826 * [taboption()]{@link LuCI.form.AbstractSection#taboption} when adding the
3827 * option to the section.
3829 * @param {string} option
3830 * The name of the UCI option to map.
3832 * @param {string} [title]
3833 * The title caption of the option element.
3835 * @param {string} [description]
3836 * The description text of the option element.
3838 var CBITextValue
= CBIValue
.extend(/** @lends LuCI.form.TextValue.prototype */ {
3839 __name__
: 'CBI.TextValue',
3845 * Enforces the use of a monospace font for the textarea contents when set
3848 * @name LuCI.form.TextValue.prototype#monospace
3854 * Allows to specify the [cols]{@link LuCI.ui.Textarea.InitOptions}
3855 * property of the underlying textarea widget.
3857 * @name LuCI.form.TextValue.prototype#cols
3863 * Allows to specify the [rows]{@link LuCI.ui.Textarea.InitOptions}
3864 * property of the underlying textarea widget.
3866 * @name LuCI.form.TextValue.prototype#rows
3872 * Allows to specify the [wrap]{@link LuCI.ui.Textarea.InitOptions}
3873 * property of the underlying textarea widget.
3875 * @name LuCI.form.TextValue.prototype#wrap
3881 renderWidget: function(section_id
, option_index
, cfgvalue
) {
3882 var value
= (cfgvalue
!= null) ? cfgvalue
: this.default;
3884 var widget
= new ui
.Textarea(value
, {
3885 id
: this.cbid(section_id
),
3886 optional
: this.optional
|| this.rmempty
,
3887 placeholder
: this.placeholder
,
3888 monospace
: this.monospace
,
3892 validate
: L
.bind(this.validate
, this, section_id
),
3893 disabled
: (this.readonly
!= null) ? this.readonly
: this.map
.readonly
3896 return widget
.render();
3902 * @memberof LuCI.form
3903 * @augments LuCI.form.Value
3907 * The `DummyValue` element wraps an {@link LuCI.ui.Hiddenfield} widget and
3908 * renders the underlying UCI option or default value as readonly text.
3910 * @param {LuCI.form.Map|LuCI.form.JSONMap} form
3911 * The configuration form this section is added to. It is automatically passed
3912 * by [option()]{@link LuCI.form.AbstractSection#option} or
3913 * [taboption()]{@link LuCI.form.AbstractSection#taboption} when adding the
3914 * option to the section.
3916 * @param {LuCI.form.AbstractSection} section
3917 * The configuration section this option is added to. It is automatically passed
3918 * by [option()]{@link LuCI.form.AbstractSection#option} or
3919 * [taboption()]{@link LuCI.form.AbstractSection#taboption} when adding the
3920 * option to the section.
3922 * @param {string} option
3923 * The name of the UCI option to map.
3925 * @param {string} [title]
3926 * The title caption of the option element.
3928 * @param {string} [description]
3929 * The description text of the option element.
3931 var CBIDummyValue
= CBIValue
.extend(/** @lends LuCI.form.DummyValue.prototype */ {
3932 __name__
: 'CBI.DummyValue',
3935 * Set an URL which is opened when clicking on the dummy value text.
3937 * By setting this property, the dummy value text is wrapped in an `<a>`
3938 * element with the property value used as `href` attribute.
3940 * @name LuCI.form.DummyValue.prototype#href
3946 * Treat the UCI option value (or the `default` property value) as HTML.
3948 * By default, the value text is HTML escaped before being rendered as
3949 * text. In some cases it may be needed to actually interpret and render
3950 * HTML contents as-is. When set to `true`, HTML escaping is disabled.
3952 * @name LuCI.form.DummyValue.prototype#rawhtml
3958 renderWidget: function(section_id
, option_index
, cfgvalue
) {
3959 var value
= (cfgvalue
!= null) ? cfgvalue
: this.default,
3960 hiddenEl
= new ui
.Hiddenfield(value
, { id
: this.cbid(section_id
) }),
3961 outputEl
= E('div');
3963 if (this.href
&& !((this.readonly
!= null) ? this.readonly
: this.map
.readonly
))
3964 outputEl
.appendChild(E('a', { 'href': this.href
}));
3966 dom
.append(outputEl
.lastChild
|| outputEl
,
3967 this.rawhtml
? value
: [ value
]);
3976 remove: function() {},
3979 write: function() {}
3983 * @class ButtonValue
3984 * @memberof LuCI.form
3985 * @augments LuCI.form.Value
3989 * The `DummyValue` element wraps an {@link LuCI.ui.Hiddenfield} widget and
3990 * renders the underlying UCI option or default value as readonly text.
3992 * @param {LuCI.form.Map|LuCI.form.JSONMap} form
3993 * The configuration form this section is added to. It is automatically passed
3994 * by [option()]{@link LuCI.form.AbstractSection#option} or
3995 * [taboption()]{@link LuCI.form.AbstractSection#taboption} when adding the
3996 * option to the section.
3998 * @param {LuCI.form.AbstractSection} section
3999 * The configuration section this option is added to. It is automatically passed
4000 * by [option()]{@link LuCI.form.AbstractSection#option} or
4001 * [taboption()]{@link LuCI.form.AbstractSection#taboption} when adding the
4002 * option to the section.
4004 * @param {string} option
4005 * The name of the UCI option to map.
4007 * @param {string} [title]
4008 * The title caption of the option element.
4010 * @param {string} [description]
4011 * The description text of the option element.
4013 var CBIButtonValue
= CBIValue
.extend(/** @lends LuCI.form.ButtonValue.prototype */ {
4014 __name__
: 'CBI.ButtonValue',
4017 * Override the rendered button caption.
4019 * By default, the option title - which is passed as fourth argument to the
4020 * constructor - is used as caption for the button element. When setting
4021 * this property to a string, it is used as `String.format()` pattern with
4022 * the underlying UCI section name passed as first format argument. When
4023 * set to a function, it is invoked passing the section ID as sole argument
4024 * and the resulting return value is converted to a string before being
4025 * used as button caption.
4027 * The default is `null`, means the option title is used as caption.
4029 * @name LuCI.form.ButtonValue.prototype#inputtitle
4030 * @type string|function
4035 * Override the button style class.
4037 * By setting this property, a specific `cbi-button-*` CSS class can be
4038 * selected to influence the style of the resulting button.
4040 * Suitable values which are implemented by most themes are `positive`,
4041 * `negative` and `primary`.
4043 * The default is `null`, means a neutral button styling is used.
4045 * @name LuCI.form.ButtonValue.prototype#inputstyle
4051 * Override the button click action.
4053 * By default, the underlying UCI option (or default property) value is
4054 * copied into a hidden field tied to the button element and the save
4055 * action is triggered on the parent form element.
4057 * When this property is set to a function, it is invoked instead of
4058 * performing the default actions. The handler function will receive the
4059 * DOM click element as first and the underlying configuration section ID
4060 * as second argument.
4062 * @name LuCI.form.ButtonValue.prototype#onclick
4068 renderWidget: function(section_id
, option_index
, cfgvalue
) {
4069 var value
= (cfgvalue
!= null) ? cfgvalue
: this.default,
4070 hiddenEl
= new ui
.Hiddenfield(value
, { id
: this.cbid(section_id
) }),
4071 outputEl
= E('div'),
4072 btn_title
= this.titleFn('inputtitle', section_id
) || this.titleFn('title', section_id
);
4074 if (value
!== false)
4075 dom
.content(outputEl
, [
4077 'class': 'cbi-button cbi-button-%s'.format(this.inputstyle
|| 'button'),
4078 'click': ui
.createHandlerFn(this, function(section_id
, ev
) {
4080 return this.onclick(ev
, section_id
);
4082 ev
.currentTarget
.parentNode
.nextElementSibling
.value
= value
;
4083 return this.map
.save();
4085 'disabled': ((this.readonly
!= null) ? this.readonly
: this.map
.readonly
) || null
4089 dom
.content(outputEl
, ' - ');
4099 * @class HiddenValue
4100 * @memberof LuCI.form
4101 * @augments LuCI.form.Value
4105 * The `HiddenValue` element wraps an {@link LuCI.ui.Hiddenfield} widget.
4107 * Hidden value widgets used to be necessary in legacy code which actually
4108 * submitted the underlying HTML form the server. With client side handling of
4109 * forms, there are more efficient ways to store hidden state data.
4111 * Since this widget has no visible content, the title and description values
4112 * of this form element should be set to `null` as well to avoid a broken or
4113 * distorted form layout when rendering the option element.
4115 * @param {LuCI.form.Map|LuCI.form.JSONMap} form
4116 * The configuration form this section is added to. It is automatically passed
4117 * by [option()]{@link LuCI.form.AbstractSection#option} or
4118 * [taboption()]{@link LuCI.form.AbstractSection#taboption} when adding the
4119 * option to the section.
4121 * @param {LuCI.form.AbstractSection} section
4122 * The configuration section this option is added to. It is automatically passed
4123 * by [option()]{@link LuCI.form.AbstractSection#option} or
4124 * [taboption()]{@link LuCI.form.AbstractSection#taboption} when adding the
4125 * option to the section.
4127 * @param {string} option
4128 * The name of the UCI option to map.
4130 * @param {string} [title]
4131 * The title caption of the option element.
4133 * @param {string} [description]
4134 * The description text of the option element.
4136 var CBIHiddenValue
= CBIValue
.extend(/** @lends LuCI.form.HiddenValue.prototype */ {
4137 __name__
: 'CBI.HiddenValue',
4140 renderWidget: function(section_id
, option_index
, cfgvalue
) {
4141 var widget
= new ui
.Hiddenfield((cfgvalue
!= null) ? cfgvalue
: this.default, {
4142 id
: this.cbid(section_id
)
4145 return widget
.render();
4151 * @memberof LuCI.form
4152 * @augments LuCI.form.Value
4156 * The `FileUpload` element wraps an {@link LuCI.ui.FileUpload} widget and
4157 * offers the ability to browse, upload and select remote files.
4159 * @param {LuCI.form.Map|LuCI.form.JSONMap} form
4160 * The configuration form this section is added to. It is automatically passed
4161 * by [option()]{@link LuCI.form.AbstractSection#option} or
4162 * [taboption()]{@link LuCI.form.AbstractSection#taboption} when adding the
4163 * option to the section.
4165 * @param {LuCI.form.AbstractSection} section
4166 * The configuration section this option is added to. It is automatically passed
4167 * by [option()]{@link LuCI.form.AbstractSection#option} or
4168 * [taboption()]{@link LuCI.form.AbstractSection#taboption} when adding the
4169 * option to the section.
4171 * @param {string} option
4172 * The name of the UCI option to map.
4174 * @param {string} [title]
4175 * The title caption of the option element.
4177 * @param {string} [description]
4178 * The description text of the option element.
4180 var CBIFileUpload
= CBIValue
.extend(/** @lends LuCI.form.FileUpload.prototype */ {
4181 __name__
: 'CBI.FileSelect',
4183 __init__: function(/* ... */) {
4184 this.super('__init__', arguments
);
4186 this.show_hidden
= false;
4187 this.enable_upload
= true;
4188 this.enable_remove
= true;
4189 this.root_directory
= '/etc/luci-uploads';
4193 * Toggle display of hidden files.
4195 * Display hidden files when rendering the remote directory listing.
4196 * Note that this is merely a cosmetic feature, hidden files are always
4197 * included in received remote file listings.
4199 * The default is `false`, means hidden files are not displayed.
4201 * @name LuCI.form.FileUpload.prototype#show_hidden
4207 * Toggle file upload functionality.
4209 * When set to `true`, the underlying widget provides a button which lets
4210 * the user select and upload local files to the remote system.
4211 * Note that this is merely a cosmetic feature, remote upload access is
4212 * controlled by the session ACL rules.
4214 * The default is `true`, means file upload functionality is displayed.
4216 * @name LuCI.form.FileUpload.prototype#enable_upload
4222 * Toggle remote file delete functionality.
4224 * When set to `true`, the underlying widget provides a buttons which let
4225 * the user delete files from remote directories. Note that this is merely
4226 * a cosmetic feature, remote delete permissions are controlled by the
4227 * session ACL rules.
4229 * The default is `true`, means file removal buttons are displayed.
4231 * @name LuCI.form.FileUpload.prototype#enable_remove
4237 * Specify the root directory for file browsing.
4239 * This property defines the topmost directory the file browser widget may
4240 * navigate to, the UI will not allow browsing directories outside this
4241 * prefix. Note that this is merely a cosmetic feature, remote file access
4242 * and directory listing permissions are controlled by the session ACL
4245 * The default is `/etc/luci-uploads`.
4247 * @name LuCI.form.FileUpload.prototype#root_directory
4249 * @default /etc/luci-uploads
4253 renderWidget: function(section_id
, option_index
, cfgvalue
) {
4254 var browserEl
= new ui
.FileUpload((cfgvalue
!= null) ? cfgvalue
: this.default, {
4255 id
: this.cbid(section_id
),
4256 name
: this.cbid(section_id
),
4257 show_hidden
: this.show_hidden
,
4258 enable_upload
: this.enable_upload
,
4259 enable_remove
: this.enable_remove
,
4260 root_directory
: this.root_directory
,
4261 disabled
: (this.readonly
!= null) ? this.readonly
: this.map
.readonly
4264 return browserEl
.render();
4269 * @class SectionValue
4270 * @memberof LuCI.form
4271 * @augments LuCI.form.Value
4275 * The `SectionValue` widget embeds a form section element within an option
4276 * element container, allowing to nest form sections into other sections.
4278 * @param {LuCI.form.Map|LuCI.form.JSONMap} form
4279 * The configuration form this section is added to. It is automatically passed
4280 * by [option()]{@link LuCI.form.AbstractSection#option} or
4281 * [taboption()]{@link LuCI.form.AbstractSection#taboption} when adding the
4282 * option to the section.
4284 * @param {LuCI.form.AbstractSection} section
4285 * The configuration section this option is added to. It is automatically passed
4286 * by [option()]{@link LuCI.form.AbstractSection#option} or
4287 * [taboption()]{@link LuCI.form.AbstractSection#taboption} when adding the
4288 * option to the section.
4290 * @param {string} option
4291 * The internal name of the option element holding the section. Since a section
4292 * container element does not read or write any configuration itself, the name
4293 * is only used internally and does not need to relate to any underlying UCI
4296 * @param {LuCI.form.AbstractSection} subsection_class
4297 * The class to use for instantiating the nested section element. Note that
4298 * the class value itself is expected here, not a class instance obtained by
4299 * calling `new`. The given class argument must be a subclass of the
4300 * `AbstractSection` class.
4302 * @param {...*} [class_args]
4303 * All further arguments are passed as-is to the subclass constructor. Refer
4304 * to the corresponding class constructor documentations for details.
4306 var CBISectionValue
= CBIValue
.extend(/** @lends LuCI.form.SectionValue.prototype */ {
4307 __name__
: 'CBI.ContainerValue',
4308 __init__: function(map
, section
, option
, cbiClass
/*, ... */) {
4309 this.super('__init__', [map
, section
, option
]);
4311 if (!CBIAbstractSection
.isSubclass(cbiClass
))
4312 throw 'Sub section must be a descendent of CBIAbstractSection';
4314 this.subsection
= cbiClass
.instantiate(this.varargs(arguments
, 4, this.map
));
4315 this.subsection
.parentoption
= this;
4319 * Access the embedded section instance.
4321 * This property holds a reference to the instantiated nested section.
4323 * @name LuCI.form.SectionValue.prototype#subsection
4324 * @type LuCI.form.AbstractSection
4329 load: function(section_id
) {
4330 return this.subsection
.load(section_id
);
4334 parse: function(section_id
) {
4335 return this.subsection
.parse(section_id
);
4339 renderWidget: function(section_id
, option_index
, cfgvalue
) {
4340 return this.subsection
.render(section_id
);
4344 checkDepends: function(section_id
) {
4345 this.subsection
.checkDepends(section_id
);
4346 return CBIValue
.prototype.checkDepends
.apply(this, [ section_id
]);
4350 * Since the section container is not rendering an own widget,
4351 * its `value()` implementation is a no-op.
4355 value: function() {},
4358 * Since the section container is not tied to any UCI configuration,
4359 * its `write()` implementation is a no-op.
4363 write: function() {},
4366 * Since the section container is not tied to any UCI configuration,
4367 * its `remove()` implementation is a no-op.
4371 remove: function() {},
4374 * Since the section container is not tied to any UCI configuration,
4375 * its `cfgvalue()` implementation will always return `null`.
4380 cfgvalue: function() { return null },
4383 * Since the section container is not tied to any UCI configuration,
4384 * its `formvalue()` implementation will always return `null`.
4389 formvalue: function() { return null }
4398 * The LuCI form class provides high level abstractions for creating creating
4399 * UCI- or JSON backed configurations forms.
4401 * To import the class in views, use `'require form'`, to import it in
4402 * external JavaScript, use `L.require("form").then(...)`.
4404 * A typical form is created by first constructing a
4405 * {@link LuCI.form.Map} or {@link LuCI.form.JSONMap} instance using `new` and
4406 * by subsequently adding sections and options to it. Finally
4407 * [render()]{@link LuCI.form.Map#render} is invoked on the instance to
4408 * assemble the HTML markup and insert it into the DOM.
4418 * m = new form.Map('example', 'Example form',
4419 * 'This is an example form mapping the contents of /etc/config/example');
4421 * s = m.section(form.NamedSection, 'first_section', 'example', 'The first section',
4422 * 'This sections maps "config example first_section" of /etc/config/example');
4424 * o = s.option(form.Flag, 'some_bool', 'A checkbox option');
4426 * o = s.option(form.ListValue, 'some_choice', 'A select element');
4427 * o.value('choice1', 'The first choice');
4428 * o.value('choice2', 'The second choice');
4430 * m.render().then(function(node) {
4431 * document.body.appendChild(node);
4435 return baseclass
.extend(/** @lends LuCI.form.prototype */ {
4437 JSONMap
: CBIJSONMap
,
4438 AbstractSection
: CBIAbstractSection
,
4439 AbstractValue
: CBIAbstractValue
,
4441 TypedSection
: CBITypedSection
,
4442 TableSection
: CBITableSection
,
4443 GridSection
: CBIGridSection
,
4444 NamedSection
: CBINamedSection
,
4447 DynamicList
: CBIDynamicList
,
4448 ListValue
: CBIListValue
,
4450 MultiValue
: CBIMultiValue
,
4451 TextValue
: CBITextValue
,
4452 DummyValue
: CBIDummyValue
,
4453 Button
: CBIButtonValue
,
4454 HiddenValue
: CBIHiddenValue
,
4455 FileUpload
: CBIFileUpload
,
4456 SectionValue
: CBISectionValue