if (indexA != indexB)
return (indexA - indexB);
- return (a > b);
+ return L.naturalCompare(a, b);
}, this));
for (var i = 0; i < section_ids.length; i++)
/**
* Add another form element as children to this element.
*
- * @param {AbstractElement} element
+ * @param {AbstractElement} obj
* The form element to add.
*/
append: function(obj) {
* The `parse()` function recursively walks the form element tree and
* triggers input value reading and validation for each encountered element.
*
- * Elements which are hidden due to unsatisified dependencies are skipped.
+ * Elements which are hidden due to unsatisfied dependencies are skipped.
*
* @returns {Promise<void>}
* Returns a promise resolving once this element's value and the values of
/**
* Strip any HTML tags from the given input string.
*
- * @param {string} input
+ * @param {string} s
* The input string to clean.
*
* @returns {string}
- * The cleaned input string with HTML removes removed.
+ * The cleaned input string with HTML tags removed.
*/
stripTags: function(s) {
if (typeof(s) == 'string' && !s.match(/[<>]/))
return s;
- var x = E('div', {}, s);
- return x.textContent || x.innerText || '';
+ var x = dom.elem(s) ? s : dom.parse('<div>' + s + '</div>');
+
+ x.querySelectorAll('br').forEach(function(br) {
+ x.replaceChild(document.createTextNode('\n'), br);
+ });
+
+ return (x.textContent || x.innerText || '').replace(/([ \t]*\n)+/g, '\n');
},
/**
* @classdesc
*
* The `Map` class represents one complete form. A form usually maps one UCI
- * configuraton file and is divided into multiple sections containing multiple
+ * configuration file and is divided into multiple sections containing multiple
* fields each.
*
* It serves as main entry point into the `LuCI.form` for typical view code.
*
* @param {string} [description]
* The description text of the form which is usually rendered as text
- * paragraph below the form title and before the actual form conents.
+ * paragraph below the form title and before the actual form contents.
* If omitted, the corresponding paragraph element will not be rendered.
*/
var CBIMap = CBIAbstractElement.extend(/** @lends LuCI.form.Map.prototype */ {
* @param {LuCI.form.AbstractSection} sectionclass
* The section class to use for rendering the configuration section.
* Note that this value must be the class itself, not a class instance
- * obtained from calling `new`. It must also be a class dervied from
+ * obtained from calling `new`. It must also be a class derived from
* `LuCI.form.AbstractSection`.
*
* @param {...string} classargs
- * Additional arguments which are passed as-is to the contructor of the
+ * Additional arguments which are passed as-is to the constructor of the
* given section class. Refer to the class specific constructor
* documentation for details.
*
* The `parse()` function recursively walks the form element tree and
* triggers input value reading and validation for each child element.
*
- * Elements which are hidden due to unsatisified dependencies are skipped.
+ * Elements which are hidden due to unsatisfied dependencies are skipped.
*
* @returns {Promise<void>}
* Returns a promise resolving once the entire form completed parsing all
*
* @param {boolean} [silent=false]
* If set to `true`, trigger an alert message to the user in case saving
- * the form data failes. Otherwise fail silently.
+ * the form data failures. Otherwise fail silently.
*
* @returns {Promise<void>}
* Returns a promise resolving once the entire save operation is complete.
/**
* Find a form option element instance.
*
- * @param {string} name_or_id
+ * @param {string} name
* The name or the full ID of the option element to look up.
*
* @param {string} [section_id]
* The ID of the UCI section containing the option to look up. May be
* omitted if a full ID is passed as first argument.
*
- * @param {string} [config]
- * The name of the UCI configuration the option instance is belonging to.
+ * @param {string} [config_name]
+ * The name of the UCI configuration the option instance belongs to.
* Defaults to the main UCI configuration of the map if omitted.
*
* @returns {Array<LuCI.form.AbstractValue,string>|null}
*
* @param {string} [description]
* The description text of the form which is usually rendered as text
- * paragraph below the form title and before the actual form conents.
+ * paragraph below the form title and before the actual form contents.
* If omitted, the corresponding paragraph element will not be rendered.
*/
var CBIJSONMap = CBIMap.extend(/** @lends LuCI.form.JSONMap.prototype */ {
* triggers input value reading and validation for each encountered child
* option element.
*
- * Options which are hidden due to unsatisified dependencies are skipped.
+ * Options which are hidden due to unsatisfied dependencies are skipped.
*
* @returns {Promise<void>}
* Returns a promise resolving once the values of all child elements have
* contents. If omitted, no description will be rendered.
*
* @throws {Error}
- * Throws an exeption if a tab with the same `name` already exists.
+ * Throws an exception if a tab with the same `name` already exists.
*/
tab: function(name, title, description) {
if (this.tabs && this.tabs[name])
* @param {LuCI.form.AbstractValue} optionclass
* The option class to use for rendering the configuration option. Note
* that this value must be the class itself, not a class instance obtained
- * from calling `new`. It must also be a class dervied from
+ * from calling `new`. It must also be a class derived from
* [LuCI.form.AbstractSection]{@link LuCI.form.AbstractSection}.
*
* @param {...*} classargs
- * Additional arguments which are passed as-is to the contructor of the
+ * Additional arguments which are passed as-is to the constructor of the
* given option class. Refer to the class specific constructor
* documentation for details.
*
/**
* Add a configuration option widget to a tab of the section.
*
- * @param {string} tabname
+ * @param {string} tabName
* The name of the section tab to add the option element to.
*
* @param {LuCI.form.AbstractValue} optionclass
* The option class to use for rendering the configuration option. Note
* that this value must be the class itself, not a class instance obtained
- * from calling `new`. It must also be a class dervied from
+ * from calling `new`. It must also be a class derived from
* [LuCI.form.AbstractSection]{@link LuCI.form.AbstractSection}.
*
* @param {...*} classargs
- * Additional arguments which are passed as-is to the contructor of the
+ * Additional arguments which are passed as-is to the constructor of the
* given option class. Refer to the class specific constructor
* documentation for details.
*
this.default = null;
this.size = null;
this.optional = false;
+ this.retain = false;
},
/**
* @default false
*/
+ /**
+ * If set to `true`, the underlying ui input widget value is not cleared
+ * from the configuration on unsatisfied dependencies. The default behavior
+ * is to remove the values of all options whose dependencies are not
+ * fulfilled.
+ *
+ * @name LuCI.form.AbstractValue.prototype#retain
+ * @type boolean
+ * @default false
+ */
+
/**
* Sets a default value to use when the underlying UCI option is not set.
*
*/
/**
- * Add a dependency contraint to the option.
+ * Add a dependency constraint to the option.
*
* Dependency constraints allow making the presence of option elements
- * dependant on the current values of certain other options within the
+ * dependent on the current values of certain other options within the
* same form. An option element with unsatisfied dependencies will be
* hidden from the view and its current value is omitted when saving.
*
* a logical "and" expression.
*
* Option names may be given in "dot notation" which allows to reference
- * option elements outside of the current form section. If a name without
+ * option elements outside the current form section. If a name without
* dot is specified, it refers to an option within the same configuration
* section. If specified as <code>configname.sectionid.optionname</code>,
* options anywhere within the same form may be specified.
* </li>
* </ul>
*
- * @param {string|Object<string, string|RegExp>} optionname_or_depends
+ * @param {string|Object<string, string|RegExp>} field
* The name of the option to depend on or an object describing multiple
- * dependencies which must be satified (a logical "and" expression).
+ * dependencies which must be satisfied (a logical "and" expression).
*
- * @param {string} optionvalue|RegExp
+ * @param {string|RegExp} value
* When invoked with a plain option name as first argument, this parameter
* specifies the expected value. In case an object is passed as first
* argument, this parameter is ignored.
* validation constraints.
*/
parse: function(section_id) {
- var active = this.isActive(section_id),
- cval = this.cfgvalue(section_id),
- fval = active ? this.formvalue(section_id) : null;
+ var active = this.isActive(section_id);
if (active && !this.isValid(section_id)) {
- var title = this.stripTags(this.title).trim();
- var error = this.getValidationError(section_id);
+ var title = this.stripTags(this.title).trim(),
+ error = this.getValidationError(section_id);
+
return Promise.reject(new TypeError(
_('Option "%s" contains an invalid input value.').format(title || this.option) + ' ' + error));
}
- if (fval != '' && fval != null) {
- if (this.forcewrite || !isEqual(cval, fval))
- return Promise.resolve(this.write(section_id, fval));
- }
- else {
- if (!active || this.rmempty || this.optional) {
- return Promise.resolve(this.remove(section_id));
+ if (active) {
+ var cval = this.cfgvalue(section_id),
+ fval = this.formvalue(section_id);
+
+ if (fval == null || fval == '') {
+ if (this.rmempty || this.optional) {
+ return Promise.resolve(this.remove(section_id));
+ }
+ else {
+ var title = this.stripTags(this.title).trim();
+
+ return Promise.reject(new TypeError(
+ _('Option "%s" must not be empty.').format(title || this.option)));
+ }
}
- else if (!isEqual(cval, fval)) {
- var title = this.stripTags(this.title).trim();
- return Promise.reject(new TypeError(_('Option "%s" must not be empty.').format(title || this.option)));
+ else if (this.forcewrite || !isEqual(cval, fval)) {
+ return Promise.resolve(this.write(section_id, fval));
}
}
+ else if (!this.retain) {
+ return Promise.resolve(this.remove(section_id));
+ }
return Promise.resolve();
},
if (this.map.readonly !== true) {
ui.addValidator(nameEl, 'uciname', true, function(v) {
- var button = document.querySelector('.cbi-section-create > .cbi-button-add');
+ var button = createEl.querySelector('.cbi-section-create > .cbi-button-add');
if (v !== '') {
button.disabled = null;
return true;
/** @private */
renderSectionPlaceholder: function() {
- return E([
- E('em', _('This section contains no values yet')),
- E('br'), E('br')
- ]);
+ return E('em', _('This section contains no values yet'));
},
/** @private */
if (nodes.length == 0)
tableEl.appendChild(E('tr', { 'class': 'tr cbi-section-table-row placeholder' },
- E('td', { 'class': 'td' },
- E('em', {}, _('This section contains no values yet')))));
+ E('td', { 'class': 'td' }, this.renderSectionPlaceholder())));
sectionEl.appendChild(tableEl);
if (has_titles) {
var trEl = E('tr', {
'class': 'tr cbi-section-table-titles ' + anon_class,
- 'data-title': (!this.anonymous || this.sectiontitle) ? _('Name') : null
+ 'data-title': (!this.anonymous || this.sectiontitle) ? _('Name') : null,
+ 'click': this.sortable ? ui.createHandlerFn(this, 'handleSort') : null
});
for (var i = 0, opt; i < max_cols && (opt = this.children[i]) != null; i++) {
trEl.appendChild(E('th', {
'class': 'th cbi-section-table-cell',
- 'data-widget': opt.__name__
+ 'data-widget': opt.__name__,
+ 'data-sortable-row': this.sortable ? '' : null
}));
if (opt.width != null)
/** @private */
handleModalCancel: function(modalMap, ev) {
- var prevNode = this.getPreviousModalMap();
+ var prevNode = this.getPreviousModalMap(),
+ resetTasks = Promise.resolve();
if (prevNode) {
- var heading = prevNode.parentNode.querySelector('h4');
+ var heading = prevNode.parentNode.querySelector('h4'),
+ prevMap = dom.findClassInstance(prevNode);
+
+ while (prevMap) {
+ resetTasks = resetTasks
+ .then(L.bind(prevMap.load, prevMap))
+ .then(L.bind(prevMap.reset, prevMap));
+
+ prevMap = prevMap.parent;
+ }
prevNode.classList.add('flash');
prevNode.classList.remove('hidden');
ui.hideModal();
}
- return Promise.resolve();
+ return resetTasks;
},
/** @private */
}
return saveTasks
- .then(L.bind(this.handleModalCancel, this, modalMap, ev))
+ .then(L.bind(this.handleModalCancel, this, modalMap, ev, true))
.catch(function() {});
},
+ /** @private */
+ handleSort: function(ev) {
+ if (!ev.target.matches('th[data-sortable-row]'))
+ return;
+
+ var th = ev.target,
+ descending = (th.getAttribute('data-sort-direction') == 'desc'),
+ config_name = this.uciconfig || this.map.config,
+ index = 0,
+ list = [];
+
+ ev.currentTarget.querySelectorAll('th').forEach(function(other_th, i) {
+ if (other_th !== th)
+ other_th.removeAttribute('data-sort-direction');
+ else
+ index = i;
+ });
+
+ ev.currentTarget.parentNode.querySelectorAll('tr.cbi-section-table-row').forEach(L.bind(function(tr, i) {
+ var sid = tr.getAttribute('data-sid'),
+ opt = tr.childNodes[index].getAttribute('data-name'),
+ val = this.cfgvalue(sid, opt);
+
+ tr.querySelectorAll('.flash').forEach(function(n) {
+ n.classList.remove('flash')
+ });
+
+ list.push([
+ ui.Table.prototype.deriveSortKey((val != null) ? val.trim() : ''),
+ tr
+ ]);
+ }, this));
+
+ list.sort(function(a, b) {
+ return descending
+ ? -L.naturalCompare(a[0], b[0])
+ : L.naturalCompare(a[0], b[0]);
+ });
+
+ window.requestAnimationFrame(L.bind(function() {
+ var ref_sid, cur_sid;
+
+ for (var i = 0; i < list.length; i++) {
+ list[i][1].childNodes[index].classList.add('flash');
+ th.parentNode.parentNode.appendChild(list[i][1]);
+
+ cur_sid = list[i][1].getAttribute('data-sid');
+
+ if (ref_sid)
+ this.map.data.move(config_name, cur_sid, ref_sid, true);
+
+ ref_sid = cur_sid;
+ }
+
+ th.setAttribute('data-sort-direction', descending ? 'asc' : 'desc');
+ }, this));
+ },
+
/**
* Add further options to the per-section instanced modal popup.
*
* @returns {*|Promise<*>}
* Return values of this function are ignored but if a promise is returned,
* it is run to completion before the rendering is continued, allowing
- * custom logic to perform asynchroneous work before the modal dialog
+ * custom logic to perform asynchronous work before the modal dialog
* is shown.
*/
addModalOptions: function(modalSection, section_id, ev) {
},
/** @private */
- renderMoreOptionsModal: function(section_id, ev) {
- var parent = this.map,
- title = parent.title,
- name = null,
- m = new CBIMap(this.map.config, null, null),
- s = m.section(CBINamedSection, section_id, this.sectiontype);
+ cloneOptions: function(src_section, dest_section) {
+ for (var i = 0; i < src_section.children.length; i++) {
+ var o1 = src_section.children[i];
- m.parent = parent;
- m.readonly = parent.readonly;
+ if (o1.modalonly === false && src_section === this)
+ continue;
- s.tabs = this.tabs;
- s.tab_names = this.tab_names;
+ var o2;
- if ((name = this.titleFn('modaltitle', section_id)) != null)
- title = name;
- else if ((name = this.titleFn('sectiontitle', section_id)) != null)
- title = '%s - %s'.format(parent.title, name);
- else if (!this.anonymous)
- title = '%s - %s'.format(parent.title, section_id);
+ if (o1.subsection) {
+ o2 = dest_section.option(o1.constructor, o1.option, o1.subsection.constructor, o1.subsection.sectiontype, o1.subsection.title, o1.subsection.description);
- for (var i = 0; i < this.children.length; i++) {
- var o1 = this.children[i];
+ for (var k in o1.subsection) {
+ if (!o1.subsection.hasOwnProperty(k))
+ continue;
- if (o1.modalonly === false)
- continue;
+ switch (k) {
+ case 'map':
+ case 'children':
+ case 'parentoption':
+ continue;
+
+ default:
+ o2.subsection[k] = o1.subsection[k];
+ }
+ }
- var o2 = s.option(o1.constructor, o1.option, o1.title, o1.description);
+ this.cloneOptions(o1.subsection, o2.subsection);
+ }
+ else {
+ o2 = dest_section.option(o1.constructor, o1.option, o1.title, o1.description);
+ }
for (var k in o1) {
if (!o1.hasOwnProperty(k))
case 'option':
case 'title':
case 'description':
+ case 'subsection':
continue;
default:
}
}
}
+ },
- return Promise.resolve(this.addModalOptions(s, section_id, ev)).then(L.bind(m.render, m)).then(L.bind(function(nodes) {
- var modalMap = this.getActiveModalMap();
+ /** @private */
+ renderMoreOptionsModal: function(section_id, ev) {
+ var parent = this.map,
+ sref = parent.data.get(parent.config, section_id),
+ mapNode = this.getActiveModalMap(),
+ activeMap = mapNode ? dom.findClassInstance(mapNode) : null,
+ stackedMap = activeMap && (activeMap.parent !== parent || activeMap.section !== section_id);
- if (modalMap) {
- modalMap.parentNode
- .querySelector('h4')
- .appendChild(E('span', title ? ' » ' + title : ''));
+ return (stackedMap ? activeMap.save(null, true) : Promise.resolve()).then(L.bind(function() {
+ section_id = sref['.name'];
- modalMap.parentNode
- .querySelector('div.right > button')
- .firstChild.data = _('Back');
+ var m;
- modalMap.classList.add('hidden');
- modalMap.parentNode.insertBefore(nodes, modalMap.nextElementSibling);
- nodes.classList.add('flash');
+ if (parent instanceof CBIJSONMap) {
+ m = new CBIJSONMap(null, null, null);
+ m.data = parent.data;
}
else {
- ui.showModal(title, [
- nodes,
- E('div', { 'class': 'right' }, [
- E('button', {
- 'class': 'cbi-button',
- 'click': ui.createHandlerFn(this, 'handleModalCancel', m)
- }, [ _('Dismiss') ]), ' ',
- E('button', {
- 'class': 'cbi-button cbi-button-positive important',
- 'click': ui.createHandlerFn(this, 'handleModalSave', m),
- 'disabled': m.readonly || null
- }, [ _('Save') ])
- ])
- ], 'cbi-modal');
+ m = new CBIMap(parent.config, null, null);
}
+
+ var s = m.section(CBINamedSection, section_id, this.sectiontype);
+
+ m.parent = parent;
+ m.section = section_id;
+ m.readonly = parent.readonly;
+
+ s.tabs = this.tabs;
+ s.tab_names = this.tab_names;
+
+ this.cloneOptions(this, s);
+
+ return Promise.resolve(this.addModalOptions(s, section_id, ev)).then(function() {
+ return m.render();
+ }).then(L.bind(function(nodes) {
+ var title = parent.title,
+ name = null;
+
+ if ((name = this.titleFn('modaltitle', section_id)) != null)
+ title = name;
+ else if ((name = this.titleFn('sectiontitle', section_id)) != null)
+ title = '%s - %s'.format(parent.title, name);
+ else if (!this.anonymous)
+ title = '%s - %s'.format(parent.title, section_id);
+
+ if (stackedMap) {
+ mapNode.parentNode
+ .querySelector('h4')
+ .appendChild(E('span', title ? ' » ' + title : ''));
+
+ mapNode.parentNode
+ .querySelector('div.right > button')
+ .firstChild.data = _('Back');
+
+ mapNode.classList.add('hidden');
+ mapNode.parentNode.insertBefore(nodes, mapNode.nextElementSibling);
+
+ nodes.classList.add('flash');
+ }
+ else {
+ ui.showModal(title, [
+ nodes,
+ E('div', { 'class': 'right' }, [
+ E('button', {
+ 'class': 'cbi-button',
+ 'click': ui.createHandlerFn(this, 'handleModalCancel', m)
+ }, [ _('Dismiss') ]), ' ',
+ E('button', {
+ 'class': 'cbi-button cbi-button-positive important',
+ 'click': ui.createHandlerFn(this, 'handleModalSave', m),
+ 'disabled': m.readonly || null
+ }, [ _('Save') ])
+ ])
+ ], 'cbi-modal');
+ }
+ }, this));
}, this)).catch(L.error);
}
});
*
* Another important difference is that the table cells show a readonly text
* preview of the corresponding option elements by default, unless the child
- * option element is explicitely made writable by setting the `editable`
+ * option element is explicitly made writable by setting the `editable`
* property to `true`.
*
* Additionally, the grid section honours a `modalonly` property of child
* contents. If omitted, no description will be rendered.
*
* @throws {Error}
- * Throws an exeption if a tab with the same `name` already exists.
+ * Throws an exception if a tab with the same `name` already exists.
*/
tab: function(name, title, description) {
CBIAbstractSection.prototype.tab.call(this, name, title, description);
var mapNode = this.getPreviousModalMap(),
prevMap = mapNode ? dom.findClassInstance(mapNode) : this.map;
- return this.super('handleModalSave', arguments)
- .then(function() { delete prevMap.addedSection });
+ return this.super('handleModalSave', arguments);
},
/** @private */
- handleModalCancel: function(/* ... */) {
+ handleModalCancel: function(modalMap, ev, isSaving) {
var config_name = this.uciconfig || this.map.config,
mapNode = this.getPreviousModalMap(),
prevMap = mapNode ? dom.findClassInstance(mapNode) : this.map;
- if (prevMap.addedSection != null) {
+ if (prevMap.addedSection != null && !isSaving)
this.map.data.remove(config_name, prevMap.addedSection);
- delete prevMap.addedSection;
- }
+
+ delete prevMap.addedSection;
return this.super('handleModalCancel', arguments);
},
'data-title': (title != '') ? title : null,
'data-description': (descr != '') ? descr : null,
'data-name': opt.option,
- 'data-widget': opt.typename || opt.__name__
+ 'data-widget': 'CBI.DummyValue'
}, (value != null) ? value : E('em', _('none')));
},
* @param {string} key
* The choice value to add.
*
- * @param {Node|string} value
+ * @param {Node|string} val
* The caption for the choice value. May be a DOM node, a document fragment
* or a plain text string. If omitted, the `key` value is used as caption.
*/
if (!in_table && typeof(this.description) === 'string' && this.description !== '')
dom.append(optionEl.lastChild || optionEl,
- E('div', { 'class': 'cbi-value-description' }, this.description));
+ E('div', { 'class': 'cbi-value-description' }, this.description.trim()));
if (depend_list && depend_list.length)
optionEl.classList.add('hidden');
* @classdesc
*
* The `ListValue` class implements a simple static HTML select element
- * allowing the user to chose a single value from a set of predefined choices.
+ * allowing the user chose a single value from a set of predefined choices.
* It builds upon the {@link LuCI.ui.Select} widget.
*
* @param {LuCI.form.Map|LuCI.form.JSONMap} form
* Sets the input value to use for the checkbox checked state.
*
* @name LuCI.form.FlagValue.prototype#enabled
- * @type number
+ * @type string
* @default 1
*/
* Sets the input value to use for the checkbox unchecked state.
*
* @name LuCI.form.FlagValue.prototype#disabled
- * @type number
+ * @type string
* @default 0
*/
else
return Promise.resolve(this.write(section_id, fval));
}
- else {
+ else if (!this.retain) {
return Promise.resolve(this.remove(section_id));
}
},
__name__: 'CBI.DummyValue',
/**
- * Set an URL which is opened when clicking on the dummy value text.
+ * Set a URL which is opened when clicking on the dummy value text.
*
* By setting this property, the dummy value text is wrapped in an `<a>`
* element with the property value used as `href` attribute.
* @hideconstructor
* @classdesc
*
- * The LuCI form class provides high level abstractions for creating creating
+ * The LuCI form class provides high level abstractions for creating
* UCI- or JSON backed configurations forms.
*
* To import the class in views, use `'require form'`, to import it in
projects / project / luci.git / blobdiff