7 var CBINode = Class.extend({
8 __init__: function(title, description) {
9 this.title = title || '';
10 this.description = description || '';
14 append: function(obj) {
15 this.children.push(obj);
20 this.children.forEach(function(child) {
21 child.parse.apply(child, args);
26 L.error('InternalError', 'Not implemented');
29 loadChildren: function(/* ... */) {
32 if (Array.isArray(this.children))
33 for (var i = 0; i < this.children.length; i++)
34 if (!this.children[i].disable)
35 tasks.push(this.children[i].load.apply(this.children[i], arguments));
37 return Promise.all(tasks);
40 renderChildren: function(tab_name /*, ... */) {
44 if (Array.isArray(this.children))
45 for (var i = 0; i < this.children.length; i++)
46 if (tab_name === null || this.children[i].tab === tab_name)
47 if (!this.children[i].disable)
48 tasks.push(this.children[i].render.apply(
49 this.children[i], this.varargs(arguments, 1, index++)));
51 return Promise.all(tasks);
54 stripTags: function(s) {
58 var x = E('div', {}, s);
59 return x.textContent || x.innerText || '';
63 var CBIMap = CBINode.extend({
64 __init__: function(config /*, ... */) {
65 this.super('__init__', this.varargs(arguments, 1));
68 this.parsechain = [ config ];
71 findElements: function(/* ... */) {
74 if (arguments.length == 1)
76 else if (arguments.length == 2)
77 q = '[%s="%s"]'.format(arguments[0], arguments[1]);
79 L.error('InternalError', 'Expecting one or two arguments to findElements()');
81 return this.root.querySelectorAll(q);
84 findElement: function(/* ... */) {
85 var res = this.findElements.apply(this, arguments);
86 return res.length ? res[0] : null;
89 chain: function(config) {
90 if (this.parsechain.indexOf(config) == -1)
91 this.parsechain.push(config);
94 section: function(cbiClass /*, ... */) {
95 if (!CBIAbstractSection.isSubclass(cbiClass))
96 L.error('TypeError', 'Class must be a descendent of CBIAbstractSection');
98 var obj = cbiClass.instantiate(this.varargs(arguments, 1, this));
104 return uci.load(this.parsechain || [ this.config ])
105 .then(this.loadChildren.bind(this));
111 if (Array.isArray(this.children))
112 for (var i = 0; i < this.children.length; i++)
113 tasks.push(this.children[i].parse());
115 return Promise.all(tasks);
122 .then(uci.save.bind(uci))
123 .then(this.load.bind(this))
124 .then(this.renderContents.bind(this))
126 alert('Cannot save due to invalid values')
127 return Promise.reject();
132 return this.renderContents();
136 return this.load().then(this.renderContents.bind(this));
139 renderContents: function() {
140 var mapEl = this.root || (this.root = E('div', {
141 'id': 'cbi-%s'.format(this.config),
143 'cbi-dependency-check': L.bind(this.checkDepends, this)
146 L.dom.bindClassInstance(mapEl, this);
148 return this.renderChildren(null).then(L.bind(function(nodes) {
149 var initialRender = !mapEl.firstChild;
151 L.dom.content(mapEl, null);
153 if (this.title != null && this.title != '')
154 mapEl.appendChild(E('h2', { 'name': 'content' }, this.title));
156 if (this.description != null && this.description != '')
157 mapEl.appendChild(E('div', { 'class': 'cbi-map-descr' }, this.description));
159 L.dom.append(mapEl, nodes);
161 if (!initialRender) {
162 mapEl.classList.remove('flash');
164 window.setTimeout(function() {
165 mapEl.classList.add('flash');
175 lookupOption: function(name, section_id) {
176 var id, elem, sid, inst;
178 if (name.indexOf('.') > -1)
179 id = 'cbid.%s'.format(name);
181 id = 'cbid.%s.%s.%s'.format(this.config, section_id, name);
183 elem = this.findElement('data-field', id);
184 sid = elem ? id.split(/\./)[2] : null;
185 inst = elem ? L.dom.findClassInstance(elem) : null;
187 return (inst instanceof CBIAbstractValue) ? [ inst, sid ] : null;
190 checkDepends: function(ev, n) {
193 for (var i = 0, s = this.children[0]; (s = this.children[i]) != null; i++)
194 if (s.checkDepends(ev, n))
197 if (changed && (n || 0) < 10)
198 this.checkDepends(ev, (n || 10) + 1);
202 var CBIAbstractSection = CBINode.extend({
203 __init__: function(map, sectionType /*, ... */) {
204 this.super('__init__', this.varargs(arguments, 2));
206 this.sectiontype = sectionType;
208 this.config = map.config;
210 this.optional = true;
211 this.addremove = false;
212 this.dynamic = false;
215 cfgsections: function() {
216 L.error('InternalError', 'Not implemented');
219 filter: function(section_id) {
224 var section_ids = this.cfgsections(),
227 if (Array.isArray(this.children))
228 for (var i = 0; i < section_ids.length; i++)
229 tasks.push(this.loadChildren(section_ids[i])
230 .then(Function.prototype.bind.call(function(section_id, set_values) {
231 for (var i = 0; i < set_values.length; i++)
232 this.children[i].cfgvalue(section_id, set_values[i]);
233 }, this, section_ids[i])));
235 return Promise.all(tasks);
239 var section_ids = this.cfgsections(),
242 if (Array.isArray(this.children))
243 for (var i = 0; i < section_ids.length; i++)
244 for (var j = 0; j < this.children.length; j++)
245 tasks.push(this.children[j].parse(section_ids[i]));
247 return Promise.all(tasks);
250 tab: function(name, title, description) {
251 if (this.tabs && this.tabs[name])
252 throw 'Tab already declared';
257 description: description,
261 this.tabs = this.tabs || [];
262 this.tabs.push(entry);
263 this.tabs[name] = entry;
265 this.tab_names = this.tab_names || [];
266 this.tab_names.push(name);
269 option: function(cbiClass /*, ... */) {
270 if (!CBIAbstractValue.isSubclass(cbiClass))
271 throw L.error('TypeError', 'Class must be a descendent of CBIAbstractValue');
273 var obj = cbiClass.instantiate(this.varargs(arguments, 1, this.map, this));
278 taboption: function(tabName /*, ... */) {
279 if (!this.tabs || !this.tabs[tabName])
280 throw L.error('ReferenceError', 'Associated tab not declared');
282 var obj = this.option.apply(this, this.varargs(arguments, 1));
284 this.tabs[tabName].children.push(obj);
288 renderUCISection: function(section_id) {
289 var renderTasks = [];
292 return this.renderOptions(null, section_id);
294 for (var i = 0; i < this.tab_names.length; i++)
295 renderTasks.push(this.renderOptions(this.tab_names[i], section_id));
297 return Promise.all(renderTasks)
298 .then(this.renderTabContainers.bind(this, section_id));
301 renderTabContainers: function(section_id, nodes) {
302 var config_name = this.uciconfig || this.map.config,
303 containerEls = E([]);
305 for (var i = 0; i < nodes.length; i++) {
306 var tab_name = this.tab_names[i],
307 tab_data = this.tabs[tab_name],
308 containerEl = E('div', {
309 'id': 'container.%s.%s.%s'.format(config_name, section_id, tab_name),
310 'data-tab': tab_name,
311 'data-tab-title': tab_data.title,
312 'data-tab-active': tab_name === this.selected_tab
315 if (tab_data.description != null && tab_data.description != '')
316 containerEl.appendChild(
317 E('div', { 'class': 'cbi-tab-descr' }, tab_data.description));
319 containerEl.appendChild(nodes[i]);
320 containerEls.appendChild(containerEl);
326 renderOptions: function(tab_name, section_id) {
327 var in_table = (this instanceof CBITableSection);
328 return this.renderChildren(tab_name, section_id, in_table).then(function(nodes) {
329 var optionEls = E([]);
330 for (var i = 0; i < nodes.length; i++)
331 optionEls.appendChild(nodes[i]);
336 checkDepends: function(ev, n) {
338 sids = this.cfgsections();
340 for (var i = 0, sid = sids[0]; (sid = sids[i]) != null; i++) {
341 for (var j = 0, o = this.children[0]; (o = this.children[j]) != null; j++) {
342 var isActive = o.isActive(sid),
343 isSatisified = o.checkDepends(sid);
345 if (isActive != isSatisified) {
346 o.setActive(sid, !isActive);
351 o.triggerValidation(sid);
360 var isEqual = function(x, y) {
361 if (x != null && y != null && typeof(x) != typeof(y))
364 if ((x == null && y != null) || (x != null && y == null))
367 if (Array.isArray(x)) {
368 if (x.length != y.length)
371 for (var i = 0; i < x.length; i++)
372 if (!isEqual(x[i], y[i]))
375 else if (typeof(x) == 'object') {
377 if (x.hasOwnProperty(k) && !y.hasOwnProperty(k))
380 if (!isEqual(x[k], y[k]))
385 if (y.hasOwnProperty(k) && !x.hasOwnProperty(k))
395 var CBIAbstractValue = CBINode.extend({
396 __init__: function(map, section, option /*, ... */) {
397 this.super('__init__', this.varargs(arguments, 3));
399 this.section = section;
400 this.option = option;
402 this.config = map.config;
409 this.optional = false;
412 depends: function(field, value) {
415 if (typeof(field) === 'string')
416 deps = {}, deps[field] = value;
420 this.deps.push(deps);
423 transformDepList: function(section_id, deplist) {
424 var list = deplist || this.deps,
427 if (Array.isArray(list)) {
428 for (var i = 0; i < list.length; i++) {
431 for (var k in list[i]) {
432 if (list[i].hasOwnProperty(k)) {
433 if (k.charAt(0) === '!')
435 else if (k.indexOf('.') !== -1)
436 dep['cbid.%s'.format(k)] = list[i][k];
438 dep['cbid.%s.%s.%s'.format(this.config, this.ucisection || section_id, k)] = list[i][k];
443 if (dep.hasOwnProperty(k)) {
454 transformChoices: function() {
455 if (!Array.isArray(this.keylist) || this.keylist.length == 0)
460 for (var i = 0; i < this.keylist.length; i++)
461 choices[this.keylist[i]] = this.vallist[i];
466 checkDepends: function(section_id) {
469 if (!Array.isArray(this.deps) || !this.deps.length)
472 for (var i = 0; i < this.deps.length; i++) {
476 for (var dep in this.deps[i]) {
477 if (dep == '!reverse') {
480 else if (dep == '!default') {
485 var res = this.map.lookupOption(dep, section_id),
486 val = res ? res[0].formvalue(res[1]) : null;
488 istat = (istat && isEqual(val, this.deps[i][dep]));
499 cbid: function(section_id) {
500 if (section_id == null)
501 L.error('TypeError', 'Section ID required');
503 return 'cbid.%s.%s.%s'.format(this.map.config, section_id, this.option);
506 load: function(section_id) {
507 if (section_id == null)
508 L.error('TypeError', 'Section ID required');
511 this.uciconfig || this.map.config,
512 this.ucisection || section_id,
513 this.ucioption || this.option);
516 cfgvalue: function(section_id, set_value) {
517 if (section_id == null)
518 L.error('TypeError', 'Section ID required');
520 if (arguments.length == 2) {
521 this.data = this.data || {};
522 this.data[section_id] = set_value;
525 return this.data ? this.data[section_id] : null;
528 formvalue: function(section_id) {
529 var node = this.map.findElement('id', this.cbid(section_id));
530 return node ? L.dom.callClassMethod(node, 'getValue') : null;
533 textvalue: function(section_id) {
534 var cval = this.cfgvalue(section_id);
539 return (cval != null) ? '%h'.format(cval) : null;
542 validate: function(section_id, value) {
546 isValid: function(section_id) {
547 var node = this.map.findElement('id', this.cbid(section_id));
548 return node ? L.dom.callClassMethod(node, 'isValid') : true;
551 isActive: function(section_id) {
552 var field = this.map.findElement('data-field', this.cbid(section_id));
553 return (field != null && !field.classList.contains('hidden'));
556 setActive: function(section_id, active) {
557 var field = this.map.findElement('data-field', this.cbid(section_id));
559 if (field && field.classList.contains('hidden') == active) {
560 field.classList[active ? 'remove' : 'add']('hidden');
567 triggerValidation: function(section_id) {
568 var node = this.map.findElement('id', this.cbid(section_id));
569 return node ? L.dom.callClassMethod(node, 'triggerValidation') : true;
572 parse: function(section_id) {
573 var active = this.isActive(section_id),
574 cval = this.cfgvalue(section_id),
575 fval = active ? this.formvalue(section_id) : null;
577 if (active && !this.isValid(section_id))
578 return Promise.reject();
580 if (fval != '' && fval != null) {
581 if (this.forcewrite || !isEqual(cval, fval))
582 return Promise.resolve(this.write(section_id, fval));
585 if (this.rmempty || this.optional) {
586 return Promise.resolve(this.remove(section_id));
588 else if (!isEqual(cval, fval)) {
589 console.log('This should have been catched by isValid()');
590 return Promise.reject();
594 return Promise.resolve();
597 write: function(section_id, formvalue) {
599 this.uciconfig || this.map.config,
600 this.ucisection || section_id,
601 this.ucioption || this.option,
605 remove: function(section_id) {
607 this.uciconfig || this.map.config,
608 this.ucisection || section_id,
609 this.ucioption || this.option);
613 var CBITypedSection = CBIAbstractSection.extend({
614 __name__: 'CBI.TypedSection',
616 cfgsections: function() {
617 return uci.sections(this.uciconfig || this.map.config, this.sectiontype)
618 .map(function(s) { return s['.name'] })
619 .filter(L.bind(this.filter, this));
622 handleAdd: function(ev, name) {
623 var config_name = this.uciconfig || this.map.config;
625 uci.add(config_name, this.sectiontype, name);
629 handleRemove: function(section_id, ev) {
630 var config_name = this.uciconfig || this.map.config;
632 uci.remove(config_name, section_id);
636 renderSectionAdd: function(extra_class) {
640 var createEl = E('div', { 'class': 'cbi-section-create' }),
641 config_name = this.uciconfig || this.map.config;
643 if (extra_class != null)
644 createEl.classList.add(extra_class);
646 if (this.anonymous) {
647 createEl.appendChild(E('input', {
649 'class': 'cbi-button cbi-button-add',
652 'click': L.bind(this.handleAdd, this)
656 var nameEl = E('input', {
658 'class': 'cbi-section-create-name'
661 L.dom.append(createEl, [
662 E('div', {}, nameEl),
664 'class': 'cbi-button cbi-button-add',
668 'click': L.bind(function(ev) {
669 if (nameEl.classList.contains('cbi-input-invalid'))
672 this.handleAdd(ev, nameEl.value);
677 ui.addValidator(nameEl, 'uciname', true, 'blur', 'keyup');
683 renderContents: function(cfgsections, nodes) {
684 var section_id = null,
685 config_name = this.uciconfig || this.map.config,
686 sectionEl = E('div', {
687 'id': 'cbi-%s-%s'.format(config_name, this.sectiontype),
688 'class': 'cbi-section'
691 if (this.title != null && this.title != '')
692 sectionEl.appendChild(E('legend', {}, this.title));
694 if (this.description != null && this.description != '')
695 sectionEl.appendChild(E('div', { 'class': 'cbi-section-descr' }, this.description));
697 for (var i = 0; i < nodes.length; i++) {
698 if (this.addremove) {
699 sectionEl.appendChild(
700 E('div', { 'class': 'cbi-section-remove right' },
703 'class': 'cbi-button',
704 'name': 'cbi.rts.%s.%s'.format(config_name, cfgsections[i]),
705 'value': _('Delete'),
706 'data-section-id': cfgsections[i],
707 'click': L.bind(this.handleRemove, this, cfgsections[i])
712 sectionEl.appendChild(E('h3', cfgsections[i].toUpperCase()));
714 sectionEl.appendChild(E('div', {
715 'id': 'cbi-%s-%s'.format(config_name, cfgsections[i]),
717 ? 'cbi-section-node cbi-section-node-tabbed' : 'cbi-section-node'
721 ui.tabs.initTabGroup(sectionEl.lastChild.childNodes);
724 if (nodes.length == 0)
725 L.dom.append(sectionEl, [
726 E('em', _('This section contains no values yet')),
730 sectionEl.appendChild(this.renderSectionAdd());
732 L.dom.bindClassInstance(sectionEl, this);
738 var cfgsections = this.cfgsections(),
741 for (var i = 0; i < cfgsections.length; i++)
742 renderTasks.push(this.renderUCISection(cfgsections[i]));
744 return Promise.all(renderTasks).then(this.renderContents.bind(this, cfgsections));
748 var CBITableSection = CBITypedSection.extend({
749 __name__: 'CBI.TableSection',
752 throw 'Tabs are not supported by TableSection';
755 renderContents: function(cfgsections, nodes) {
756 var section_id = null,
757 config_name = this.uciconfig || this.map.config,
758 max_cols = isNaN(this.max_cols) ? this.children.length : this.max_cols,
759 has_more = max_cols < this.children.length,
760 sectionEl = E('div', {
761 'id': 'cbi-%s-%s'.format(config_name, this.sectiontype),
762 'class': 'cbi-section cbi-tblsection'
765 'class': 'table cbi-section-table'
768 if (this.title != null && this.title != '')
769 sectionEl.appendChild(E('h3', {}, this.title));
771 if (this.description != null && this.description != '')
772 sectionEl.appendChild(E('div', { 'class': 'cbi-section-descr' }, this.description));
774 tableEl.appendChild(this.renderHeaderRows(max_cols));
776 for (var i = 0; i < nodes.length; i++) {
777 var sectionname = this.stripTags((typeof(this.sectiontitle) == 'function')
778 ? String(this.sectiontitle(cfgsections[i]) || '') : cfgsections[i]).trim();
780 var trEl = E('div', {
781 'id': 'cbi-%s-%s'.format(config_name, cfgsections[i]),
782 'class': 'tr cbi-section-table-row',
783 'data-sid': cfgsections[i],
784 'draggable': this.sortable ? true : null,
785 'mousedown': this.sortable ? L.bind(this.handleDragInit, this) : null,
786 'dragstart': this.sortable ? L.bind(this.handleDragStart, this) : null,
787 'dragover': this.sortable ? L.bind(this.handleDragOver, this) : null,
788 'dragenter': this.sortable ? L.bind(this.handleDragEnter, this) : null,
789 'dragleave': this.sortable ? L.bind(this.handleDragLeave, this) : null,
790 'dragend': this.sortable ? L.bind(this.handleDragEnd, this) : null,
791 'drop': this.sortable ? L.bind(this.handleDrop, this) : null,
792 'data-title': (sectionname && (!this.anonymous || this.sectiontitle)) ? sectionname : null
795 if (this.extedit || this.rowcolors)
796 trEl.classList.add(!(tableEl.childNodes.length % 2)
797 ? 'cbi-rowstyle-1' : 'cbi-rowstyle-2');
799 for (var j = 0; j < max_cols && nodes[i].firstChild; j++)
800 trEl.appendChild(nodes[i].firstChild);
802 trEl.appendChild(this.renderRowActions(cfgsections[i], has_more ? _('More…') : null));
803 tableEl.appendChild(trEl);
806 if (nodes.length == 0)
807 tableEl.appendChild(E('div', { 'class': 'tr cbi-section-table-row placeholder' },
808 E('div', { 'class': 'td' },
809 E('em', {}, _('This section contains no values yet')))));
811 sectionEl.appendChild(tableEl);
813 sectionEl.appendChild(this.renderSectionAdd('cbi-tblsection-create'));
815 L.dom.bindClassInstance(sectionEl, this);
820 renderHeaderRows: function(max_cols) {
821 var has_titles = false,
822 has_descriptions = false,
823 anon_class = (!this.anonymous || this.sectiontitle) ? 'named' : 'anonymous',
826 for (var i = 0, opt; i < max_cols && (opt = this.children[i]) != null; i++) {
827 if (opt.optional || opt.modalonly)
830 has_titles = has_titles || !!opt.title;
831 has_descriptions = has_descriptions || !!opt.description;
835 var trEl = E('div', {
836 'class': 'tr cbi-section-table-titles ' + anon_class,
837 'data-title': (!this.anonymous || this.sectiontitle) ? _('Name') : null
840 for (var i = 0, opt; i < max_cols && (opt = this.children[i]) != null; i++) {
841 if (opt.optional || opt.modalonly)
844 trEl.appendChild(E('div', {
845 'class': 'th cbi-section-table-cell',
846 'data-type': opt.__name__
849 if (opt.width != null)
850 trEl.lastElementChild.style.width =
851 (typeof(opt.width) == 'number') ? opt.width+'px' : opt.width;
854 trEl.lastElementChild.appendChild(E('a', {
855 'href': opt.titleref,
856 'class': 'cbi-title-ref',
857 'title': this.titledesc || _('Go to relevant configuration page')
860 L.dom.content(trEl.lastElementChild, opt.title);
863 if (this.sortable || this.extedit || this.addremove || has_more)
864 trEl.appendChild(E('div', {
865 'class': 'th cbi-section-table-cell cbi-section-actions'
868 trEls.appendChild(trEl);
871 if (has_descriptions) {
872 var trEl = E('div', {
873 'class': 'tr cbi-section-table-descr ' + anon_class
876 for (var i = 0, opt; i < max_cols && (opt = this.children[i]) != null; i++) {
877 if (opt.optional || opt.modalonly)
880 trEl.appendChild(E('div', {
881 'class': 'th cbi-section-table-cell',
882 'data-type': opt.__name__
883 }, opt.description));
885 if (opt.width != null)
886 trEl.lastElementChild.style.width =
887 (typeof(opt.width) == 'number') ? opt.width+'px' : opt.width;
890 if (this.sortable || this.extedit || this.addremove || has_more)
891 trEl.appendChild(E('div', {
892 'class': 'th cbi-section-table-cell cbi-section-actions'
895 trEls.appendChild(trEl);
901 renderRowActions: function(section_id, more_label) {
902 var config_name = this.uciconfig || this.map.config;
904 if (!this.sortable && !this.extedit && !this.addremove && !more_label)
907 var tdEl = E('div', {
908 'class': 'td cbi-section-table-cell nowrap cbi-section-actions'
912 L.dom.append(tdEl.lastElementChild, [
914 'title': _('Drag to reorder'),
915 'class': 'cbi-button drag-handle center',
916 'style': 'cursor:move'
924 if (typeof(this.extedit) == 'function')
925 evFn = L.bind(this.extedit, this);
926 else if (typeof(this.extedit) == 'string')
927 evFn = L.bind(function(sid, ev) {
928 location.href = this.extedit.format(sid);
929 }, this, section_id);
931 L.dom.append(tdEl.lastElementChild,
936 'class': 'cbi-button cbi-button-edit',
943 L.dom.append(tdEl.lastElementChild,
948 'class': 'cbi-button cbi-button-edit',
949 'click': L.bind(this.renderMoreOptionsModal, this, section_id)
954 if (this.addremove) {
955 L.dom.append(tdEl.lastElementChild,
958 'value': _('Delete'),
959 'title': _('Delete'),
960 'class': 'cbi-button cbi-button-remove',
961 'click': L.bind(function(sid, ev) {
962 uci.remove(config_name, sid);
972 handleDragInit: function(ev) {
973 scope.dragState = { node: ev.target };
976 handleDragStart: function(ev) {
977 if (!scope.dragState || !scope.dragState.node.classList.contains('drag-handle')) {
978 scope.dragState = null;
983 scope.dragState.node = L.dom.parent(scope.dragState.node, '.tr');
984 ev.dataTransfer.setData('text', 'drag');
985 ev.target.style.opacity = 0.4;
988 handleDragOver: function(ev) {
989 var n = scope.dragState.targetNode,
990 r = scope.dragState.rect,
991 t = r.top + r.height / 2;
993 if (ev.clientY <= t) {
994 n.classList.remove('drag-over-below');
995 n.classList.add('drag-over-above');
998 n.classList.remove('drag-over-above');
999 n.classList.add('drag-over-below');
1002 ev.dataTransfer.dropEffect = 'move';
1003 ev.preventDefault();
1007 handleDragEnter: function(ev) {
1008 scope.dragState.rect = ev.currentTarget.getBoundingClientRect();
1009 scope.dragState.targetNode = ev.currentTarget;
1012 handleDragLeave: function(ev) {
1013 ev.currentTarget.classList.remove('drag-over-above');
1014 ev.currentTarget.classList.remove('drag-over-below');
1017 handleDragEnd: function(ev) {
1020 n.style.opacity = '';
1021 n.classList.add('flash');
1022 n.parentNode.querySelectorAll('.drag-over-above, .drag-over-below')
1023 .forEach(function(tr) {
1024 tr.classList.remove('drag-over-above');
1025 tr.classList.remove('drag-over-below');
1029 handleDrop: function(ev) {
1030 var s = scope.dragState;
1032 if (s.node && s.targetNode) {
1033 var config_name = this.uciconfig || this.map.config,
1034 ref_node = s.targetNode,
1037 if (ref_node.classList.contains('drag-over-below')) {
1038 ref_node = ref_node.nextElementSibling;
1042 var sid1 = s.node.getAttribute('data-sid'),
1043 sid2 = s.targetNode.getAttribute('data-sid');
1045 s.node.parentNode.insertBefore(s.node, ref_node);
1046 uci.move(config_name, sid1, sid2, after);
1049 scope.dragState = null;
1050 ev.target.style.opacity = '';
1051 ev.stopPropagation();
1052 ev.preventDefault();
1056 handleModalCancel: function(modalMap, ev) {
1057 return Promise.resolve(L.ui.hideModal());
1060 handleModalSave: function(modalMap, ev) {
1061 return modalMap.save()
1062 .then(L.bind(this.map.load, this.map))
1063 .then(L.bind(this.map.reset, this.map))
1064 .then(L.ui.hideModal)
1065 .catch(function() {});
1068 renderMoreOptionsModal: function(section_id, ev) {
1069 var parent = this.map,
1070 title = parent.title,
1072 m = new CBIMap(this.map.config, null, null),
1073 s = m.section(CBINamedSection, section_id, this.sectiontype);
1075 s.tab_names = this.tab_names;
1077 if (typeof(this.sectiontitle) == 'function')
1078 name = this.stripTags(String(this.sectiontitle(section_id) || ''));
1079 else if (!this.anonymous)
1083 title += ' - ' + name;
1085 for (var i = 0; i < this.children.length; i++) {
1086 var o1 = this.children[i];
1088 if (o1.modalonly === false)
1091 var o2 = s.option(o1.constructor, o1.option, o1.title, o1.description);
1094 if (!o1.hasOwnProperty(k))
1111 //ev.target.classList.add('spinning');
1112 m.render().then(L.bind(function(nodes) {
1113 //ev.target.classList.remove('spinning');
1114 L.ui.showModal(title, [
1116 E('div', { 'class': 'right' }, [
1120 'click': L.bind(this.handleModalCancel, this, m),
1121 'value': _('Dismiss')
1125 'class': 'cbi-button cbi-button-positive important',
1126 'click': L.bind(this.handleModalSave, this, m),
1131 }, this)).catch(L.error);
1135 var CBIGridSection = CBITableSection.extend({
1136 tab: function(name, title, description) {
1137 CBIAbstractSection.prototype.tab.call(this, name, title, description);
1140 handleAdd: function(ev) {
1141 var config_name = this.uciconfig || this.map.config,
1142 section_id = uci.add(config_name, this.sectiontype);
1144 this.addedSection = section_id;
1145 this.renderMoreOptionsModal(section_id);
1148 handleModalSave: function(/* ... */) {
1149 return this.super('handleModalSave', arguments)
1150 .then(L.bind(function() { this.addedSection = null }, this));
1153 handleModalCancel: function(/* ... */) {
1154 var config_name = this.uciconfig || this.map.config;
1156 if (this.addedSection != null) {
1157 uci.remove(config_name, this.addedSection);
1158 this.addedSection = null;
1161 return this.super('handleModalCancel', arguments);
1164 renderUCISection: function(section_id) {
1165 return this.renderOptions(null, section_id);
1168 renderChildren: function(tab_name, section_id, in_table) {
1169 var tasks = [], index = 0;
1171 for (var i = 0, opt; (opt = this.children[i]) != null; i++) {
1172 if (opt.disable || opt.modalonly)
1176 tasks.push(opt.render(index++, section_id, in_table));
1178 tasks.push(this.renderTextValue(section_id, opt));
1181 return Promise.all(tasks);
1184 renderTextValue: function(section_id, opt) {
1185 var title = this.stripTags(opt.title).trim(),
1186 descr = this.stripTags(opt.description).trim(),
1187 value = opt.textvalue(section_id);
1190 'class': 'td cbi-value-field',
1191 'data-title': (title != '') ? title : opt.option,
1192 'data-description': (descr != '') ? descr : null,
1193 'data-name': opt.option,
1194 'data-type': opt.typename || opt.__name__
1195 }, (value != null) ? value : E('em', _('none')));
1198 renderRowActions: function(section_id) {
1199 return this.super('renderRowActions', [ section_id, _('Edit') ]);
1203 var section_ids = this.cfgsections(),
1206 if (Array.isArray(this.children)) {
1207 for (var i = 0; i < section_ids.length; i++) {
1208 for (var j = 0; j < this.children.length; j++) {
1209 if (!this.children[j].editable || this.children[j].modalonly)
1212 tasks.push(this.children[j].parse(section_ids[i]));
1217 return Promise.all(tasks);
1221 var CBINamedSection = CBIAbstractSection.extend({
1222 __name__: 'CBI.NamedSection',
1223 __init__: function(map, section_id /*, ... */) {
1224 this.super('__init__', this.varargs(arguments, 2, map));
1226 this.section = section_id;
1229 cfgsections: function() {
1230 return [ this.section ];
1233 handleAdd: function(ev) {
1234 var section_id = this.section,
1235 config_name = this.uciconfig || this.map.config;
1237 uci.add(config_name, this.sectiontype, section_id);
1241 handleRemove: function(ev) {
1242 var section_id = this.section,
1243 config_name = this.uciconfig || this.map.config;
1245 uci.remove(config_name, section_id);
1249 renderContents: function(data) {
1250 var ucidata = data[0], nodes = data[1],
1251 section_id = this.section,
1252 config_name = this.uciconfig || this.map.config,
1253 sectionEl = E('div', {
1254 'id': ucidata ? null : 'cbi-%s-%s'.format(config_name, section_id),
1255 'class': 'cbi-section'
1258 if (typeof(this.title) === 'string' && this.title !== '')
1259 sectionEl.appendChild(E('legend', {}, this.title));
1261 if (typeof(this.description) === 'string' && this.description !== '')
1262 sectionEl.appendChild(E('div', { 'class': 'cbi-section-descr' }, this.description));
1265 if (this.addremove) {
1266 sectionEl.appendChild(
1267 E('div', { 'class': 'cbi-section-remove right' },
1270 'class': 'cbi-button',
1271 'value': _('Delete'),
1272 'click': L.bind(this.handleRemove, this)
1276 sectionEl.appendChild(E('div', {
1277 'id': 'cbi-%s-%s'.format(config_name, section_id),
1279 ? 'cbi-section-node cbi-section-node-tabbed' : 'cbi-section-node'
1283 ui.tabs.initTabGroup(sectionEl.lastChild.childNodes);
1285 else if (this.addremove) {
1286 sectionEl.appendChild(
1289 'class': 'cbi-button cbi-button-add',
1291 'click': L.bind(this.handleAdd, this)
1295 L.dom.bindClassInstance(sectionEl, this);
1300 render: function() {
1301 var config_name = this.uciconfig || this.map.config,
1302 section_id = this.section;
1304 return Promise.all([
1305 uci.get(config_name, section_id),
1306 this.renderUCISection(section_id)
1307 ]).then(this.renderContents.bind(this));
1311 var CBIValue = CBIAbstractValue.extend({
1312 __name__: 'CBI.Value',
1314 value: function(key, val) {
1315 this.keylist = this.keylist || [];
1316 this.keylist.push(String(key));
1318 this.vallist = this.vallist || [];
1319 this.vallist.push(String(val != null ? val : key));
1322 render: function(option_index, section_id, in_table) {
1323 return Promise.resolve(this.cfgvalue(section_id))
1324 .then(this.renderWidget.bind(this, section_id, option_index))
1325 .then(this.renderFrame.bind(this, section_id, in_table, option_index));
1328 renderFrame: function(section_id, in_table, option_index, nodes) {
1329 var config_name = this.uciconfig || this.map.config,
1330 depend_list = this.transformDepList(section_id),
1334 optionEl = E('div', {
1335 'class': 'td cbi-value-field',
1336 'data-title': this.stripTags(this.title).trim(),
1337 'data-description': this.stripTags(this.description).trim(),
1338 'data-name': this.option,
1339 'data-type': this.typename || (this.template ? this.template.replace(/^.+\//, '') : null) || this.__name__
1341 'id': 'cbi-%s-%s-%s'.format(config_name, section_id, this.option),
1342 'data-index': option_index,
1343 'data-depends': depend_list,
1344 'data-field': this.cbid(section_id)
1348 optionEl = E('div', {
1349 'class': 'cbi-value',
1350 'id': 'cbi-%s-%s-%s'.format(config_name, section_id, this.option),
1351 'data-index': option_index,
1352 'data-depends': depend_list,
1353 'data-field': this.cbid(section_id),
1354 'data-name': this.option,
1355 'data-type': this.typename || (this.template ? this.template.replace(/^.+\//, '') : null) || this.__name__
1358 if (this.last_child)
1359 optionEl.classList.add('cbi-value-last');
1361 if (typeof(this.title) === 'string' && this.title !== '') {
1362 optionEl.appendChild(E('label', {
1363 'class': 'cbi-value-title',
1364 'for': 'cbid.%s.%s.%s'.format(config_name, section_id, this.option)
1366 this.titleref ? E('a', {
1367 'class': 'cbi-title-ref',
1368 'href': this.titleref,
1369 'title': this.titledesc || _('Go to relevant configuration page')
1370 }, this.title) : this.title));
1372 optionEl.appendChild(E('div', { 'class': 'cbi-value-field' }));
1377 (optionEl.lastChild || optionEl).appendChild(nodes);
1379 if (!in_table && typeof(this.description) === 'string' && this.description !== '')
1380 L.dom.append(optionEl.lastChild || optionEl,
1381 E('div', { 'class': 'cbi-value-description' }, this.description));
1383 if (depend_list && depend_list.length)
1384 optionEl.classList.add('hidden');
1386 optionEl.addEventListener('widget-change',
1387 L.bind(this.map.checkDepends, this.map));
1389 L.dom.bindClassInstance(optionEl, this);
1394 renderWidget: function(section_id, option_index, cfgvalue) {
1395 var value = (cfgvalue != null) ? cfgvalue : this.default,
1396 choices = this.transformChoices(),
1400 var placeholder = (this.optional || this.rmempty)
1401 ? E('em', _('unspecified')) : _('-- Please choose --');
1403 widget = new ui.Combobox(Array.isArray(value) ? value.join(' ') : value, choices, {
1404 id: this.cbid(section_id),
1406 optional: this.optional || this.rmempty,
1407 datatype: this.datatype,
1408 select_placeholder: this.placeholder || placeholder,
1409 validate: L.bind(this.validate, this, section_id)
1413 widget = new ui.Textfield(Array.isArray(value) ? value.join(' ') : value, {
1414 id: this.cbid(section_id),
1415 password: this.password,
1416 optional: this.optional || this.rmempty,
1417 datatype: this.datatype,
1418 placeholder: this.placeholder,
1419 validate: L.bind(this.validate, this, section_id)
1423 return widget.render();
1427 var CBIDynamicList = CBIValue.extend({
1428 __name__: 'CBI.DynamicList',
1430 renderWidget: function(section_id, option_index, cfgvalue) {
1431 var value = (cfgvalue != null) ? cfgvalue : this.default,
1432 choices = this.transformChoices(),
1435 if (Array.isArray(value))
1437 else if (value != null)
1438 items = String(value).trim().split(/\s+/);
1440 var widget = new ui.DynamicList(items, choices, {
1441 id: this.cbid(section_id),
1443 optional: this.optional || this.rmempty,
1444 datatype: this.datatype,
1445 placeholder: this.placeholder,
1446 validate: L.bind(this.validate, this, section_id)
1449 return widget.render();
1453 var CBIListValue = CBIValue.extend({
1454 __name__: 'CBI.ListValue',
1456 __init__: function() {
1457 this.super('__init__', arguments);
1458 this.widget = 'select';
1462 renderWidget: function(section_id, option_index, cfgvalue) {
1463 var choices = this.transformChoices();
1464 var widget = new ui.Select((cfgvalue != null) ? cfgvalue : this.default, choices, {
1465 id: this.cbid(section_id),
1468 optional: this.rmempty || this.optional,
1469 validate: L.bind(this.validate, this, section_id)
1472 return widget.render();
1476 var CBIFlagValue = CBIValue.extend({
1477 __name__: 'CBI.FlagValue',
1479 __init__: function() {
1480 this.super('__init__', arguments);
1483 this.disabled = '0';
1484 this.default = this.disabled;
1487 renderWidget: function(section_id, option_index, cfgvalue) {
1488 var widget = new ui.Checkbox((cfgvalue != null) ? cfgvalue : this.default, {
1489 id: this.cbid(section_id),
1490 value_enabled: this.enabled,
1491 value_disabled: this.disabled,
1492 validate: L.bind(this.validate, this, section_id)
1495 return widget.render();
1498 formvalue: function(section_id) {
1499 var node = this.map.findElement('id', this.cbid(section_id)),
1500 checked = node ? L.dom.callClassMethod(node, 'isChecked') : false;
1502 return checked ? this.enabled : this.disabled;
1505 textvalue: function(section_id) {
1506 var cval = this.cfgvalue(section_id);
1509 cval = this.default;
1511 return (cval == this.enabled) ? _('Yes') : _('No');
1514 parse: function(section_id) {
1515 if (this.isActive(section_id)) {
1516 var fval = this.formvalue(section_id);
1518 if (!this.isValid(section_id))
1519 return Promise.reject();
1521 if (fval == this.default && (this.optional || this.rmempty))
1522 return Promise.resolve(this.remove(section_id));
1524 return Promise.resolve(this.write(section_id, fval));
1527 return Promise.resolve(this.remove(section_id));
1532 var CBIMultiValue = CBIDynamicList.extend({
1533 __name__: 'CBI.MultiValue',
1535 __init__: function() {
1536 this.super('__init__', arguments);
1537 this.placeholder = _('-- Please choose --');
1540 renderWidget: function(section_id, option_index, cfgvalue) {
1541 var value = (cfgvalue != null) ? cfgvalue : this.default,
1542 choices = this.transformChoices();
1544 if (!Array.isArray(value))
1545 value = String(value).split(/\s+/);
1547 var widget = new ui.Dropdown(value, choices, {
1548 id: this.cbid(section_id),
1551 optional: this.optional || this.rmempty,
1552 select_placeholder: this.placeholder,
1553 display_items: this.display_size || this.size || 3,
1554 dropdown_items: this.dropdown_size || this.size || -1,
1555 validate: L.bind(this.validate, this, section_id)
1558 return widget.render();
1562 var CBIDummyValue = CBIValue.extend({
1563 __name__: 'CBI.DummyValue',
1565 renderWidget: function(section_id, option_index, cfgvalue) {
1566 var value = (cfgvalue != null) ? cfgvalue : this.default,
1567 hiddenEl = new ui.Hiddenfield(value, { id: this.cbid(section_id) }),
1568 outputEl = E('div');
1571 outputEl.appendChild(E('a', { 'href': this.href }));
1573 L.dom.append(outputEl.lastChild || outputEl,
1574 this.rawhtml ? value : [ value ]);
1583 var CBIButtonValue = CBIValue.extend({
1584 __name__: 'CBI.ButtonValue',
1586 renderWidget: function(section_id, option_index, cfgvalue) {
1587 var value = (cfgvalue != null) ? cfgvalue : this.default;
1589 if (value !== false)
1593 'id': this.cbid(section_id)
1596 'class': 'cbi-button cbi-button-%s'.format(this.inputstyle || 'button'),
1598 //'id': this.cbid(section_id),
1599 //'name': this.cbid(section_id),
1600 'value': this.inputtitle || this.title,
1601 'click': L.bind(function(ev) {
1602 ev.target.previousElementSibling.value = ev.target.value;
1608 return document.createTextNode(' - ');
1612 var CBIHiddenValue = CBIValue.extend({
1613 __name__: 'CBI.HiddenValue',
1615 renderWidget: function(section_id, option_index, cfgvalue) {
1616 var widget = new ui.Hiddenfield((cfgvalue != null) ? cfgvalue : this.default, {
1617 id: this.cbid(section_id)
1620 return widget.render();
1624 var CBISectionValue = CBIValue.extend({
1625 __name__: 'CBI.ContainerValue',
1626 __init__: function(map, section, option, cbiClass /*, ... */) {
1627 this.super('__init__', [map, section, option]);
1629 if (!CBIAbstractSection.isSubclass(cbiClass))
1630 throw 'Sub section must be a descendent of CBIAbstractSection';
1632 this.subsection = cbiClass.instantiate(this.varargs(arguments, 4, this.map));
1635 load: function(section_id) {
1636 return this.subsection.load();
1639 parse: function(section_id) {
1640 return this.subsection.parse();
1643 renderWidget: function(section_id, option_index, cfgvalue) {
1644 return this.subsection.render();
1647 checkDepends: function(section_id) {
1648 this.subsection.checkDepends();
1649 return this.super('checkDepends');
1652 write: function() {},
1653 remove: function() {},
1654 cfgvalue: function() { return null },
1655 formvalue: function() { return null }
1658 return L.Class.extend({
1660 AbstractSection: CBIAbstractSection,
1661 AbstractValue: CBIAbstractValue,
1663 TypedSection: CBITypedSection,
1664 TableSection: CBITableSection,
1665 GridSection: CBIGridSection,
1666 NamedSection: CBINamedSection,
1669 DynamicList: CBIDynamicList,
1670 ListValue: CBIListValue,
1672 MultiValue: CBIMultiValue,
1673 DummyValue: CBIDummyValue,
1674 Button: CBIButtonValue,
1675 HiddenValue: CBIHiddenValue,
1676 SectionValue: CBISectionValue