7 var CBIJSONConfig = Class.extend({
8 __init__: function(data) {
9 data = Object.assign({}, data);
16 for (var sectiontype in data) {
17 if (!data.hasOwnProperty(sectiontype))
20 if (L.isObject(data[sectiontype])) {
21 this.data[sectiontype] = Object.assign(data[sectiontype], {
27 section_ids.push(sectiontype);
30 else 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,
60 section_ids.sort(L.bind(function(a, b) {
61 var indexA = (this.data[a]['.index'] != null) ? +this.data[a]['.index'] : 9999,
62 indexB = (this.data[b]['.index'] != null) ? +this.data[b]['.index'] : 9999;
65 return (indexA - indexB);
70 for (var i = 0; i < section_ids.length; i++)
71 this.data[section_ids[i]]['.index'] = i;
75 return Promise.resolve(this.data);
79 return Promise.resolve();
82 get: function(config, section, option) {
87 return this.data[section];
89 if (!this.data.hasOwnProperty(section))
92 var value = this.data[section][option];
94 if (Array.isArray(value))
103 set: function(config, section, option, value) {
104 if (section == null || option == null || option.charAt(0) == '.')
107 if (!this.data.hasOwnProperty(section))
111 delete this.data[section][option];
112 else if (Array.isArray(value))
113 this.data[section][option] = value;
115 this.data[section][option] = String(value);
118 unset: function(config, section, option) {
119 return this.set(config, section, option, null);
122 sections: function(config, sectiontype, callback) {
125 for (var section_id in this.data)
126 if (sectiontype == null || this.data[section_id]['.type'] == sectiontype)
127 rv.push(this.data[section_id]);
129 rv.sort(function(a, b) { return a['.index'] - b['.index'] });
131 if (typeof(callback) == 'function')
132 for (var i = 0; i < rv.length; i++)
133 callback.call(this, rv[i], rv[i]['.name']);
138 add: function(config, sectiontype, sectionname) {
139 var num_sections_type = 0, next_index = 0;
141 for (var name in this.data) {
142 num_sections_type += (this.data[name]['.type'] == sectiontype);
143 next_index = Math.max(next_index, this.data[name]['.index']);
146 var section_id = sectionname || sectiontype + num_sections_type;
148 if (!this.data.hasOwnProperty(section_id)) {
149 this.data[section_id] = {
151 '.type': sectiontype,
152 '.anonymous': (sectionname == null),
153 '.index': next_index + 1
160 remove: function(config, section) {
161 if (this.data.hasOwnProperty(section))
162 delete this.data[section];
165 resolveSID: function(config, section_id) {
169 move: function(config, section_id1, section_id2, after) {
170 return uci.move.apply(this, [config, section_id1, section_id2, after]);
174 var CBINode = Class.extend({
175 __init__: function(title, description) {
176 this.title = title || '';
177 this.description = description || '';
181 append: function(obj) {
182 this.children.push(obj);
186 var args = arguments;
187 this.children.forEach(function(child) {
188 child.parse.apply(child, args);
193 L.error('InternalError', 'Not implemented');
196 loadChildren: function(/* ... */) {
199 if (Array.isArray(this.children))
200 for (var i = 0; i < this.children.length; i++)
201 if (!this.children[i].disable)
202 tasks.push(this.children[i].load.apply(this.children[i], arguments));
204 return Promise.all(tasks);
207 renderChildren: function(tab_name /*, ... */) {
211 if (Array.isArray(this.children))
212 for (var i = 0; i < this.children.length; i++)
213 if (tab_name === null || this.children[i].tab === tab_name)
214 if (!this.children[i].disable)
215 tasks.push(this.children[i].render.apply(
216 this.children[i], this.varargs(arguments, 1, index++)));
218 return Promise.all(tasks);
221 stripTags: function(s) {
222 if (typeof(s) == 'string' && !s.match(/[<>]/))
225 var x = E('div', {}, s);
226 return x.textContent || x.innerText || '';
229 titleFn: function(attr /*, ... */) {
232 if (typeof(this[attr]) == 'function')
233 s = this[attr].apply(this, this.varargs(arguments, 1));
234 else if (typeof(this[attr]) == 'string')
235 s = (arguments.length > 1) ? ''.format.apply(this[attr], this.varargs(arguments, 1)) : this[attr];
238 s = this.stripTags(String(s)).trim();
240 if (s == null || s == '')
247 var CBIMap = CBINode.extend({
248 __init__: function(config /*, ... */) {
249 this.super('__init__', this.varargs(arguments, 1));
251 this.config = config;
252 this.parsechain = [ config ];
256 findElements: function(/* ... */) {
259 if (arguments.length == 1)
261 else if (arguments.length == 2)
262 q = '[%s="%s"]'.format(arguments[0], arguments[1]);
264 L.error('InternalError', 'Expecting one or two arguments to findElements()');
266 return this.root.querySelectorAll(q);
269 findElement: function(/* ... */) {
270 var res = this.findElements.apply(this, arguments);
271 return res.length ? res[0] : null;
274 chain: function(config) {
275 if (this.parsechain.indexOf(config) == -1)
276 this.parsechain.push(config);
279 section: function(cbiClass /*, ... */) {
280 if (!CBIAbstractSection.isSubclass(cbiClass))
281 L.error('TypeError', 'Class must be a descendent of CBIAbstractSection');
283 var obj = cbiClass.instantiate(this.varargs(arguments, 1, this));
289 return this.data.load(this.parsechain || [ this.config ])
290 .then(this.loadChildren.bind(this));
296 if (Array.isArray(this.children))
297 for (var i = 0; i < this.children.length; i++)
298 tasks.push(this.children[i].parse());
300 return Promise.all(tasks);
303 save: function(cb, silent) {
308 .then(this.data.save.bind(this.data))
309 .then(this.load.bind(this))
312 alert('Cannot save due to invalid values');
314 return Promise.reject();
315 }).finally(this.renderContents.bind(this));
319 return this.renderContents();
323 return this.load().then(this.renderContents.bind(this));
326 renderContents: function() {
327 var mapEl = this.root || (this.root = E('div', {
328 'id': 'cbi-%s'.format(this.config),
330 'cbi-dependency-check': L.bind(this.checkDepends, this)
333 L.dom.bindClassInstance(mapEl, this);
335 return this.renderChildren(null).then(L.bind(function(nodes) {
336 var initialRender = !mapEl.firstChild;
338 L.dom.content(mapEl, null);
340 if (this.title != null && this.title != '')
341 mapEl.appendChild(E('h2', { 'name': 'content' }, this.title));
343 if (this.description != null && this.description != '')
344 mapEl.appendChild(E('div', { 'class': 'cbi-map-descr' }, this.description));
347 L.dom.append(mapEl, E('div', { 'class': 'cbi-map-tabbed' }, nodes));
349 L.dom.append(mapEl, nodes);
351 if (!initialRender) {
352 mapEl.classList.remove('flash');
354 window.setTimeout(function() {
355 mapEl.classList.add('flash');
361 var tabGroups = mapEl.querySelectorAll('.cbi-map-tabbed, .cbi-section-node-tabbed');
363 for (var i = 0; i < tabGroups.length; i++)
364 ui.tabs.initTabGroup(tabGroups[i].childNodes);
370 lookupOption: function(name, section_id, config_name) {
371 var id, elem, sid, inst;
373 if (name.indexOf('.') > -1)
374 id = 'cbid.%s'.format(name);
376 id = 'cbid.%s.%s.%s'.format(config_name || this.config, section_id, name);
378 elem = this.findElement('data-field', id);
379 sid = elem ? id.split(/\./)[2] : null;
380 inst = elem ? L.dom.findClassInstance(elem) : null;
382 return (inst instanceof CBIAbstractValue) ? [ inst, sid ] : null;
385 checkDepends: function(ev, n) {
388 for (var i = 0, s = this.children[0]; (s = this.children[i]) != null; i++)
389 if (s.checkDepends(ev, n))
392 if (changed && (n || 0) < 10)
393 this.checkDepends(ev, (n || 10) + 1);
395 ui.tabs.updateTabs(ev, this.root);
398 isDependencySatisfied: function(depends, config_name, section_id) {
401 if (!Array.isArray(depends) || !depends.length)
404 for (var i = 0; i < depends.length; i++) {
408 for (var dep in depends[i]) {
409 if (dep == '!reverse') {
412 else if (dep == '!default') {
417 var res = this.lookupOption(dep, section_id, config_name),
418 val = (res && res[0].isActive(res[1])) ? res[0].formvalue(res[1]) : null;
420 istat = (istat && isEqual(val, depends[i][dep]));
432 var CBIJSONMap = CBIMap.extend({
433 __init__: function(data /*, ... */) {
434 this.super('__init__', this.varargs(arguments, 1, 'json'));
436 this.config = 'json';
437 this.parsechain = [ 'json' ];
438 this.data = new CBIJSONConfig(data);
442 var CBIAbstractSection = CBINode.extend({
443 __init__: function(map, sectionType /*, ... */) {
444 this.super('__init__', this.varargs(arguments, 2));
446 this.sectiontype = sectionType;
448 this.config = map.config;
450 this.optional = true;
451 this.addremove = false;
452 this.dynamic = false;
455 cfgsections: function() {
456 L.error('InternalError', 'Not implemented');
459 filter: function(section_id) {
464 var section_ids = this.cfgsections(),
467 if (Array.isArray(this.children))
468 for (var i = 0; i < section_ids.length; i++)
469 tasks.push(this.loadChildren(section_ids[i])
470 .then(Function.prototype.bind.call(function(section_id, set_values) {
471 for (var i = 0; i < set_values.length; i++)
472 this.children[i].cfgvalue(section_id, set_values[i]);
473 }, this, section_ids[i])));
475 return Promise.all(tasks);
479 var section_ids = this.cfgsections(),
482 if (Array.isArray(this.children))
483 for (var i = 0; i < section_ids.length; i++)
484 for (var j = 0; j < this.children.length; j++)
485 tasks.push(this.children[j].parse(section_ids[i]));
487 return Promise.all(tasks);
490 tab: function(name, title, description) {
491 if (this.tabs && this.tabs[name])
492 throw 'Tab already declared';
497 description: description,
501 this.tabs = this.tabs || [];
502 this.tabs.push(entry);
503 this.tabs[name] = entry;
505 this.tab_names = this.tab_names || [];
506 this.tab_names.push(name);
509 option: function(cbiClass /*, ... */) {
510 if (!CBIAbstractValue.isSubclass(cbiClass))
511 throw L.error('TypeError', 'Class must be a descendent of CBIAbstractValue');
513 var obj = cbiClass.instantiate(this.varargs(arguments, 1, this.map, this));
518 taboption: function(tabName /*, ... */) {
519 if (!this.tabs || !this.tabs[tabName])
520 throw L.error('ReferenceError', 'Associated tab not declared');
522 var obj = this.option.apply(this, this.varargs(arguments, 1));
524 this.tabs[tabName].children.push(obj);
528 renderUCISection: function(section_id) {
529 var renderTasks = [];
532 return this.renderOptions(null, section_id);
534 for (var i = 0; i < this.tab_names.length; i++)
535 renderTasks.push(this.renderOptions(this.tab_names[i], section_id));
537 return Promise.all(renderTasks)
538 .then(this.renderTabContainers.bind(this, section_id));
541 renderTabContainers: function(section_id, nodes) {
542 var config_name = this.uciconfig || this.map.config,
543 containerEls = E([]);
545 for (var i = 0; i < nodes.length; i++) {
546 var tab_name = this.tab_names[i],
547 tab_data = this.tabs[tab_name],
548 containerEl = E('div', {
549 'id': 'container.%s.%s.%s'.format(config_name, section_id, tab_name),
550 'data-tab': tab_name,
551 'data-tab-title': tab_data.title,
552 'data-tab-active': tab_name === this.selected_tab
555 if (tab_data.description != null && tab_data.description != '')
556 containerEl.appendChild(
557 E('div', { 'class': 'cbi-tab-descr' }, tab_data.description));
559 containerEl.appendChild(nodes[i]);
560 containerEls.appendChild(containerEl);
566 renderOptions: function(tab_name, section_id) {
567 var in_table = (this instanceof CBITableSection);
568 return this.renderChildren(tab_name, section_id, in_table).then(function(nodes) {
569 var optionEls = E([]);
570 for (var i = 0; i < nodes.length; i++)
571 optionEls.appendChild(nodes[i]);
576 checkDepends: function(ev, n) {
578 sids = this.cfgsections();
580 for (var i = 0, sid = sids[0]; (sid = sids[i]) != null; i++) {
581 for (var j = 0, o = this.children[0]; (o = this.children[j]) != null; j++) {
582 var isActive = o.isActive(sid),
583 isSatisified = o.checkDepends(sid);
585 if (isActive != isSatisified) {
586 o.setActive(sid, !isActive);
591 o.triggerValidation(sid);
600 var isEqual = function(x, y) {
601 if (x != null && y != null && typeof(x) != typeof(y))
604 if ((x == null && y != null) || (x != null && y == null))
607 if (Array.isArray(x)) {
608 if (x.length != y.length)
611 for (var i = 0; i < x.length; i++)
612 if (!isEqual(x[i], y[i]))
615 else if (typeof(x) == 'object') {
617 if (x.hasOwnProperty(k) && !y.hasOwnProperty(k))
620 if (!isEqual(x[k], y[k]))
625 if (y.hasOwnProperty(k) && !x.hasOwnProperty(k))
635 var CBIAbstractValue = CBINode.extend({
636 __init__: function(map, section, option /*, ... */) {
637 this.super('__init__', this.varargs(arguments, 3));
639 this.section = section;
640 this.option = option;
642 this.config = map.config;
649 this.optional = false;
652 depends: function(field, value) {
655 if (typeof(field) === 'string')
656 deps = {}, deps[field] = value;
660 this.deps.push(deps);
663 transformDepList: function(section_id, deplist) {
664 var list = deplist || this.deps,
667 if (Array.isArray(list)) {
668 for (var i = 0; i < list.length; i++) {
671 for (var k in list[i]) {
672 if (list[i].hasOwnProperty(k)) {
673 if (k.charAt(0) === '!')
675 else if (k.indexOf('.') !== -1)
676 dep['cbid.%s'.format(k)] = list[i][k];
678 dep['cbid.%s.%s.%s'.format(
679 this.uciconfig || this.section.uciconfig || this.map.config,
680 this.ucisection || section_id,
687 if (dep.hasOwnProperty(k)) {
698 transformChoices: function() {
699 if (!Array.isArray(this.keylist) || this.keylist.length == 0)
704 for (var i = 0; i < this.keylist.length; i++)
705 choices[this.keylist[i]] = this.vallist[i];
710 checkDepends: function(section_id) {
711 var config_name = this.uciconfig || this.section.uciconfig || this.map.config,
712 active = this.map.isDependencySatisfied(this.deps, config_name, section_id);
715 this.updateDefaultValue(section_id);
720 updateDefaultValue: function(section_id) {
721 if (!L.isObject(this.defaults))
724 var config_name = this.uciconfig || this.section.uciconfig || this.map.config,
725 cfgvalue = L.toArray(this.cfgvalue(section_id))[0],
726 default_defval = null, satisified_defval = null;
728 for (var value in this.defaults) {
729 if (!this.defaults[value] || this.defaults[value].length == 0) {
730 default_defval = value;
733 else if (this.map.isDependencySatisfied(this.defaults[value], config_name, section_id)) {
734 satisified_defval = value;
739 if (satisified_defval == null)
740 satisified_defval = default_defval;
742 var node = this.map.findElement('id', this.cbid(section_id));
743 if (node && node.getAttribute('data-changed') != 'true' && satisified_defval != null && cfgvalue == null)
744 L.dom.callClassMethod(node, 'setValue', satisified_defval);
746 this.default = satisified_defval;
749 cbid: function(section_id) {
750 if (section_id == null)
751 L.error('TypeError', 'Section ID required');
753 return 'cbid.%s.%s.%s'.format(
754 this.uciconfig || this.section.uciconfig || this.map.config,
755 section_id, this.option);
758 load: function(section_id) {
759 if (section_id == null)
760 L.error('TypeError', 'Section ID required');
762 return this.map.data.get(
763 this.uciconfig || this.section.uciconfig || this.map.config,
764 this.ucisection || section_id,
765 this.ucioption || this.option);
768 cfgvalue: function(section_id, set_value) {
769 if (section_id == null)
770 L.error('TypeError', 'Section ID required');
772 if (arguments.length == 2) {
773 this.data = this.data || {};
774 this.data[section_id] = set_value;
777 return this.data ? this.data[section_id] : null;
780 formvalue: function(section_id) {
781 var node = this.map.findElement('id', this.cbid(section_id));
782 return node ? L.dom.callClassMethod(node, 'getValue') : null;
785 textvalue: function(section_id) {
786 var cval = this.cfgvalue(section_id);
791 return (cval != null) ? '%h'.format(cval) : null;
794 validate: function(section_id, value) {
798 isValid: function(section_id) {
799 var node = this.map.findElement('id', this.cbid(section_id));
800 return node ? L.dom.callClassMethod(node, 'isValid') : true;
803 isActive: function(section_id) {
804 var field = this.map.findElement('data-field', this.cbid(section_id));
805 return (field != null && !field.classList.contains('hidden'));
808 setActive: function(section_id, active) {
809 var field = this.map.findElement('data-field', this.cbid(section_id));
811 if (field && field.classList.contains('hidden') == active) {
812 field.classList[active ? 'remove' : 'add']('hidden');
819 triggerValidation: function(section_id) {
820 var node = this.map.findElement('id', this.cbid(section_id));
821 return node ? L.dom.callClassMethod(node, 'triggerValidation') : true;
824 parse: function(section_id) {
825 var active = this.isActive(section_id),
826 cval = this.cfgvalue(section_id),
827 fval = active ? this.formvalue(section_id) : null;
829 if (active && !this.isValid(section_id))
830 return Promise.reject();
832 if (fval != '' && fval != null) {
833 if (this.forcewrite || !isEqual(cval, fval))
834 return Promise.resolve(this.write(section_id, fval));
837 if (this.rmempty || this.optional) {
838 return Promise.resolve(this.remove(section_id));
840 else if (!isEqual(cval, fval)) {
841 console.log('This should have been catched by isValid()');
842 return Promise.reject();
846 return Promise.resolve();
849 write: function(section_id, formvalue) {
850 return this.map.data.set(
851 this.uciconfig || this.section.uciconfig || this.map.config,
852 this.ucisection || section_id,
853 this.ucioption || this.option,
857 remove: function(section_id) {
858 return this.map.data.unset(
859 this.uciconfig || this.section.uciconfig || this.map.config,
860 this.ucisection || section_id,
861 this.ucioption || this.option);
865 var CBITypedSection = CBIAbstractSection.extend({
866 __name__: 'CBI.TypedSection',
868 cfgsections: function() {
869 return this.map.data.sections(this.uciconfig || this.map.config, this.sectiontype)
870 .map(function(s) { return s['.name'] })
871 .filter(L.bind(this.filter, this));
874 handleAdd: function(ev, name) {
875 var config_name = this.uciconfig || this.map.config;
877 this.map.data.add(config_name, this.sectiontype, name);
878 return this.map.save(null, true);
881 handleRemove: function(section_id, ev) {
882 var config_name = this.uciconfig || this.map.config;
884 this.map.data.remove(config_name, section_id);
885 return this.map.save(null, true);
888 renderSectionAdd: function(extra_class) {
892 var createEl = E('div', { 'class': 'cbi-section-create' }),
893 config_name = this.uciconfig || this.map.config,
894 btn_title = this.titleFn('addbtntitle');
896 if (extra_class != null)
897 createEl.classList.add(extra_class);
899 if (this.anonymous) {
900 createEl.appendChild(E('button', {
901 'class': 'cbi-button cbi-button-add',
902 'title': btn_title || _('Add'),
903 'click': L.ui.createHandlerFn(this, 'handleAdd')
904 }, [ btn_title || _('Add') ]));
907 var nameEl = E('input', {
909 'class': 'cbi-section-create-name'
912 L.dom.append(createEl, [
913 E('div', {}, nameEl),
915 'class': 'cbi-button cbi-button-add',
917 'value': btn_title || _('Add'),
918 'title': btn_title || _('Add'),
919 'click': L.ui.createHandlerFn(this, function(ev) {
920 if (nameEl.classList.contains('cbi-input-invalid'))
923 return this.handleAdd(ev, nameEl.value);
928 ui.addValidator(nameEl, 'uciname', true, 'blur', 'keyup');
934 renderSectionPlaceholder: function() {
936 E('em', _('This section contains no values yet')),
941 renderContents: function(cfgsections, nodes) {
942 var section_id = null,
943 config_name = this.uciconfig || this.map.config,
944 sectionEl = E('div', {
945 'id': 'cbi-%s-%s'.format(config_name, this.sectiontype),
946 'class': 'cbi-section',
947 'data-tab': this.map.tabbed ? this.sectiontype : null,
948 'data-tab-title': this.map.tabbed ? this.title || this.sectiontype : null
951 if (this.title != null && this.title != '')
952 sectionEl.appendChild(E('legend', {}, this.title));
954 if (this.description != null && this.description != '')
955 sectionEl.appendChild(E('div', { 'class': 'cbi-section-descr' }, this.description));
957 for (var i = 0; i < nodes.length; i++) {
958 if (this.addremove) {
959 sectionEl.appendChild(
960 E('div', { 'class': 'cbi-section-remove right' },
962 'class': 'cbi-button',
963 'name': 'cbi.rts.%s.%s'.format(config_name, cfgsections[i]),
964 'data-section-id': cfgsections[i],
965 'click': L.ui.createHandlerFn(this, 'handleRemove', cfgsections[i])
966 }, [ _('Delete') ])));
970 sectionEl.appendChild(E('h3', cfgsections[i].toUpperCase()));
972 sectionEl.appendChild(E('div', {
973 'id': 'cbi-%s-%s'.format(config_name, cfgsections[i]),
975 ? 'cbi-section-node cbi-section-node-tabbed' : 'cbi-section-node',
976 'data-section-id': cfgsections[i]
980 if (nodes.length == 0)
981 sectionEl.appendChild(this.renderSectionPlaceholder());
983 sectionEl.appendChild(this.renderSectionAdd());
985 L.dom.bindClassInstance(sectionEl, this);
991 var cfgsections = this.cfgsections(),
994 for (var i = 0; i < cfgsections.length; i++)
995 renderTasks.push(this.renderUCISection(cfgsections[i]));
997 return Promise.all(renderTasks).then(this.renderContents.bind(this, cfgsections));
1001 var CBITableSection = CBITypedSection.extend({
1002 __name__: 'CBI.TableSection',
1005 throw 'Tabs are not supported by TableSection';
1008 renderContents: function(cfgsections, nodes) {
1009 var section_id = null,
1010 config_name = this.uciconfig || this.map.config,
1011 max_cols = isNaN(this.max_cols) ? this.children.length : this.max_cols,
1012 has_more = max_cols < this.children.length,
1013 sectionEl = E('div', {
1014 'id': 'cbi-%s-%s'.format(config_name, this.sectiontype),
1015 'class': 'cbi-section cbi-tblsection',
1016 'data-tab': this.map.tabbed ? this.sectiontype : null,
1017 'data-tab-title': this.map.tabbed ? this.title || this.sectiontype : null
1019 tableEl = E('div', {
1020 'class': 'table cbi-section-table'
1023 if (this.title != null && this.title != '')
1024 sectionEl.appendChild(E('h3', {}, this.title));
1026 if (this.description != null && this.description != '')
1027 sectionEl.appendChild(E('div', { 'class': 'cbi-section-descr' }, this.description));
1029 tableEl.appendChild(this.renderHeaderRows(max_cols));
1031 for (var i = 0; i < nodes.length; i++) {
1032 var sectionname = this.titleFn('sectiontitle', cfgsections[i]);
1034 var trEl = E('div', {
1035 'id': 'cbi-%s-%s'.format(config_name, cfgsections[i]),
1036 'class': 'tr cbi-section-table-row',
1037 'data-sid': cfgsections[i],
1038 'draggable': this.sortable ? true : null,
1039 'mousedown': this.sortable ? L.bind(this.handleDragInit, this) : null,
1040 'dragstart': this.sortable ? L.bind(this.handleDragStart, this) : null,
1041 'dragover': this.sortable ? L.bind(this.handleDragOver, this) : null,
1042 'dragenter': this.sortable ? L.bind(this.handleDragEnter, this) : null,
1043 'dragleave': this.sortable ? L.bind(this.handleDragLeave, this) : null,
1044 'dragend': this.sortable ? L.bind(this.handleDragEnd, this) : null,
1045 'drop': this.sortable ? L.bind(this.handleDrop, this) : null,
1046 'data-title': (sectionname && (!this.anonymous || this.sectiontitle)) ? sectionname : null,
1047 'data-section-id': cfgsections[i]
1050 if (this.extedit || this.rowcolors)
1051 trEl.classList.add(!(tableEl.childNodes.length % 2)
1052 ? 'cbi-rowstyle-1' : 'cbi-rowstyle-2');
1054 for (var j = 0; j < max_cols && nodes[i].firstChild; j++)
1055 trEl.appendChild(nodes[i].firstChild);
1057 trEl.appendChild(this.renderRowActions(cfgsections[i], has_more ? _('More…') : null));
1058 tableEl.appendChild(trEl);
1061 if (nodes.length == 0)
1062 tableEl.appendChild(E('div', { 'class': 'tr cbi-section-table-row placeholder' },
1063 E('div', { 'class': 'td' },
1064 E('em', {}, _('This section contains no values yet')))));
1066 sectionEl.appendChild(tableEl);
1068 sectionEl.appendChild(this.renderSectionAdd('cbi-tblsection-create'));
1070 L.dom.bindClassInstance(sectionEl, this);
1075 renderHeaderRows: function(max_cols) {
1076 var has_titles = false,
1077 has_descriptions = false,
1078 max_cols = isNaN(this.max_cols) ? this.children.length : this.max_cols,
1079 has_more = max_cols < this.children.length,
1080 anon_class = (!this.anonymous || this.sectiontitle) ? 'named' : 'anonymous',
1083 for (var i = 0, opt; i < max_cols && (opt = this.children[i]) != null; i++) {
1084 if (opt.optional || opt.modalonly)
1087 has_titles = has_titles || !!opt.title;
1088 has_descriptions = has_descriptions || !!opt.description;
1092 var trEl = E('div', {
1093 'class': 'tr cbi-section-table-titles ' + anon_class,
1094 'data-title': (!this.anonymous || this.sectiontitle) ? _('Name') : null
1097 for (var i = 0, opt; i < max_cols && (opt = this.children[i]) != null; i++) {
1098 if (opt.optional || opt.modalonly)
1101 trEl.appendChild(E('div', {
1102 'class': 'th cbi-section-table-cell',
1103 'data-type': opt.__name__
1106 if (opt.width != null)
1107 trEl.lastElementChild.style.width =
1108 (typeof(opt.width) == 'number') ? opt.width+'px' : opt.width;
1111 trEl.lastElementChild.appendChild(E('a', {
1112 'href': opt.titleref,
1113 'class': 'cbi-title-ref',
1114 'title': this.titledesc || _('Go to relevant configuration page')
1117 L.dom.content(trEl.lastElementChild, opt.title);
1120 if (this.sortable || this.extedit || this.addremove || has_more)
1121 trEl.appendChild(E('div', {
1122 'class': 'th cbi-section-table-cell cbi-section-actions'
1125 trEls.appendChild(trEl);
1128 if (has_descriptions) {
1129 var trEl = E('div', {
1130 'class': 'tr cbi-section-table-descr ' + anon_class
1133 for (var i = 0, opt; i < max_cols && (opt = this.children[i]) != null; i++) {
1134 if (opt.optional || opt.modalonly)
1137 trEl.appendChild(E('div', {
1138 'class': 'th cbi-section-table-cell',
1139 'data-type': opt.__name__
1140 }, opt.description));
1142 if (opt.width != null)
1143 trEl.lastElementChild.style.width =
1144 (typeof(opt.width) == 'number') ? opt.width+'px' : opt.width;
1147 if (this.sortable || this.extedit || this.addremove || has_more)
1148 trEl.appendChild(E('div', {
1149 'class': 'th cbi-section-table-cell cbi-section-actions'
1152 trEls.appendChild(trEl);
1158 renderRowActions: function(section_id, more_label) {
1159 var config_name = this.uciconfig || this.map.config;
1161 if (!this.sortable && !this.extedit && !this.addremove && !more_label)
1164 var tdEl = E('div', {
1165 'class': 'td cbi-section-table-cell nowrap cbi-section-actions'
1168 if (this.sortable) {
1169 L.dom.append(tdEl.lastElementChild, [
1171 'title': _('Drag to reorder'),
1172 'class': 'cbi-button drag-handle center',
1173 'style': 'cursor:move'
1181 if (typeof(this.extedit) == 'function')
1182 evFn = L.bind(this.extedit, this);
1183 else if (typeof(this.extedit) == 'string')
1184 evFn = L.bind(function(sid, ev) {
1185 location.href = this.extedit.format(sid);
1186 }, this, section_id);
1188 L.dom.append(tdEl.lastElementChild,
1191 'class': 'cbi-button cbi-button-edit',
1198 L.dom.append(tdEl.lastElementChild,
1200 'title': more_label,
1201 'class': 'cbi-button cbi-button-edit',
1202 'click': L.ui.createHandlerFn(this, 'renderMoreOptionsModal', section_id)
1207 if (this.addremove) {
1208 var btn_title = this.titleFn('removebtntitle', section_id);
1210 L.dom.append(tdEl.lastElementChild,
1212 'title': btn_title || _('Delete'),
1213 'class': 'cbi-button cbi-button-remove',
1214 'click': L.ui.createHandlerFn(this, function(sid, ev) {
1215 this.map.data.remove(config_name, sid);
1216 return this.map.save(null, true);
1218 }, [ btn_title || _('Delete') ])
1225 handleDragInit: function(ev) {
1226 scope.dragState = { node: ev.target };
1229 handleDragStart: function(ev) {
1230 if (!scope.dragState || !scope.dragState.node.classList.contains('drag-handle')) {
1231 scope.dragState = null;
1232 ev.preventDefault();
1236 scope.dragState.node = L.dom.parent(scope.dragState.node, '.tr');
1237 ev.dataTransfer.setData('text', 'drag');
1238 ev.target.style.opacity = 0.4;
1241 handleDragOver: function(ev) {
1242 var n = scope.dragState.targetNode,
1243 r = scope.dragState.rect,
1244 t = r.top + r.height / 2;
1246 if (ev.clientY <= t) {
1247 n.classList.remove('drag-over-below');
1248 n.classList.add('drag-over-above');
1251 n.classList.remove('drag-over-above');
1252 n.classList.add('drag-over-below');
1255 ev.dataTransfer.dropEffect = 'move';
1256 ev.preventDefault();
1260 handleDragEnter: function(ev) {
1261 scope.dragState.rect = ev.currentTarget.getBoundingClientRect();
1262 scope.dragState.targetNode = ev.currentTarget;
1265 handleDragLeave: function(ev) {
1266 ev.currentTarget.classList.remove('drag-over-above');
1267 ev.currentTarget.classList.remove('drag-over-below');
1270 handleDragEnd: function(ev) {
1273 n.style.opacity = '';
1274 n.classList.add('flash');
1275 n.parentNode.querySelectorAll('.drag-over-above, .drag-over-below')
1276 .forEach(function(tr) {
1277 tr.classList.remove('drag-over-above');
1278 tr.classList.remove('drag-over-below');
1282 handleDrop: function(ev) {
1283 var s = scope.dragState;
1285 if (s.node && s.targetNode) {
1286 var config_name = this.uciconfig || this.map.config,
1287 ref_node = s.targetNode,
1290 if (ref_node.classList.contains('drag-over-below')) {
1291 ref_node = ref_node.nextElementSibling;
1295 var sid1 = s.node.getAttribute('data-sid'),
1296 sid2 = s.targetNode.getAttribute('data-sid');
1298 s.node.parentNode.insertBefore(s.node, ref_node);
1299 this.map.data.move(config_name, sid1, sid2, after);
1302 scope.dragState = null;
1303 ev.target.style.opacity = '';
1304 ev.stopPropagation();
1305 ev.preventDefault();
1309 handleModalCancel: function(modalMap, ev) {
1310 return Promise.resolve(L.ui.hideModal());
1313 handleModalSave: function(modalMap, ev) {
1314 return modalMap.save()
1315 .then(L.bind(this.map.load, this.map))
1316 .then(L.bind(this.map.reset, this.map))
1317 .then(L.ui.hideModal)
1318 .catch(function() {});
1321 addModalOptions: function(modalSection, section_id, ev) {
1325 renderMoreOptionsModal: function(section_id, ev) {
1326 var parent = this.map,
1327 title = parent.title,
1329 m = new CBIMap(this.map.config, null, null),
1330 s = m.section(CBINamedSection, section_id, this.sectiontype);
1335 s.tab_names = this.tab_names;
1337 if ((name = this.titleFn('modaltitle', section_id)) != null)
1339 else if ((name = this.titleFn('sectiontitle', section_id)) != null)
1340 title = '%s - %s'.format(parent.title, name);
1341 else if (!this.anonymous)
1342 title = '%s - %s'.format(parent.title, section_id);
1344 for (var i = 0; i < this.children.length; i++) {
1345 var o1 = this.children[i];
1347 if (o1.modalonly === false)
1350 var o2 = s.option(o1.constructor, o1.option, o1.title, o1.description);
1353 if (!o1.hasOwnProperty(k))
1370 return Promise.resolve(this.addModalOptions(s, section_id, ev)).then(L.bind(m.render, m)).then(L.bind(function(nodes) {
1371 L.ui.showModal(title, [
1373 E('div', { 'class': 'right' }, [
1376 'click': L.ui.createHandlerFn(this, 'handleModalCancel', m)
1377 }, [ _('Dismiss') ]), ' ',
1379 'class': 'cbi-button cbi-button-positive important',
1380 'click': L.ui.createHandlerFn(this, 'handleModalSave', m)
1384 }, this)).catch(L.error);
1388 var CBIGridSection = CBITableSection.extend({
1389 tab: function(name, title, description) {
1390 CBIAbstractSection.prototype.tab.call(this, name, title, description);
1393 handleAdd: function(ev) {
1394 var config_name = this.uciconfig || this.map.config,
1395 section_id = this.map.data.add(config_name, this.sectiontype);
1397 this.addedSection = section_id;
1398 return this.renderMoreOptionsModal(section_id);
1401 handleModalSave: function(/* ... */) {
1402 return this.super('handleModalSave', arguments)
1403 .then(L.bind(function() { this.addedSection = null }, this));
1406 handleModalCancel: function(/* ... */) {
1407 var config_name = this.uciconfig || this.map.config;
1409 if (this.addedSection != null) {
1410 this.map.data.remove(config_name, this.addedSection);
1411 this.addedSection = null;
1414 return this.super('handleModalCancel', arguments);
1417 renderUCISection: function(section_id) {
1418 return this.renderOptions(null, section_id);
1421 renderChildren: function(tab_name, section_id, in_table) {
1422 var tasks = [], index = 0;
1424 for (var i = 0, opt; (opt = this.children[i]) != null; i++) {
1425 if (opt.disable || opt.modalonly)
1429 tasks.push(opt.render(index++, section_id, in_table));
1431 tasks.push(this.renderTextValue(section_id, opt));
1434 return Promise.all(tasks);
1437 renderTextValue: function(section_id, opt) {
1438 var title = this.stripTags(opt.title).trim(),
1439 descr = this.stripTags(opt.description).trim(),
1440 value = opt.textvalue(section_id);
1443 'class': 'td cbi-value-field',
1444 'data-title': (title != '') ? title : null,
1445 'data-description': (descr != '') ? descr : null,
1446 'data-name': opt.option,
1447 'data-type': opt.typename || opt.__name__
1448 }, (value != null) ? value : E('em', _('none')));
1451 renderRowActions: function(section_id) {
1452 return this.super('renderRowActions', [ section_id, _('Edit') ]);
1456 var section_ids = this.cfgsections(),
1459 if (Array.isArray(this.children)) {
1460 for (var i = 0; i < section_ids.length; i++) {
1461 for (var j = 0; j < this.children.length; j++) {
1462 if (!this.children[j].editable || this.children[j].modalonly)
1465 tasks.push(this.children[j].parse(section_ids[i]));
1470 return Promise.all(tasks);
1474 var CBINamedSection = CBIAbstractSection.extend({
1475 __name__: 'CBI.NamedSection',
1476 __init__: function(map, section_id /*, ... */) {
1477 this.super('__init__', this.varargs(arguments, 2, map));
1479 this.section = section_id;
1482 cfgsections: function() {
1483 return [ this.section ];
1486 handleAdd: function(ev) {
1487 var section_id = this.section,
1488 config_name = this.uciconfig || this.map.config;
1490 this.map.data.add(config_name, this.sectiontype, section_id);
1491 return this.map.save(null, true);
1494 handleRemove: function(ev) {
1495 var section_id = this.section,
1496 config_name = this.uciconfig || this.map.config;
1498 this.map.data.remove(config_name, section_id);
1499 return this.map.save(null, true);
1502 renderContents: function(data) {
1503 var ucidata = data[0], nodes = data[1],
1504 section_id = this.section,
1505 config_name = this.uciconfig || this.map.config,
1506 sectionEl = E('div', {
1507 'id': ucidata ? null : 'cbi-%s-%s'.format(config_name, section_id),
1508 'class': 'cbi-section',
1509 'data-tab': this.map.tabbed ? this.sectiontype : null,
1510 'data-tab-title': this.map.tabbed ? this.title || this.sectiontype : null
1513 if (typeof(this.title) === 'string' && this.title !== '')
1514 sectionEl.appendChild(E('legend', {}, this.title));
1516 if (typeof(this.description) === 'string' && this.description !== '')
1517 sectionEl.appendChild(E('div', { 'class': 'cbi-section-descr' }, this.description));
1520 if (this.addremove) {
1521 sectionEl.appendChild(
1522 E('div', { 'class': 'cbi-section-remove right' },
1524 'class': 'cbi-button',
1525 'click': L.ui.createHandlerFn(this, 'handleRemove')
1526 }, [ _('Delete') ])));
1529 sectionEl.appendChild(E('div', {
1530 'id': 'cbi-%s-%s'.format(config_name, section_id),
1532 ? 'cbi-section-node cbi-section-node-tabbed' : 'cbi-section-node',
1533 'data-section-id': section_id
1536 else if (this.addremove) {
1537 sectionEl.appendChild(
1539 'class': 'cbi-button cbi-button-add',
1540 'click': L.ui.createHandlerFn(this, 'handleAdd')
1544 L.dom.bindClassInstance(sectionEl, this);
1549 render: function() {
1550 var config_name = this.uciconfig || this.map.config,
1551 section_id = this.section;
1553 return Promise.all([
1554 this.map.data.get(config_name, section_id),
1555 this.renderUCISection(section_id)
1556 ]).then(this.renderContents.bind(this));
1560 var CBIValue = CBIAbstractValue.extend({
1561 __name__: 'CBI.Value',
1563 value: function(key, val) {
1564 this.keylist = this.keylist || [];
1565 this.keylist.push(String(key));
1567 this.vallist = this.vallist || [];
1568 this.vallist.push(String(val != null ? val : key));
1571 render: function(option_index, section_id, in_table) {
1572 return Promise.resolve(this.cfgvalue(section_id))
1573 .then(this.renderWidget.bind(this, section_id, option_index))
1574 .then(this.renderFrame.bind(this, section_id, in_table, option_index));
1577 renderFrame: function(section_id, in_table, option_index, nodes) {
1578 var config_name = this.uciconfig || this.section.uciconfig || this.map.config,
1579 depend_list = this.transformDepList(section_id),
1583 var title = this.stripTags(this.title).trim();
1584 optionEl = E('div', {
1585 'class': 'td cbi-value-field',
1586 'data-title': (title != '') ? title : null,
1587 'data-description': this.stripTags(this.description).trim(),
1588 'data-name': this.option,
1589 'data-type': this.typename || (this.template ? this.template.replace(/^.+\//, '') : null) || this.__name__
1591 'id': 'cbi-%s-%s-%s'.format(config_name, section_id, this.option),
1592 'data-index': option_index,
1593 'data-depends': depend_list,
1594 'data-field': this.cbid(section_id)
1598 optionEl = E('div', {
1599 'class': 'cbi-value',
1600 'id': 'cbi-%s-%s-%s'.format(config_name, section_id, this.option),
1601 'data-index': option_index,
1602 'data-depends': depend_list,
1603 'data-field': this.cbid(section_id),
1604 'data-name': this.option,
1605 'data-type': this.typename || (this.template ? this.template.replace(/^.+\//, '') : null) || this.__name__
1608 if (this.last_child)
1609 optionEl.classList.add('cbi-value-last');
1611 if (typeof(this.title) === 'string' && this.title !== '') {
1612 optionEl.appendChild(E('label', {
1613 'class': 'cbi-value-title',
1614 'for': 'widget.cbid.%s.%s.%s'.format(config_name, section_id, this.option)
1616 this.titleref ? E('a', {
1617 'class': 'cbi-title-ref',
1618 'href': this.titleref,
1619 'title': this.titledesc || _('Go to relevant configuration page')
1620 }, this.title) : this.title));
1622 optionEl.appendChild(E('div', { 'class': 'cbi-value-field' }));
1627 (optionEl.lastChild || optionEl).appendChild(nodes);
1629 if (!in_table && typeof(this.description) === 'string' && this.description !== '')
1630 L.dom.append(optionEl.lastChild || optionEl,
1631 E('div', { 'class': 'cbi-value-description' }, this.description));
1633 if (depend_list && depend_list.length)
1634 optionEl.classList.add('hidden');
1636 optionEl.addEventListener('widget-change',
1637 L.bind(this.map.checkDepends, this.map));
1639 L.dom.bindClassInstance(optionEl, this);
1644 renderWidget: function(section_id, option_index, cfgvalue) {
1645 var value = (cfgvalue != null) ? cfgvalue : this.default,
1646 choices = this.transformChoices(),
1650 var placeholder = (this.optional || this.rmempty)
1651 ? E('em', _('unspecified')) : _('-- Please choose --');
1653 widget = new ui.Combobox(Array.isArray(value) ? value.join(' ') : value, choices, {
1654 id: this.cbid(section_id),
1656 optional: this.optional || this.rmempty,
1657 datatype: this.datatype,
1658 select_placeholder: this.placeholder || placeholder,
1659 validate: L.bind(this.validate, this, section_id)
1663 widget = new ui.Textfield(Array.isArray(value) ? value.join(' ') : value, {
1664 id: this.cbid(section_id),
1665 password: this.password,
1666 optional: this.optional || this.rmempty,
1667 datatype: this.datatype,
1668 placeholder: this.placeholder,
1669 validate: L.bind(this.validate, this, section_id)
1673 return widget.render();
1677 var CBIDynamicList = CBIValue.extend({
1678 __name__: 'CBI.DynamicList',
1680 renderWidget: function(section_id, option_index, cfgvalue) {
1681 var value = (cfgvalue != null) ? cfgvalue : this.default,
1682 choices = this.transformChoices(),
1683 items = L.toArray(value);
1685 var widget = new ui.DynamicList(items, choices, {
1686 id: this.cbid(section_id),
1688 optional: this.optional || this.rmempty,
1689 datatype: this.datatype,
1690 placeholder: this.placeholder,
1691 validate: L.bind(this.validate, this, section_id)
1694 return widget.render();
1698 var CBIListValue = CBIValue.extend({
1699 __name__: 'CBI.ListValue',
1701 __init__: function() {
1702 this.super('__init__', arguments);
1703 this.widget = 'select';
1707 renderWidget: function(section_id, option_index, cfgvalue) {
1708 var choices = this.transformChoices();
1709 var widget = new ui.Select((cfgvalue != null) ? cfgvalue : this.default, choices, {
1710 id: this.cbid(section_id),
1713 optional: this.optional,
1714 placeholder: this.placeholder,
1715 validate: L.bind(this.validate, this, section_id)
1718 return widget.render();
1722 var CBIFlagValue = CBIValue.extend({
1723 __name__: 'CBI.FlagValue',
1725 __init__: function() {
1726 this.super('__init__', arguments);
1729 this.disabled = '0';
1730 this.default = this.disabled;
1733 renderWidget: function(section_id, option_index, cfgvalue) {
1734 var widget = new ui.Checkbox((cfgvalue != null) ? cfgvalue : this.default, {
1735 id: this.cbid(section_id),
1736 value_enabled: this.enabled,
1737 value_disabled: this.disabled,
1738 validate: L.bind(this.validate, this, section_id)
1741 return widget.render();
1744 formvalue: function(section_id) {
1745 var node = this.map.findElement('id', this.cbid(section_id)),
1746 checked = node ? L.dom.callClassMethod(node, 'isChecked') : false;
1748 return checked ? this.enabled : this.disabled;
1751 textvalue: function(section_id) {
1752 var cval = this.cfgvalue(section_id);
1755 cval = this.default;
1757 return (cval == this.enabled) ? _('Yes') : _('No');
1760 parse: function(section_id) {
1761 if (this.isActive(section_id)) {
1762 var fval = this.formvalue(section_id);
1764 if (!this.isValid(section_id))
1765 return Promise.reject();
1767 if (fval == this.default && (this.optional || this.rmempty))
1768 return Promise.resolve(this.remove(section_id));
1770 return Promise.resolve(this.write(section_id, fval));
1773 return Promise.resolve(this.remove(section_id));
1778 var CBIMultiValue = CBIDynamicList.extend({
1779 __name__: 'CBI.MultiValue',
1781 __init__: function() {
1782 this.super('__init__', arguments);
1783 this.placeholder = _('-- Please choose --');
1786 renderWidget: function(section_id, option_index, cfgvalue) {
1787 var value = (cfgvalue != null) ? cfgvalue : this.default,
1788 choices = this.transformChoices();
1790 var widget = new ui.Dropdown(L.toArray(value), choices, {
1791 id: this.cbid(section_id),
1794 optional: this.optional || this.rmempty,
1795 select_placeholder: this.placeholder,
1796 display_items: this.display_size || this.size || 3,
1797 dropdown_items: this.dropdown_size || this.size || -1,
1798 validate: L.bind(this.validate, this, section_id)
1801 return widget.render();
1805 var CBITextValue = CBIValue.extend({
1806 __name__: 'CBI.TextValue',
1810 renderWidget: function(section_id, option_index, cfgvalue) {
1811 var value = (cfgvalue != null) ? cfgvalue : this.default;
1813 var widget = new ui.Textarea(value, {
1814 id: this.cbid(section_id),
1815 optional: this.optional || this.rmempty,
1816 placeholder: this.placeholder,
1817 monospace: this.monospace,
1821 validate: L.bind(this.validate, this, section_id)
1824 return widget.render();
1828 var CBIDummyValue = CBIValue.extend({
1829 __name__: 'CBI.DummyValue',
1831 renderWidget: function(section_id, option_index, cfgvalue) {
1832 var value = (cfgvalue != null) ? cfgvalue : this.default,
1833 hiddenEl = new ui.Hiddenfield(value, { id: this.cbid(section_id) }),
1834 outputEl = E('div');
1837 outputEl.appendChild(E('a', { 'href': this.href }));
1839 L.dom.append(outputEl.lastChild || outputEl,
1840 this.rawhtml ? value : [ value ]);
1848 remove: function() {},
1849 write: function() {}
1852 var CBIButtonValue = CBIValue.extend({
1853 __name__: 'CBI.ButtonValue',
1855 renderWidget: function(section_id, option_index, cfgvalue) {
1856 var value = (cfgvalue != null) ? cfgvalue : this.default,
1857 hiddenEl = new ui.Hiddenfield(value, { id: this.cbid(section_id) }),
1858 outputEl = E('div'),
1859 btn_title = this.titleFn('inputtitle', section_id) || this.titleFn('title', section_id);
1861 if (value !== false)
1862 L.dom.content(outputEl, [
1864 'class': 'cbi-button cbi-button-%s'.format(this.inputstyle || 'button'),
1865 'click': L.ui.createHandlerFn(this, this.onclick || function(ev) {
1866 ev.currentTarget.parentNode.nextElementSibling.value = value;
1867 return this.map.save();
1872 L.dom.content(outputEl, ' - ');
1881 var CBIHiddenValue = CBIValue.extend({
1882 __name__: 'CBI.HiddenValue',
1884 renderWidget: function(section_id, option_index, cfgvalue) {
1885 var widget = new ui.Hiddenfield((cfgvalue != null) ? cfgvalue : this.default, {
1886 id: this.cbid(section_id)
1889 return widget.render();
1893 var CBIFileUpload = CBIValue.extend({
1894 __name__: 'CBI.FileSelect',
1896 __init__: function(/* ... */) {
1897 this.super('__init__', arguments);
1899 this.show_hidden = false;
1900 this.enable_upload = true;
1901 this.enable_remove = true;
1902 this.root_directory = '/etc/luci-uploads';
1905 renderWidget: function(section_id, option_index, cfgvalue) {
1906 var browserEl = new ui.FileUpload((cfgvalue != null) ? cfgvalue : this.default, {
1907 id: this.cbid(section_id),
1908 name: this.cbid(section_id),
1909 show_hidden: this.show_hidden,
1910 enable_upload: this.enable_upload,
1911 enable_remove: this.enable_remove,
1912 root_directory: this.root_directory
1915 return browserEl.render();
1919 var CBISectionValue = CBIValue.extend({
1920 __name__: 'CBI.ContainerValue',
1921 __init__: function(map, section, option, cbiClass /*, ... */) {
1922 this.super('__init__', [map, section, option]);
1924 if (!CBIAbstractSection.isSubclass(cbiClass))
1925 throw 'Sub section must be a descendent of CBIAbstractSection';
1927 this.subsection = cbiClass.instantiate(this.varargs(arguments, 4, this.map));
1930 load: function(section_id) {
1931 return this.subsection.load();
1934 parse: function(section_id) {
1935 return this.subsection.parse();
1938 renderWidget: function(section_id, option_index, cfgvalue) {
1939 return this.subsection.render();
1942 checkDepends: function(section_id) {
1943 this.subsection.checkDepends();
1944 return CBIValue.prototype.checkDepends.apply(this, [ section_id ]);
1947 write: function() {},
1948 remove: function() {},
1949 cfgvalue: function() { return null },
1950 formvalue: function() { return null }
1953 return L.Class.extend({
1955 JSONMap: CBIJSONMap,
1956 AbstractSection: CBIAbstractSection,
1957 AbstractValue: CBIAbstractValue,
1959 TypedSection: CBITypedSection,
1960 TableSection: CBITableSection,
1961 GridSection: CBIGridSection,
1962 NamedSection: CBINamedSection,
1965 DynamicList: CBIDynamicList,
1966 ListValue: CBIListValue,
1968 MultiValue: CBIMultiValue,
1969 TextValue: CBITextValue,
1970 DummyValue: CBIDummyValue,
1971 Button: CBIButtonValue,
1972 HiddenValue: CBIHiddenValue,
1973 FileUpload: CBIFileUpload,
1974 SectionValue: CBISectionValue