projects / project / luci.git / blob
? search:
summary | shortlog | log | commit | commitdiff | tree
history | raw | HEAD
Merge pull request #3042 from muink/patch-1
[project/luci.git] / modules / luci-base / htdocs / luci-static / resources / ui.js
1 'use strict';
2 'require rpc';
3 'require uci';
4 'require validation';
5
6 var modalDiv = null,
7 tooltipDiv = null,
8 tooltipTimeout = null;
9
10 var UIElement = L.Class.extend({
11 getValue: function() {
12 if (L.dom.matches(this.node, 'select') || L.dom.matches(this.node, 'input'))
13 return this.node.value;
14
15 return null;
16 },
17
18 setValue: function(value) {
19 if (L.dom.matches(this.node, 'select') || L.dom.matches(this.node, 'input'))
20 this.node.value = value;
21 },
22
23 isValid: function() {
24 return (this.validState !== false);
25 },
26
27 triggerValidation: function() {
28 if (typeof(this.vfunc) != 'function')
29 return false;
30
31 var wasValid = this.isValid();
32
33 this.vfunc();
34
35 return (wasValid != this.isValid());
36 },
37
38 registerEvents: function(targetNode, synevent, events) {
39 var dispatchFn = L.bind(function(ev) {
40 this.node.dispatchEvent(new CustomEvent(synevent, { bubbles: true }));
41 }, this);
42
43 for (var i = 0; i < events.length; i++)
44 targetNode.addEventListener(events[i], dispatchFn);
45 },
46
47 setUpdateEvents: function(targetNode /*, ... */) {
48 var datatype = this.options.datatype,
49 optional = this.options.hasOwnProperty('optional') ? this.options.optional : true,
50 validate = this.options.validate,
51 events = this.varargs(arguments, 1);
52
53 this.registerEvents(targetNode, 'widget-update', events);
54
55 if (!datatype && !validate)
56 return;
57
58 this.vfunc = L.ui.addValidator.apply(L.ui, [
59 targetNode, datatype || 'string',
60 optional, validate
61 ].concat(events));
62
63 this.node.addEventListener('validation-success', L.bind(function(ev) {
64 this.validState = true;
65 }, this));
66
67 this.node.addEventListener('validation-failure', L.bind(function(ev) {
68 this.validState = false;
69 }, this));
70 },
71
72 setChangeEvents: function(targetNode /*, ... */) {
73 var tag_changed = L.bind(function(ev) { this.setAttribute('data-changed', true) }, this.node);
74
75 for (var i = 1; i < arguments.length; i++)
76 targetNode.addEventListener(arguments[i], tag_changed);
77
78 this.registerEvents(targetNode, 'widget-change', this.varargs(arguments, 1));
79 }
80 });
81
82 var UITextfield = UIElement.extend({
83 __init__: function(value, options) {
84 this.value = value;
85 this.options = Object.assign({
86 optional: true,
87 password: false
88 }, options);
89 },
90
91 render: function() {
92 var frameEl = E('div', { 'id': this.options.id });
93
94 if (this.options.password) {
95 frameEl.classList.add('nowrap');
96 frameEl.appendChild(E('input', {
97 'type': 'password',
98 'style': 'position:absolute; left:-100000px',
99 'aria-hidden': true,
100 'tabindex': -1,
101 'name': this.options.name ? 'password.%s'.format(this.options.name) : null
102 }));
103 }
104
105 frameEl.appendChild(E('input', {
106 'id': this.options.id ? 'widget.' + this.options.id : null,
107 'name': this.options.name,
108 'type': this.options.password ? 'password' : 'text',
109 'class': this.options.password ? 'cbi-input-password' : 'cbi-input-text',
110 'readonly': this.options.readonly ? '' : null,
111 'maxlength': this.options.maxlength,
112 'placeholder': this.options.placeholder,
113 'value': this.value,
114 }));
115
116 if (this.options.password)
117 frameEl.appendChild(E('button', {
118 'class': 'cbi-button cbi-button-neutral',
119 'title': _('Reveal/hide password'),
120 'aria-label': _('Reveal/hide password'),
121 'click': function(ev) {
122 var e = this.previousElementSibling;
123 e.type = (e.type === 'password') ? 'text' : 'password';
124 ev.preventDefault();
125 }
126 }, '∗'));
127
128 return this.bind(frameEl);
129 },
130
131 bind: function(frameEl) {
132 var inputEl = frameEl.childNodes[+!!this.options.password];
133
134 this.node = frameEl;
135
136 this.setUpdateEvents(inputEl, 'keyup', 'blur');
137 this.setChangeEvents(inputEl, 'change');
138
139 L.dom.bindClassInstance(frameEl, this);
140
141 return frameEl;
142 },
143
144 getValue: function() {
145 var inputEl = this.node.childNodes[+!!this.options.password];
146 return inputEl.value;
147 },
148
149 setValue: function(value) {
150 var inputEl = this.node.childNodes[+!!this.options.password];
151 inputEl.value = value;
152 }
153 });
154
155 var UITextarea = UIElement.extend({
156 __init__: function(value, options) {
157 this.value = value;
158 this.options = Object.assign({
159 optional: true,
160 wrap: false,
161 cols: null,
162 rows: null
163 }, options);
164 },
165
166 render: function() {
167 var frameEl = E('div', { 'id': this.options.id }),
168 value = (this.value != null) ? String(this.value) : '';
169
170 frameEl.appendChild(E('textarea', {
171 'id': this.options.id ? 'widget.' + this.options.id : null,
172 'name': this.options.name,
173 'class': 'cbi-input-textarea',
174 'readonly': this.options.readonly ? '' : null,
175 'placeholder': this.options.placeholder,
176 'style': !this.options.cols ? 'width:100%' : null,
177 'cols': this.options.cols,
178 'rows': this.options.rows,
179 'wrap': this.options.wrap ? '' : null
180 }, [ value ]));
181
182 if (this.options.monospace)
183 frameEl.firstElementChild.style.fontFamily = 'monospace';
184
185 return this.bind(frameEl);
186 },
187
188 bind: function(frameEl) {
189 var inputEl = frameEl.firstElementChild;
190
191 this.node = frameEl;
192
193 this.setUpdateEvents(inputEl, 'keyup', 'blur');
194 this.setChangeEvents(inputEl, 'change');
195
196 L.dom.bindClassInstance(frameEl, this);
197
198 return frameEl;
199 },
200
201 getValue: function() {
202 return this.node.firstElementChild.value;
203 },
204
205 setValue: function(value) {
206 this.node.firstElementChild.value = value;
207 }
208 });
209
210 var UICheckbox = UIElement.extend({
211 __init__: function(value, options) {
212 this.value = value;
213 this.options = Object.assign({
214 value_enabled: '1',
215 value_disabled: '0'
216 }, options);
217 },
218
219 render: function() {
220 var frameEl = E('div', {
221 'id': this.options.id,
222 'class': 'cbi-checkbox'
223 });
224
225 if (this.options.hiddenname)
226 frameEl.appendChild(E('input', {
227 'type': 'hidden',
228 'name': this.options.hiddenname,
229 'value': 1
230 }));
231
232 frameEl.appendChild(E('input', {
233 'id': this.options.id ? 'widget.' + this.options.id : null,
234 'name': this.options.name,
235 'type': 'checkbox',
236 'value': this.options.value_enabled,
237 'checked': (this.value == this.options.value_enabled) ? '' : null
238 }));
239
240 return this.bind(frameEl);
241 },
242
243 bind: function(frameEl) {
244 this.node = frameEl;
245
246 this.setUpdateEvents(frameEl.lastElementChild, 'click', 'blur');
247 this.setChangeEvents(frameEl.lastElementChild, 'change');
248
249 L.dom.bindClassInstance(frameEl, this);
250
251 return frameEl;
252 },
253
254 isChecked: function() {
255 return this.node.lastElementChild.checked;
256 },
257
258 getValue: function() {
259 return this.isChecked()
260 ? this.options.value_enabled
261 : this.options.value_disabled;
262 },
263
264 setValue: function(value) {
265 this.node.lastElementChild.checked = (value == this.options.value_enabled);
266 }
267 });
268
269 var UISelect = UIElement.extend({
270 __init__: function(value, choices, options) {
271 if (!L.isObject(choices))
272 choices = {};
273
274 if (!Array.isArray(value))
275 value = (value != null && value != '') ? [ value ] : [];
276
277 if (!options.multiple && value.length > 1)
278 value.length = 1;
279
280 this.values = value;
281 this.choices = choices;
282 this.options = Object.assign({
283 multiple: false,
284 widget: 'select',
285 orientation: 'horizontal'
286 }, options);
287
288 if (this.choices.hasOwnProperty(''))
289 this.options.optional = true;
290 },
291
292 render: function() {
293 var frameEl = E('div', { 'id': this.options.id }),
294 keys = Object.keys(this.choices);
295
296 if (this.options.sort === true)
297 keys.sort();
298 else if (Array.isArray(this.options.sort))
299 keys = this.options.sort;
300
301 if (this.options.widget == 'select') {
302 frameEl.appendChild(E('select', {
303 'id': this.options.id ? 'widget.' + this.options.id : null,
304 'name': this.options.name,
305 'size': this.options.size,
306 'class': 'cbi-input-select',
307 'multiple': this.options.multiple ? '' : null
308 }));
309
310 if (this.options.optional)
311 frameEl.lastChild.appendChild(E('option', {
312 'value': '',
313 'selected': (this.values.length == 0 || this.values[0] == '') ? '' : null
314 }, this.choices[''] || this.options.placeholder || _('-- Please choose --')));
315
316 for (var i = 0; i < keys.length; i++) {
317 if (keys[i] == null || keys[i] == '')
318 continue;
319
320 frameEl.lastChild.appendChild(E('option', {
321 'value': keys[i],
322 'selected': (this.values.indexOf(keys[i]) > -1) ? '' : null
323 }, this.choices[keys[i]] || keys[i]));
324 }
325 }
326 else {
327 var brEl = (this.options.orientation === 'horizontal') ? document.createTextNode(' ') : E('br');
328
329 for (var i = 0; i < keys.length; i++) {
330 frameEl.appendChild(E('label', {}, [
331 E('input', {
332 'id': this.options.id ? 'widget.' + this.options.id : null,
333 'name': this.options.id || this.options.name,
334 'type': this.options.multiple ? 'checkbox' : 'radio',
335 'class': this.options.multiple ? 'cbi-input-checkbox' : 'cbi-input-radio',
336 'value': keys[i],
337 'checked': (this.values.indexOf(keys[i]) > -1) ? '' : null
338 }),
339 this.choices[keys[i]] || keys[i]
340 ]));
341
342 if (i + 1 == this.options.size)
343 frameEl.appendChild(brEl);
344 }
345 }
346
347 return this.bind(frameEl);
348 },
349
350 bind: function(frameEl) {
351 this.node = frameEl;
352
353 if (this.options.widget == 'select') {
354 this.setUpdateEvents(frameEl.firstChild, 'change', 'click', 'blur');
355 this.setChangeEvents(frameEl.firstChild, 'change');
356 }
357 else {
358 var radioEls = frameEl.querySelectorAll('input[type="radio"]');
359 for (var i = 0; i < radioEls.length; i++) {
360 this.setUpdateEvents(radioEls[i], 'change', 'click', 'blur');
361 this.setChangeEvents(radioEls[i], 'change', 'click', 'blur');
362 }
363 }
364
365 L.dom.bindClassInstance(frameEl, this);
366
367 return frameEl;
368 },
369
370 getValue: function() {
371 if (this.options.widget == 'select')
372 return this.node.firstChild.value;
373
374 var radioEls = frameEl.querySelectorAll('input[type="radio"]');
375 for (var i = 0; i < radioEls.length; i++)
376 if (radioEls[i].checked)
377 return radioEls[i].value;
378
379 return null;
380 },
381
382 setValue: function(value) {
383 if (this.options.widget == 'select') {
384 if (value == null)
385 value = '';
386
387 for (var i = 0; i < this.node.firstChild.options.length; i++)
388 this.node.firstChild.options[i].selected = (this.node.firstChild.options[i].value == value);
389
390 return;
391 }
392
393 var radioEls = frameEl.querySelectorAll('input[type="radio"]');
394 for (var i = 0; i < radioEls.length; i++)
395 radioEls[i].checked = (radioEls[i].value == value);
396 }
397 });
398
399 var UIDropdown = UIElement.extend({
400 __init__: function(value, choices, options) {
401 if (typeof(choices) != 'object')
402 choices = {};
403
404 if (!Array.isArray(value))
405 this.values = (value != null && value != '') ? [ value ] : [];
406 else
407 this.values = value;
408
409 this.choices = choices;
410 this.options = Object.assign({
411 sort: true,
412 multiple: Array.isArray(value),
413 optional: true,
414 select_placeholder: _('-- Please choose --'),
415 custom_placeholder: _('-- custom --'),
416 display_items: 3,
417 dropdown_items: -1,
418 create: false,
419 create_query: '.create-item-input',
420 create_template: 'script[type="item-template"]'
421 }, options);
422 },
423
424 render: function() {
425 var sb = E('div', {
426 'id': this.options.id,
427 'class': 'cbi-dropdown',
428 'multiple': this.options.multiple ? '' : null,
429 'optional': this.options.optional ? '' : null,
430 }, E('ul'));
431
432 var keys = Object.keys(this.choices);
433
434 if (this.options.sort === true)
435 keys.sort();
436 else if (Array.isArray(this.options.sort))
437 keys = this.options.sort;
438
439 if (this.options.create)
440 for (var i = 0; i < this.values.length; i++)
441 if (!this.choices.hasOwnProperty(this.values[i]))
442 keys.push(this.values[i]);
443
444 for (var i = 0; i < keys.length; i++)
445 sb.lastElementChild.appendChild(E('li', {
446 'data-value': keys[i],
447 'selected': (this.values.indexOf(keys[i]) > -1) ? '' : null
448 }, this.choices[keys[i]] || keys[i]));
449
450 if (this.options.create) {
451 var createEl = E('input', {
452 'type': 'text',
453 'class': 'create-item-input',
454 'readonly': this.options.readonly ? '' : null,
455 'maxlength': this.options.maxlength,
456 'placeholder': this.options.custom_placeholder || this.options.placeholder
457 });
458
459 if (this.options.datatype)
460 L.ui.addValidator(createEl, this.options.datatype,
461 true, null, 'blur', 'keyup');
462
463 sb.lastElementChild.appendChild(E('li', { 'data-value': '-' }, createEl));
464 }
465
466 if (this.options.create_markup)
467 sb.appendChild(E('script', { type: 'item-template' },
468 this.options.create_markup));
469
470 return this.bind(sb);
471 },
472
473 bind: function(sb) {
474 var o = this.options;
475
476 o.multiple = sb.hasAttribute('multiple');
477 o.optional = sb.hasAttribute('optional');
478 o.placeholder = sb.getAttribute('placeholder') || o.placeholder;
479 o.display_items = parseInt(sb.getAttribute('display-items') || o.display_items);
480 o.dropdown_items = parseInt(sb.getAttribute('dropdown-items') || o.dropdown_items);
481 o.create_query = sb.getAttribute('item-create') || o.create_query;
482 o.create_template = sb.getAttribute('item-template') || o.create_template;
483
484 var ul = sb.querySelector('ul'),
485 more = sb.appendChild(E('span', { class: 'more', tabindex: -1 }, '···')),
486 open = sb.appendChild(E('span', { class: 'open', tabindex: -1 }, '▾')),
487 canary = sb.appendChild(E('div')),
488 create = sb.querySelector(this.options.create_query),
489 ndisplay = this.options.display_items,
490 n = 0;
491
492 if (this.options.multiple) {
493 var items = ul.querySelectorAll('li');
494
495 for (var i = 0; i < items.length; i++) {
496 this.transformItem(sb, items[i]);
497
498 if (items[i].hasAttribute('selected') && ndisplay-- > 0)
499 items[i].setAttribute('display', n++);
500 }
501 }
502 else {
503 if (this.options.optional && !ul.querySelector('li[data-value=""]')) {
504 var placeholder = E('li', { placeholder: '' },
505 this.options.select_placeholder || this.options.placeholder);
506
507 ul.firstChild
508 ? ul.insertBefore(placeholder, ul.firstChild)
509 : ul.appendChild(placeholder);
510 }
511
512 var items = ul.querySelectorAll('li'),
513 sel = sb.querySelectorAll('[selected]');
514
515 sel.forEach(function(s) {
516 s.removeAttribute('selected');
517 });
518
519 var s = sel[0] || items[0];
520 if (s) {
521 s.setAttribute('selected', '');
522 s.setAttribute('display', n++);
523 }
524
525 ndisplay--;
526 }
527
528 this.saveValues(sb, ul);
529
530 ul.setAttribute('tabindex', -1);
531 sb.setAttribute('tabindex', 0);
532
533 if (ndisplay < 0)
534 sb.setAttribute('more', '')
535 else
536 sb.removeAttribute('more');
537
538 if (ndisplay == this.options.display_items)
539 sb.setAttribute('empty', '')
540 else
541 sb.removeAttribute('empty');
542
543 L.dom.content(more, (ndisplay == this.options.display_items)
544 ? (this.options.select_placeholder || this.options.placeholder) : '···');
545
546
547 sb.addEventListener('click', this.handleClick.bind(this));
548 sb.addEventListener('keydown', this.handleKeydown.bind(this));
549 sb.addEventListener('cbi-dropdown-close', this.handleDropdownClose.bind(this));
550 sb.addEventListener('cbi-dropdown-select', this.handleDropdownSelect.bind(this));
551
552 if ('ontouchstart' in window) {
553 sb.addEventListener('touchstart', function(ev) { ev.stopPropagation(); });
554 window.addEventListener('touchstart', this.closeAllDropdowns);
555 }
556 else {
557 sb.addEventListener('mouseover', this.handleMouseover.bind(this));
558 sb.addEventListener('focus', this.handleFocus.bind(this));
559
560 canary.addEventListener('focus', this.handleCanaryFocus.bind(this));
561
562 window.addEventListener('mouseover', this.setFocus);
563 window.addEventListener('click', this.closeAllDropdowns);
564 }
565
566 if (create) {
567 create.addEventListener('keydown', this.handleCreateKeydown.bind(this));
568 create.addEventListener('focus', this.handleCreateFocus.bind(this));
569 create.addEventListener('blur', this.handleCreateBlur.bind(this));
570
571 var li = findParent(create, 'li');
572
573 li.setAttribute('unselectable', '');
574 li.addEventListener('click', this.handleCreateClick.bind(this));
575 }
576
577 this.node = sb;
578
579 this.setUpdateEvents(sb, 'cbi-dropdown-open', 'cbi-dropdown-close');
580 this.setChangeEvents(sb, 'cbi-dropdown-change', 'cbi-dropdown-close');
581
582 L.dom.bindClassInstance(sb, this);
583
584 return sb;
585 },
586
587 openDropdown: function(sb) {
588 var st = window.getComputedStyle(sb, null),
589 ul = sb.querySelector('ul'),
590 li = ul.querySelectorAll('li'),
591 fl = findParent(sb, '.cbi-value-field'),
592 sel = ul.querySelector('[selected]'),
593 rect = sb.getBoundingClientRect(),
594 items = Math.min(this.options.dropdown_items, li.length);
595
596 document.querySelectorAll('.cbi-dropdown[open]').forEach(function(s) {
597 s.dispatchEvent(new CustomEvent('cbi-dropdown-close', {}));
598 });
599
600 sb.setAttribute('open', '');
601
602 var pv = ul.cloneNode(true);
603 pv.classList.add('preview');
604
605 if (fl)
606 fl.classList.add('cbi-dropdown-open');
607
608 if ('ontouchstart' in window) {
609 var vpWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
610 vpHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
611 scrollFrom = window.pageYOffset,
612 scrollTo = scrollFrom + rect.top - vpHeight * 0.5,
613 start = null;
614
615 ul.style.top = sb.offsetHeight + 'px';
616 ul.style.left = -rect.left + 'px';
617 ul.style.right = (rect.right - vpWidth) + 'px';
618 ul.style.maxHeight = (vpHeight * 0.5) + 'px';
619 ul.style.WebkitOverflowScrolling = 'touch';
620
621 var scrollStep = function(timestamp) {
622 if (!start) {
623 start = timestamp;
624 ul.scrollTop = sel ? Math.max(sel.offsetTop - sel.offsetHeight, 0) : 0;
625 }
626
627 var duration = Math.max(timestamp - start, 1);
628 if (duration < 100) {
629 document.body.scrollTop = scrollFrom + (scrollTo - scrollFrom) * (duration / 100);
630 window.requestAnimationFrame(scrollStep);
631 }
632 else {
633 document.body.scrollTop = scrollTo;
634 }
635 };
636
637 window.requestAnimationFrame(scrollStep);
638 }
639 else {
640 ul.style.maxHeight = '1px';
641 ul.style.top = ul.style.bottom = '';
642
643 window.requestAnimationFrame(function() {
644 var itemHeight = li[Math.max(0, li.length - 2)].getBoundingClientRect().height,
645 fullHeight = 0,
646 spaceAbove = rect.top,
647 spaceBelow = window.innerHeight - rect.height - rect.top;
648
649 for (var i = 0; i < (items == -1 ? li.length : items); i++)
650 fullHeight += li[i].getBoundingClientRect().height;
651
652 if (fullHeight <= spaceBelow) {
653 ul.style.top = rect.height + 'px';
654 ul.style.maxHeight = spaceBelow + 'px';
655 }
656 else if (fullHeight <= spaceAbove) {
657 ul.style.bottom = rect.height + 'px';
658 ul.style.maxHeight = spaceAbove + 'px';
659 }
660 else if (spaceBelow >= spaceAbove) {
661 ul.style.top = rect.height + 'px';
662 ul.style.maxHeight = (spaceBelow - (spaceBelow % itemHeight)) + 'px';
663 }
664 else {
665 ul.style.bottom = rect.height + 'px';
666 ul.style.maxHeight = (spaceAbove - (spaceAbove % itemHeight)) + 'px';
667 }
668
669 ul.scrollTop = sel ? Math.max(sel.offsetTop - sel.offsetHeight, 0) : 0;
670 });
671 }
672
673 var cboxes = ul.querySelectorAll('[selected] input[type="checkbox"]');
674 for (var i = 0; i < cboxes.length; i++) {
675 cboxes[i].checked = true;
676 cboxes[i].disabled = (cboxes.length == 1 && !this.options.optional);
677 };
678
679 ul.classList.add('dropdown');
680
681 sb.insertBefore(pv, ul.nextElementSibling);
682
683 li.forEach(function(l) {
684 l.setAttribute('tabindex', 0);
685 });
686
687 sb.lastElementChild.setAttribute('tabindex', 0);
688
689 this.setFocus(sb, sel || li[0], true);
690 },
691
692 closeDropdown: function(sb, no_focus) {
693 if (!sb.hasAttribute('open'))
694 return;
695
696 var pv = sb.querySelector('ul.preview'),
697 ul = sb.querySelector('ul.dropdown'),
698 li = ul.querySelectorAll('li'),
699 fl = findParent(sb, '.cbi-value-field');
700
701 li.forEach(function(l) { l.removeAttribute('tabindex'); });
702 sb.lastElementChild.removeAttribute('tabindex');
703
704 sb.removeChild(pv);
705 sb.removeAttribute('open');
706 sb.style.width = sb.style.height = '';
707
708 ul.classList.remove('dropdown');
709 ul.style.top = ul.style.bottom = ul.style.maxHeight = '';
710
711 if (fl)
712 fl.classList.remove('cbi-dropdown-open');
713
714 if (!no_focus)
715 this.setFocus(sb, sb);
716
717 this.saveValues(sb, ul);
718 },
719
720 toggleItem: function(sb, li, force_state) {
721 if (li.hasAttribute('unselectable'))
722 return;
723
724 if (this.options.multiple) {
725 var cbox = li.querySelector('input[type="checkbox"]'),
726 items = li.parentNode.querySelectorAll('li'),
727 label = sb.querySelector('ul.preview'),
728 sel = li.parentNode.querySelectorAll('[selected]').length,
729 more = sb.querySelector('.more'),
730 ndisplay = this.options.display_items,
731 n = 0;
732
733 if (li.hasAttribute('selected')) {
734 if (force_state !== true) {
735 if (sel > 1 || this.options.optional) {
736 li.removeAttribute('selected');
737 cbox.checked = cbox.disabled = false;
738 sel--;
739 }
740 else {
741 cbox.disabled = true;
742 }
743 }
744 }
745 else {
746 if (force_state !== false) {
747 li.setAttribute('selected', '');
748 cbox.checked = true;
749 cbox.disabled = false;
750 sel++;
751 }
752 }
753
754 while (label && label.firstElementChild)
755 label.removeChild(label.firstElementChild);
756
757 for (var i = 0; i < items.length; i++) {
758 items[i].removeAttribute('display');
759 if (items[i].hasAttribute('selected')) {
760 if (ndisplay-- > 0) {
761 items[i].setAttribute('display', n++);
762 if (label)
763 label.appendChild(items[i].cloneNode(true));
764 }
765 var c = items[i].querySelector('input[type="checkbox"]');
766 if (c)
767 c.disabled = (sel == 1 && !this.options.optional);
768 }
769 }
770
771 if (ndisplay < 0)
772 sb.setAttribute('more', '');
773 else
774 sb.removeAttribute('more');
775
776 if (ndisplay === this.options.display_items)
777 sb.setAttribute('empty', '');
778 else
779 sb.removeAttribute('empty');
780
781 L.dom.content(more, (ndisplay === this.options.display_items)
782 ? (this.options.select_placeholder || this.options.placeholder) : '···');
783 }
784 else {
785 var sel = li.parentNode.querySelector('[selected]');
786 if (sel) {
787 sel.removeAttribute('display');
788 sel.removeAttribute('selected');
789 }
790
791 li.setAttribute('display', 0);
792 li.setAttribute('selected', '');
793
794 this.closeDropdown(sb, true);
795 }
796
797 this.saveValues(sb, li.parentNode);
798 },
799
800 transformItem: function(sb, li) {
801 var cbox = E('form', {}, E('input', { type: 'checkbox', tabindex: -1, onclick: 'event.preventDefault()' })),
802 label = E('label');
803
804 while (li.firstChild)
805 label.appendChild(li.firstChild);
806
807 li.appendChild(cbox);
808 li.appendChild(label);
809 },
810
811 saveValues: function(sb, ul) {
812 var sel = ul.querySelectorAll('li[selected]'),
813 div = sb.lastElementChild,
814 name = this.options.name,
815 strval = '',
816 values = [];
817
818 while (div.lastElementChild)
819 div.removeChild(div.lastElementChild);
820
821 sel.forEach(function (s) {
822 if (s.hasAttribute('placeholder'))
823 return;
824
825 var v = {
826 text: s.innerText,
827 value: s.hasAttribute('data-value') ? s.getAttribute('data-value') : s.innerText,
828 element: s
829 };
830
831 div.appendChild(E('input', {
832 type: 'hidden',
833 name: name,
834 value: v.value
835 }));
836
837 values.push(v);
838
839 strval += strval.length ? ' ' + v.value : v.value;
840 });
841
842 var detail = {
843 instance: this,
844 element: sb
845 };
846
847 if (this.options.multiple)
848 detail.values = values;
849 else
850 detail.value = values.length ? values[0] : null;
851
852 sb.value = strval;
853
854 sb.dispatchEvent(new CustomEvent('cbi-dropdown-change', {
855 bubbles: true,
856 detail: detail
857 }));
858 },
859
860 setValues: function(sb, values) {
861 var ul = sb.querySelector('ul');
862
863 if (this.options.create) {
864 for (var value in values) {
865 this.createItems(sb, value);
866
867 if (!this.options.multiple)
868 break;
869 }
870 }
871
872 if (this.options.multiple) {
873 var lis = ul.querySelectorAll('li[data-value]');
874 for (var i = 0; i < lis.length; i++) {
875 var value = lis[i].getAttribute('data-value');
876 if (values === null || !(value in values))
877 this.toggleItem(sb, lis[i], false);
878 else
879 this.toggleItem(sb, lis[i], true);
880 }
881 }
882 else {
883 var ph = ul.querySelector('li[placeholder]');
884 if (ph)
885 this.toggleItem(sb, ph);
886
887 var lis = ul.querySelectorAll('li[data-value]');
888 for (var i = 0; i < lis.length; i++) {
889 var value = lis[i].getAttribute('data-value');
890 if (values !== null && (value in values))
891 this.toggleItem(sb, lis[i]);
892 }
893 }
894 },
895
896 setFocus: function(sb, elem, scroll) {
897 if (sb && sb.hasAttribute && sb.hasAttribute('locked-in'))
898 return;
899
900 if (sb.target && findParent(sb.target, 'ul.dropdown'))
901 return;
902
903 document.querySelectorAll('.focus').forEach(function(e) {
904 if (!matchesElem(e, 'input')) {
905 e.classList.remove('focus');
906 e.blur();
907 }
908 });
909
910 if (elem) {
911 elem.focus();
912 elem.classList.add('focus');
913
914 if (scroll)
915 elem.parentNode.scrollTop = elem.offsetTop - elem.parentNode.offsetTop;
916 }
917 },
918
919 createItems: function(sb, value) {
920 var sbox = this,
921 val = (value || '').trim(),
922 ul = sb.querySelector('ul');
923
924 if (!sbox.options.multiple)
925 val = val.length ? [ val ] : [];
926 else
927 val = val.length ? val.split(/\s+/) : [];
928
929 val.forEach(function(item) {
930 var new_item = null;
931
932 ul.childNodes.forEach(function(li) {
933 if (li.getAttribute && li.getAttribute('data-value') === item)
934 new_item = li;
935 });
936
937 if (!new_item) {
938 var markup,
939 tpl = sb.querySelector(sbox.options.create_template);
940
941 if (tpl)
942 markup = (tpl.textContent || tpl.innerHTML || tpl.firstChild.data).replace(/^<!--|-->$/, '').trim();
943 else
944 markup = '<li data-value="{{value}}">{{value}}</li>';
945
946 new_item = E(markup.replace(/{{value}}/g, '%h'.format(item)));
947
948 if (sbox.options.multiple) {
949 sbox.transformItem(sb, new_item);
950 }
951 else {
952 var old = ul.querySelector('li[created]');
953 if (old)
954 ul.removeChild(old);
955
956 new_item.setAttribute('created', '');
957 }
958
959 new_item = ul.insertBefore(new_item, ul.lastElementChild);
960 }
961
962 sbox.toggleItem(sb, new_item, true);
963 sbox.setFocus(sb, new_item, true);
964 });
965 },
966
967 closeAllDropdowns: function() {
968 document.querySelectorAll('.cbi-dropdown[open]').forEach(function(s) {
969 s.dispatchEvent(new CustomEvent('cbi-dropdown-close', {}));
970 });
971 },
972
973 handleClick: function(ev) {
974 var sb = ev.currentTarget;
975
976 if (!sb.hasAttribute('open')) {
977 if (!matchesElem(ev.target, 'input'))
978 this.openDropdown(sb);
979 }
980 else {
981 var li = findParent(ev.target, 'li');
982 if (li && li.parentNode.classList.contains('dropdown'))
983 this.toggleItem(sb, li);
984 else if (li && li.parentNode.classList.contains('preview'))
985 this.closeDropdown(sb);
986 else if (matchesElem(ev.target, 'span.open, span.more'))
987 this.closeDropdown(sb);
988 }
989
990 ev.preventDefault();
991 ev.stopPropagation();
992 },
993
994 handleKeydown: function(ev) {
995 var sb = ev.currentTarget;
996
997 if (matchesElem(ev.target, 'input'))
998 return;
999
1000 if (!sb.hasAttribute('open')) {
1001 switch (ev.keyCode) {
1002 case 37:
1003 case 38:
1004 case 39:
1005 case 40:
1006 this.openDropdown(sb);
1007 ev.preventDefault();
1008 }
1009 }
1010 else {
1011 var active = findParent(document.activeElement, 'li');
1012
1013 switch (ev.keyCode) {
1014 case 27:
1015 this.closeDropdown(sb);
1016 break;
1017
1018 case 13:
1019 if (active) {
1020 if (!active.hasAttribute('selected'))
1021 this.toggleItem(sb, active);
1022 this.closeDropdown(sb);
1023 ev.preventDefault();
1024 }
1025 break;
1026
1027 case 32:
1028 if (active) {
1029 this.toggleItem(sb, active);
1030 ev.preventDefault();
1031 }
1032 break;
1033
1034 case 38:
1035 if (active && active.previousElementSibling) {
1036 this.setFocus(sb, active.previousElementSibling);
1037 ev.preventDefault();
1038 }
1039 break;
1040
1041 case 40:
1042 if (active && active.nextElementSibling) {
1043 this.setFocus(sb, active.nextElementSibling);
1044 ev.preventDefault();
1045 }
1046 break;
1047 }
1048 }
1049 },
1050
1051 handleDropdownClose: function(ev) {
1052 var sb = ev.currentTarget;
1053
1054 this.closeDropdown(sb, true);
1055 },
1056
1057 handleDropdownSelect: function(ev) {
1058 var sb = ev.currentTarget,
1059 li = findParent(ev.target, 'li');
1060
1061 if (!li)
1062 return;
1063
1064 this.toggleItem(sb, li);
1065 this.closeDropdown(sb, true);
1066 },
1067
1068 handleMouseover: function(ev) {
1069 var sb = ev.currentTarget;
1070
1071 if (!sb.hasAttribute('open'))
1072 return;
1073
1074 var li = findParent(ev.target, 'li');
1075
1076 if (li && li.parentNode.classList.contains('dropdown'))
1077 this.setFocus(sb, li);
1078 },
1079
1080 handleFocus: function(ev) {
1081 var sb = ev.currentTarget;
1082
1083 document.querySelectorAll('.cbi-dropdown[open]').forEach(function(s) {
1084 if (s !== sb || sb.hasAttribute('open'))
1085 s.dispatchEvent(new CustomEvent('cbi-dropdown-close', {}));
1086 });
1087 },
1088
1089 handleCanaryFocus: function(ev) {
1090 this.closeDropdown(ev.currentTarget.parentNode);
1091 },
1092
1093 handleCreateKeydown: function(ev) {
1094 var input = ev.currentTarget,
1095 sb = findParent(input, '.cbi-dropdown');
1096
1097 switch (ev.keyCode) {
1098 case 13:
1099 ev.preventDefault();
1100
1101 if (input.classList.contains('cbi-input-invalid'))
1102 return;
1103
1104 this.createItems(sb, input.value);
1105 input.value = '';
1106 input.blur();
1107 break;
1108 }
1109 },
1110
1111 handleCreateFocus: function(ev) {
1112 var input = ev.currentTarget,
1113 cbox = findParent(input, 'li').querySelector('input[type="checkbox"]'),
1114 sb = findParent(input, '.cbi-dropdown');
1115
1116 if (cbox)
1117 cbox.checked = true;
1118
1119 sb.setAttribute('locked-in', '');
1120 },
1121
1122 handleCreateBlur: function(ev) {
1123 var input = ev.currentTarget,
1124 cbox = findParent(input, 'li').querySelector('input[type="checkbox"]'),
1125 sb = findParent(input, '.cbi-dropdown');
1126
1127 if (cbox)
1128 cbox.checked = false;
1129
1130 sb.removeAttribute('locked-in');
1131 },
1132
1133 handleCreateClick: function(ev) {
1134 ev.currentTarget.querySelector(this.options.create_query).focus();
1135 },
1136
1137 setValue: function(values) {
1138 if (this.options.multiple) {
1139 if (!Array.isArray(values))
1140 values = (values != null && values != '') ? [ values ] : [];
1141
1142 var v = {};
1143
1144 for (var i = 0; i < values.length; i++)
1145 v[values[i]] = true;
1146
1147 this.setValues(this.node, v);
1148 }
1149 else {
1150 var v = {};
1151
1152 if (values != null) {
1153 if (Array.isArray(values))
1154 v[values[0]] = true;
1155 else
1156 v[values] = true;
1157 }
1158
1159 this.setValues(this.node, v);
1160 }
1161 },
1162
1163 getValue: function() {
1164 var div = this.node.lastElementChild,
1165 h = div.querySelectorAll('input[type="hidden"]'),
1166 v = [];
1167
1168 for (var i = 0; i < h.length; i++)
1169 v.push(h[i].value);
1170
1171 return this.options.multiple ? v : v[0];
1172 }
1173 });
1174
1175 var UICombobox = UIDropdown.extend({
1176 __init__: function(value, choices, options) {
1177 this.super('__init__', [ value, choices, Object.assign({
1178 select_placeholder: _('-- Please choose --'),
1179 custom_placeholder: _('-- custom --'),
1180 dropdown_items: -1,
1181 sort: true
1182 }, options, {
1183 multiple: false,
1184 create: true,
1185 optional: true
1186 }) ]);
1187 }
1188 });
1189
1190 var UIDynamicList = UIElement.extend({
1191 __init__: function(values, choices, options) {
1192 if (!Array.isArray(values))
1193 values = (values != null && values != '') ? [ values ] : [];
1194
1195 if (typeof(choices) != 'object')
1196 choices = null;
1197
1198 this.values = values;
1199 this.choices = choices;
1200 this.options = Object.assign({}, options, {
1201 multiple: false,
1202 optional: true
1203 });
1204 },
1205
1206 render: function() {
1207 var dl = E('div', {
1208 'id': this.options.id,
1209 'class': 'cbi-dynlist'
1210 }, E('div', { 'class': 'add-item' }));
1211
1212 if (this.choices) {
1213 var cbox = new UICombobox(null, this.choices, this.options);
1214 dl.lastElementChild.appendChild(cbox.render());
1215 }
1216 else {
1217 var inputEl = E('input', {
1218 'id': this.options.id ? 'widget.' + this.options.id : null,
1219 'type': 'text',
1220 'class': 'cbi-input-text',
1221 'placeholder': this.options.placeholder
1222 });
1223
1224 dl.lastElementChild.appendChild(inputEl);
1225 dl.lastElementChild.appendChild(E('div', { 'class': 'cbi-button cbi-button-add' }, '+'));
1226
1227 if (this.options.datatype)
1228 L.ui.addValidator(inputEl, this.options.datatype,
1229 true, null, 'blur', 'keyup');
1230 }
1231
1232 for (var i = 0; i < this.values.length; i++)
1233 this.addItem(dl, this.values[i],
1234 this.choices ? this.choices[this.values[i]] : null);
1235
1236 return this.bind(dl);
1237 },
1238
1239 bind: function(dl) {
1240 dl.addEventListener('click', L.bind(this.handleClick, this));
1241 dl.addEventListener('keydown', L.bind(this.handleKeydown, this));
1242 dl.addEventListener('cbi-dropdown-change', L.bind(this.handleDropdownChange, this));
1243
1244 this.node = dl;
1245
1246 this.setUpdateEvents(dl, 'cbi-dynlist-change');
1247 this.setChangeEvents(dl, 'cbi-dynlist-change');
1248
1249 L.dom.bindClassInstance(dl, this);
1250
1251 return dl;
1252 },
1253
1254 addItem: function(dl, value, text, flash) {
1255 var exists = false,
1256 new_item = E('div', { 'class': flash ? 'item flash' : 'item', 'tabindex': 0 }, [
1257 E('span', {}, text || value),
1258 E('input', {
1259 'type': 'hidden',
1260 'name': this.options.name,
1261 'value': value })]);
1262
1263 dl.querySelectorAll('.item').forEach(function(item) {
1264 if (exists)
1265 return;
1266
1267 var hidden = item.querySelector('input[type="hidden"]');
1268
1269 if (hidden && hidden.parentNode !== item)
1270 hidden = null;
1271
1272 if (hidden && hidden.value === value)
1273 exists = true;
1274 });
1275
1276 if (!exists) {
1277 var ai = dl.querySelector('.add-item');
1278 ai.parentNode.insertBefore(new_item, ai);
1279 }
1280
1281 dl.dispatchEvent(new CustomEvent('cbi-dynlist-change', {
1282 bubbles: true,
1283 detail: {
1284 instance: this,
1285 element: dl,
1286 value: value,
1287 add: true
1288 }
1289 }));
1290 },
1291
1292 removeItem: function(dl, item) {
1293 var value = item.querySelector('input[type="hidden"]').value;
1294 var sb = dl.querySelector('.cbi-dropdown');
1295 if (sb)
1296 sb.querySelectorAll('ul > li').forEach(function(li) {
1297 if (li.getAttribute('data-value') === value) {
1298 if (li.hasAttribute('dynlistcustom'))
1299 li.parentNode.removeChild(li);
1300 else
1301 li.removeAttribute('unselectable');
1302 }
1303 });
1304
1305 item.parentNode.removeChild(item);
1306
1307 dl.dispatchEvent(new CustomEvent('cbi-dynlist-change', {
1308 bubbles: true,
1309 detail: {
1310 instance: this,
1311 element: dl,
1312 value: value,
1313 remove: true
1314 }
1315 }));
1316 },
1317
1318 handleClick: function(ev) {
1319 var dl = ev.currentTarget,
1320 item = findParent(ev.target, '.item');
1321
1322 if (item) {
1323 this.removeItem(dl, item);
1324 }
1325 else if (matchesElem(ev.target, '.cbi-button-add')) {
1326 var input = ev.target.previousElementSibling;
1327 if (input.value.length && !input.classList.contains('cbi-input-invalid')) {
1328 this.addItem(dl, input.value, null, true);
1329 input.value = '';
1330 }
1331 }
1332 },
1333
1334 handleDropdownChange: function(ev) {
1335 var dl = ev.currentTarget,
1336 sbIn = ev.detail.instance,
1337 sbEl = ev.detail.element,
1338 sbVal = ev.detail.value;
1339
1340 if (sbVal === null)
1341 return;
1342
1343 sbIn.setValues(sbEl, null);
1344 sbVal.element.setAttribute('unselectable', '');
1345
1346 if (sbVal.element.hasAttribute('created')) {
1347 sbVal.element.removeAttribute('created');
1348 sbVal.element.setAttribute('dynlistcustom', '');
1349 }
1350
1351 this.addItem(dl, sbVal.value, sbVal.text, true);
1352 },
1353
1354 handleKeydown: function(ev) {
1355 var dl = ev.currentTarget,
1356 item = findParent(ev.target, '.item');
1357
1358 if (item) {
1359 switch (ev.keyCode) {
1360 case 8: /* backspace */
1361 if (item.previousElementSibling)
1362 item.previousElementSibling.focus();
1363
1364 this.removeItem(dl, item);
1365 break;
1366
1367 case 46: /* delete */
1368 if (item.nextElementSibling) {
1369 if (item.nextElementSibling.classList.contains('item'))
1370 item.nextElementSibling.focus();
1371 else
1372 item.nextElementSibling.firstElementChild.focus();
1373 }
1374
1375 this.removeItem(dl, item);
1376 break;
1377 }
1378 }
1379 else if (matchesElem(ev.target, '.cbi-input-text')) {
1380 switch (ev.keyCode) {
1381 case 13: /* enter */
1382 if (ev.target.value.length && !ev.target.classList.contains('cbi-input-invalid')) {
1383 this.addItem(dl, ev.target.value, null, true);
1384 ev.target.value = '';
1385 ev.target.blur();
1386 ev.target.focus();
1387 }
1388
1389 ev.preventDefault();
1390 break;
1391 }
1392 }
1393 },
1394
1395 getValue: function() {
1396 var items = this.node.querySelectorAll('.item > input[type="hidden"]'),
1397 input = this.node.querySelector('.add-item > input[type="text"]'),
1398 v = [];
1399
1400 for (var i = 0; i < items.length; i++)
1401 v.push(items[i].value);
1402
1403 if (input && input.value != null && input.value.match(/\S/) &&
1404 input.classList.contains('cbi-input-invalid') == false &&
1405 v.filter(function(s) { return s == input.value }).length == 0)
1406 v.push(input.value);
1407
1408 return v;
1409 },
1410
1411 setValue: function(values) {
1412 if (!Array.isArray(values))
1413 values = (values != null && values != '') ? [ values ] : [];
1414
1415 var items = this.node.querySelectorAll('.item');
1416
1417 for (var i = 0; i < items.length; i++)
1418 if (items[i].parentNode === this.node)
1419 this.removeItem(this.node, items[i]);
1420
1421 for (var i = 0; i < values.length; i++)
1422 this.addItem(this.node, values[i],
1423 this.choices ? this.choices[values[i]] : null);
1424 }
1425 });
1426
1427 var UIHiddenfield = UIElement.extend({
1428 __init__: function(value, options) {
1429 this.value = value;
1430 this.options = Object.assign({
1431
1432 }, options);
1433 },
1434
1435 render: function() {
1436 var hiddenEl = E('input', {
1437 'id': this.options.id,
1438 'type': 'hidden',
1439 'value': this.value
1440 });
1441
1442 return this.bind(hiddenEl);
1443 },
1444
1445 bind: function(hiddenEl) {
1446 this.node = hiddenEl;
1447
1448 L.dom.bindClassInstance(hiddenEl, this);
1449
1450 return hiddenEl;
1451 },
1452
1453 getValue: function() {
1454 return this.node.value;
1455 },
1456
1457 setValue: function(value) {
1458 this.node.value = value;
1459 }
1460 });
1461
1462 var UIFileUpload = UIElement.extend({
1463 __init__: function(value, options) {
1464 this.value = value;
1465 this.options = Object.assign({
1466 show_hidden: false,
1467 enable_upload: true,
1468 enable_remove: true,
1469 root_directory: '/etc/luci-uploads'
1470 }, options);
1471 },
1472
1473 callFileStat: rpc.declare({
1474 'object': 'file',
1475 'method': 'stat',
1476 'params': [ 'path' ],
1477 'expect': { '': {} }
1478 }),
1479
1480 callFileList: rpc.declare({
1481 'object': 'file',
1482 'method': 'list',
1483 'params': [ 'path' ],
1484 'expect': { 'entries': [] }
1485 }),
1486
1487 callFileRemove: rpc.declare({
1488 'object': 'file',
1489 'method': 'remove',
1490 'params': [ 'path' ]
1491 }),
1492
1493 bind: function(browserEl) {
1494 this.node = browserEl;
1495
1496 this.setUpdateEvents(browserEl, 'cbi-fileupload-select', 'cbi-fileupload-cancel');
1497 this.setChangeEvents(browserEl, 'cbi-fileupload-select', 'cbi-fileupload-cancel');
1498
1499 L.dom.bindClassInstance(browserEl, this);
1500
1501 return browserEl;
1502 },
1503
1504 render: function() {
1505 return Promise.resolve(this.value != null ? this.callFileStat(this.value) : null).then(L.bind(function(stat) {
1506 var label;
1507
1508 if (L.isObject(stat) && stat.type != 'directory')
1509 this.stat = stat;
1510
1511 if (this.stat != null)
1512 label = [ this.iconForType(this.stat.type), ' %s (%1000mB)'.format(this.truncatePath(this.stat.path), this.stat.size) ];
1513 else if (this.value != null)
1514 label = [ this.iconForType('file'), ' %s (%s)'.format(this.truncatePath(this.value), _('File not accessible')) ];
1515 else
1516 label = [ _('Select file…') ];
1517
1518 return this.bind(E('div', { 'id': this.options.id }, [
1519 E('button', {
1520 'class': 'btn',
1521 'click': L.ui.createHandlerFn(this, 'handleFileBrowser')
1522 }, label),
1523 E('div', {
1524 'class': 'cbi-filebrowser'
1525 }),
1526 E('input', {
1527 'type': 'hidden',
1528 'name': this.options.name,
1529 'value': this.value
1530 })
1531 ]));
1532 }, this));
1533 },
1534
1535 truncatePath: function(path) {
1536 if (path.length > 50)
1537 path = path.substring(0, 25) + '…' + path.substring(path.length - 25);
1538
1539 return path;
1540 },
1541
1542 iconForType: function(type) {
1543 switch (type) {
1544 case 'symlink':
1545 return E('img', {
1546 'src': L.resource('cbi/link.gif'),
1547 'title': _('Symbolic link'),
1548 'class': 'middle'
1549 });
1550
1551 case 'directory':
1552 return E('img', {
1553 'src': L.resource('cbi/folder.gif'),
1554 'title': _('Directory'),
1555 'class': 'middle'
1556 });
1557
1558 default:
1559 return E('img', {
1560 'src': L.resource('cbi/file.gif'),
1561 'title': _('File'),
1562 'class': 'middle'
1563 });
1564 }
1565 },
1566
1567 canonicalizePath: function(path) {
1568 return path.replace(/\/{2,}/, '/')
1569 .replace(/\/\.(\/|$)/g, '/')
1570 .replace(/[^\/]+\/\.\.(\/|$)/g, '/')
1571 .replace(/\/$/, '');
1572 },
1573
1574 splitPath: function(path) {
1575 var croot = this.canonicalizePath(this.options.root_directory || '/'),
1576 cpath = this.canonicalizePath(path || '/');
1577
1578 if (cpath.length <= croot.length)
1579 return [ croot ];
1580
1581 if (cpath.charAt(croot.length) != '/')
1582 return [ croot ];
1583
1584 var parts = cpath.substring(croot.length + 1).split(/\//);
1585
1586 parts.unshift(croot);
1587
1588 return parts;
1589 },
1590
1591 handleUpload: function(path, list, ev) {
1592 var form = ev.target.parentNode,
1593 fileinput = form.querySelector('input[type="file"]'),
1594 nameinput = form.querySelector('input[type="text"]'),
1595 filename = (nameinput.value != null ? nameinput.value : '').trim();
1596
1597 ev.preventDefault();
1598
1599 if (filename == '' || filename.match(/\//) || fileinput.files[0] == null)
1600 return;
1601
1602 var existing = list.filter(function(e) { return e.name == filename })[0];
1603
1604 if (existing != null && existing.type == 'directory')
1605 return alert(_('A directory with the same name already exists.'));
1606 else if (existing != null && !confirm(_('Overwrite existing file "%s" ?').format(filename)))
1607 return;
1608
1609 var data = new FormData();
1610
1611 data.append('sessionid', L.env.sessionid);
1612 data.append('filename', path + '/' + filename);
1613 data.append('filedata', fileinput.files[0]);
1614
1615 return L.Request.post('/cgi-bin/cgi-upload', data, {
1616 progress: L.bind(function(btn, ev) {
1617 btn.firstChild.data = '%.2f%%'.format((ev.loaded / ev.total) * 100);
1618 }, this, ev.target)
1619 }).then(L.bind(function(path, ev, res) {
1620 var reply = res.json();
1621
1622 if (L.isObject(reply) && reply.failure)
1623 alert(_('Upload request failed: %s').format(reply.message));
1624
1625 return this.handleSelect(path, null, ev);
1626 }, this, path, ev));
1627 },
1628
1629 handleDelete: function(path, fileStat, ev) {
1630 var parent = path.replace(/\/[^\/]+$/, '') || '/',
1631 name = path.replace(/^.+\//, ''),
1632 msg;
1633
1634 ev.preventDefault();
1635
1636 if (fileStat.type == 'directory')
1637 msg = _('Do you really want to recursively delete the directory "%s" ?').format(name);
1638 else
1639 msg = _('Do you really want to delete "%s" ?').format(name);
1640
1641 if (confirm(msg)) {
1642 var button = this.node.firstElementChild,
1643 hidden = this.node.lastElementChild;
1644
1645 if (path == hidden.value) {
1646 L.dom.content(button, _('Select file…'));
1647 hidden.value = '';
1648 }
1649
1650 return this.callFileRemove(path).then(L.bind(function(parent, ev, rc) {
1651 if (rc == 0)
1652 return this.handleSelect(parent, null, ev);
1653 else if (rc == 6)
1654 alert(_('Delete permission denied'));
1655 else
1656 alert(_('Delete request failed: %d %s').format(rc, rpc.getStatusText(rc)));
1657
1658 }, this, parent, ev));
1659 }
1660 },
1661
1662 renderUpload: function(path, list) {
1663 if (!this.options.enable_upload)
1664 return E([]);
1665
1666 return E([
1667 E('a', {
1668 'href': '#',
1669 'class': 'btn cbi-button-positive',
1670 'click': function(ev) {
1671 var uploadForm = ev.target.nextElementSibling,
1672 fileInput = uploadForm.querySelector('input[type="file"]');
1673
1674 ev.target.style.display = 'none';
1675 uploadForm.style.display = '';
1676 fileInput.click();
1677 }
1678 }, _('Upload file…')),
1679 E('div', { 'class': 'upload', 'style': 'display:none' }, [
1680 E('input', {
1681 'type': 'file',
1682 'style': 'display:none',
1683 'change': function(ev) {
1684 var nameinput = ev.target.parentNode.querySelector('input[type="text"]'),
1685 uploadbtn = ev.target.parentNode.querySelector('button.cbi-button-save');
1686
1687 nameinput.value = ev.target.value.replace(/^.+[\/\\]/, '');
1688 uploadbtn.disabled = false;
1689 }
1690 }),
1691 E('button', {
1692 'class': 'btn',
1693 'click': function(ev) {
1694 ev.preventDefault();
1695 ev.target.previousElementSibling.click();
1696 }
1697 }, [ _('Browse…') ]),
1698 E('div', {}, E('input', { 'type': 'text', 'placeholder': _('Filename') })),
1699 E('button', {
1700 'class': 'btn cbi-button-save',
1701 'click': L.ui.createHandlerFn(this, 'handleUpload', path, list),
1702 'disabled': true
1703 }, [ _('Upload file') ])
1704 ])
1705 ]);
1706 },
1707
1708 renderListing: function(container, path, list) {
1709 var breadcrumb = E('p'),
1710 rows = E('ul');
1711
1712 list.sort(function(a, b) {
1713 var isDirA = (a.type == 'directory'),
1714 isDirB = (b.type == 'directory');
1715
1716 if (isDirA != isDirB)
1717 return isDirA < isDirB;
1718
1719 return a.name > b.name;
1720 });
1721
1722 for (var i = 0; i < list.length; i++) {
1723 if (!this.options.show_hidden && list[i].name.charAt(0) == '.')
1724 continue;
1725
1726 var entrypath = this.canonicalizePath(path + '/' + list[i].name),
1727 selected = (entrypath == this.node.lastElementChild.value),
1728 mtime = new Date(list[i].mtime * 1000);
1729
1730 rows.appendChild(E('li', [
1731 E('div', { 'class': 'name' }, [
1732 this.iconForType(list[i].type),
1733 ' ',
1734 E('a', {
1735 'href': '#',
1736 'style': selected ? 'font-weight:bold' : null,
1737 'click': L.ui.createHandlerFn(this, 'handleSelect',
1738 entrypath, list[i].type != 'directory' ? list[i] : null)
1739 }, '%h'.format(list[i].name))
1740 ]),
1741 E('div', { 'class': 'mtime hide-xs' }, [
1742 ' %04d-%02d-%02d %02d:%02d:%02d '.format(
1743 mtime.getFullYear(),
1744 mtime.getMonth() + 1,
1745 mtime.getDate(),
1746 mtime.getHours(),
1747 mtime.getMinutes(),
1748 mtime.getSeconds())
1749 ]),
1750 E('div', [
1751 selected ? E('button', {
1752 'class': 'btn',
1753 'click': L.ui.createHandlerFn(this, 'handleReset')
1754 }, [ _('Deselect') ]) : '',
1755 this.options.enable_remove ? E('button', {
1756 'class': 'btn cbi-button-negative',
1757 'click': L.ui.createHandlerFn(this, 'handleDelete', entrypath, list[i])
1758 }, [ _('Delete') ]) : ''
1759 ])
1760 ]));
1761 }
1762
1763 if (!rows.firstElementChild)
1764 rows.appendChild(E('em', _('No entries in this directory')));
1765
1766 var dirs = this.splitPath(path),
1767 cur = '';
1768
1769 for (var i = 0; i < dirs.length; i++) {
1770 cur = cur ? cur + '/' + dirs[i] : dirs[i];
1771 L.dom.append(breadcrumb, [
1772 i ? ' » ' : '',
1773 E('a', {
1774 'href': '#',
1775 'click': L.ui.createHandlerFn(this, 'handleSelect', cur || '/', null)
1776 }, dirs[i] != '' ? '%h'.format(dirs[i]) : E('em', '(root)')),
1777 ]);
1778 }
1779
1780 L.dom.content(container, [
1781 breadcrumb,
1782 rows,
1783 E('div', { 'class': 'right' }, [
1784 this.renderUpload(path, list),
1785 E('a', {
1786 'href': '#',
1787 'class': 'btn',
1788 'click': L.ui.createHandlerFn(this, 'handleCancel')
1789 }, _('Cancel'))
1790 ]),
1791 ]);
1792 },
1793
1794 handleCancel: function(ev) {
1795 var button = this.node.firstElementChild,
1796 browser = button.nextElementSibling;
1797
1798 browser.classList.remove('open');
1799 button.style.display = '';
1800
1801 this.node.dispatchEvent(new CustomEvent('cbi-fileupload-cancel', {}));
1802 },
1803
1804 handleReset: function(ev) {
1805 var button = this.node.firstElementChild,
1806 hidden = this.node.lastElementChild;
1807
1808 hidden.value = '';
1809 L.dom.content(button, _('Select file…'));
1810
1811 this.handleCancel(ev);
1812 },
1813
1814 handleSelect: function(path, fileStat, ev) {
1815 var browser = L.dom.parent(ev.target, '.cbi-filebrowser'),
1816 ul = browser.querySelector('ul');
1817
1818 if (fileStat == null) {
1819 L.dom.content(ul, E('em', { 'class': 'spinning' }, _('Loading directory contents…')));
1820 this.callFileList(path).then(L.bind(this.renderListing, this, browser, path));
1821 }
1822 else {
1823 var button = this.node.firstElementChild,
1824 hidden = this.node.lastElementChild;
1825
1826 path = this.canonicalizePath(path);
1827
1828 L.dom.content(button, [
1829 this.iconForType(fileStat.type),
1830 ' %s (%1000mB)'.format(this.truncatePath(path), fileStat.size)
1831 ]);
1832
1833 browser.classList.remove('open');
1834 button.style.display = '';
1835 hidden.value = path;
1836
1837 this.stat = Object.assign({ path: path }, fileStat);
1838 this.node.dispatchEvent(new CustomEvent('cbi-fileupload-select', { detail: this.stat }));
1839 }
1840 },
1841
1842 handleFileBrowser: function(ev) {
1843 var button = ev.target,
1844 browser = button.nextElementSibling,
1845 path = this.stat ? this.stat.path.replace(/\/[^\/]+$/, '') : this.options.root_directory;
1846
1847 if (this.options.root_directory.indexOf(path) != 0)
1848 path = this.options.root_directory;
1849
1850 ev.preventDefault();
1851
1852 return this.callFileList(path).then(L.bind(function(button, browser, path, list) {
1853 document.querySelectorAll('.cbi-filebrowser.open').forEach(function(browserEl) {
1854 L.dom.findClassInstance(browserEl).handleCancel(ev);
1855 });
1856
1857 button.style.display = 'none';
1858 browser.classList.add('open');
1859
1860 return this.renderListing(browser, path, list);
1861 }, this, button, browser, path));
1862 },
1863
1864 getValue: function() {
1865 return this.node.lastElementChild.value;
1866 },
1867
1868 setValue: function(value) {
1869 this.node.lastElementChild.value = value;
1870 }
1871 });
1872
1873
1874 return L.Class.extend({
1875 __init__: function() {
1876 modalDiv = document.body.appendChild(
1877 L.dom.create('div', { id: 'modal_overlay' },
1878 L.dom.create('div', { class: 'modal', role: 'dialog', 'aria-modal': true })));
1879
1880 tooltipDiv = document.body.appendChild(
1881 L.dom.create('div', { class: 'cbi-tooltip' }));
1882
1883 /* setup old aliases */
1884 L.showModal = this.showModal;
1885 L.hideModal = this.hideModal;
1886 L.showTooltip = this.showTooltip;
1887 L.hideTooltip = this.hideTooltip;
1888 L.itemlist = this.itemlist;
1889
1890 document.addEventListener('mouseover', this.showTooltip.bind(this), true);
1891 document.addEventListener('mouseout', this.hideTooltip.bind(this), true);
1892 document.addEventListener('focus', this.showTooltip.bind(this), true);
1893 document.addEventListener('blur', this.hideTooltip.bind(this), true);
1894
1895 document.addEventListener('luci-loaded', this.tabs.init.bind(this.tabs));
1896 document.addEventListener('luci-loaded', this.changes.init.bind(this.changes));
1897 document.addEventListener('uci-loaded', this.changes.init.bind(this.changes));
1898 },
1899
1900 /* Modal dialog */
1901 showModal: function(title, children /* , ... */) {
1902 var dlg = modalDiv.firstElementChild;
1903
1904 dlg.setAttribute('class', 'modal');
1905
1906 for (var i = 2; i < arguments.length; i++)
1907 dlg.classList.add(arguments[i]);
1908
1909 L.dom.content(dlg, L.dom.create('h4', {}, title));
1910 L.dom.append(dlg, children);
1911
1912 document.body.classList.add('modal-overlay-active');
1913
1914 return dlg;
1915 },
1916
1917 hideModal: function() {
1918 document.body.classList.remove('modal-overlay-active');
1919 },
1920
1921 /* Tooltip */
1922 showTooltip: function(ev) {
1923 var target = findParent(ev.target, '[data-tooltip]');
1924
1925 if (!target)
1926 return;
1927
1928 if (tooltipTimeout !== null) {
1929 window.clearTimeout(tooltipTimeout);
1930 tooltipTimeout = null;
1931 }
1932
1933 var rect = target.getBoundingClientRect(),
1934 x = rect.left + window.pageXOffset,
1935 y = rect.top + rect.height + window.pageYOffset;
1936
1937 tooltipDiv.className = 'cbi-tooltip';
1938 tooltipDiv.innerHTML = '▲ ';
1939 tooltipDiv.firstChild.data += target.getAttribute('data-tooltip');
1940
1941 if (target.hasAttribute('data-tooltip-style'))
1942 tooltipDiv.classList.add(target.getAttribute('data-tooltip-style'));
1943
1944 if ((y + tooltipDiv.offsetHeight) > (window.innerHeight + window.pageYOffset)) {
1945 y -= (tooltipDiv.offsetHeight + target.offsetHeight);
1946 tooltipDiv.firstChild.data = '▼ ' + tooltipDiv.firstChild.data.substr(2);
1947 }
1948
1949 tooltipDiv.style.top = y + 'px';
1950 tooltipDiv.style.left = x + 'px';
1951 tooltipDiv.style.opacity = 1;
1952
1953 tooltipDiv.dispatchEvent(new CustomEvent('tooltip-open', {
1954 bubbles: true,
1955 detail: { target: target }
1956 }));
1957 },
1958
1959 hideTooltip: function(ev) {
1960 if (ev.target === tooltipDiv || ev.relatedTarget === tooltipDiv ||
1961 tooltipDiv.contains(ev.target) || tooltipDiv.contains(ev.relatedTarget))
1962 return;
1963
1964 if (tooltipTimeout !== null) {
1965 window.clearTimeout(tooltipTimeout);
1966 tooltipTimeout = null;
1967 }
1968
1969 tooltipDiv.style.opacity = 0;
1970 tooltipTimeout = window.setTimeout(function() { tooltipDiv.removeAttribute('style'); }, 250);
1971
1972 tooltipDiv.dispatchEvent(new CustomEvent('tooltip-close', { bubbles: true }));
1973 },
1974
1975 addNotification: function(title, children /*, ... */) {
1976 var mc = document.querySelector('#maincontent') || document.body;
1977 var msg = E('div', {
1978 'class': 'alert-message fade-in',
1979 'style': 'display:flex',
1980 'transitionend': function(ev) {
1981 var node = ev.currentTarget;
1982 if (node.parentNode && node.classList.contains('fade-out'))
1983 node.parentNode.removeChild(node);
1984 }
1985 }, [
1986 E('div', { 'style': 'flex:10' }),
1987 E('div', { 'style': 'flex:1 1 auto; display:flex' }, [
1988 E('button', {
1989 'class': 'btn',
1990 'style': 'margin-left:auto; margin-top:auto',
1991 'click': function(ev) {
1992 L.dom.parent(ev.target, '.alert-message').classList.add('fade-out');
1993 },
1994
1995 }, [ _('Dismiss') ])
1996 ])
1997 ]);
1998
1999 if (title != null)
2000 L.dom.append(msg.firstElementChild, E('h4', {}, title));
2001
2002 L.dom.append(msg.firstElementChild, children);
2003
2004 for (var i = 2; i < arguments.length; i++)
2005 msg.classList.add(arguments[i]);
2006
2007 mc.insertBefore(msg, mc.firstElementChild);
2008
2009 return msg;
2010 },
2011
2012 /* Widget helper */
2013 itemlist: function(node, items, separators) {
2014 var children = [];
2015
2016 if (!Array.isArray(separators))
2017 separators = [ separators || E('br') ];
2018
2019 for (var i = 0; i < items.length; i += 2) {
2020 if (items[i+1] !== null && items[i+1] !== undefined) {
2021 var sep = separators[(i/2) % separators.length],
2022 cld = [];
2023
2024 children.push(E('span', { class: 'nowrap' }, [
2025 items[i] ? E('strong', items[i] + ': ') : '',
2026 items[i+1]
2027 ]));
2028
2029 if ((i+2) < items.length)
2030 children.push(L.dom.elem(sep) ? sep.cloneNode(true) : sep);
2031 }
2032 }
2033
2034 L.dom.content(node, children);
2035
2036 return node;
2037 },
2038
2039 /* Tabs */
2040 tabs: L.Class.singleton({
2041 init: function() {
2042 var groups = [], prevGroup = null, currGroup = null;
2043
2044 document.querySelectorAll('[data-tab]').forEach(function(tab) {
2045 var parent = tab.parentNode;
2046
2047 if (!parent.hasAttribute('data-tab-group'))
2048 parent.setAttribute('data-tab-group', groups.length);
2049
2050 currGroup = +parent.getAttribute('data-tab-group');
2051
2052 if (currGroup !== prevGroup) {
2053 prevGroup = currGroup;
2054
2055 if (!groups[currGroup])
2056 groups[currGroup] = [];
2057 }
2058
2059 groups[currGroup].push(tab);
2060 });
2061
2062 for (var i = 0; i < groups.length; i++)
2063 this.initTabGroup(groups[i]);
2064
2065 document.addEventListener('dependency-update', this.updateTabs.bind(this));
2066
2067 this.updateTabs();
2068 },
2069
2070 initTabGroup: function(panes) {
2071 if (typeof(panes) != 'object' || !('length' in panes) || panes.length === 0)
2072 return;
2073
2074 var menu = E('ul', { 'class': 'cbi-tabmenu' }),
2075 group = panes[0].parentNode,
2076 groupId = +group.getAttribute('data-tab-group'),
2077 selected = null;
2078
2079 for (var i = 0, pane; pane = panes[i]; i++) {
2080 var name = pane.getAttribute('data-tab'),
2081 title = pane.getAttribute('data-tab-title'),
2082 active = pane.getAttribute('data-tab-active') === 'true';
2083
2084 menu.appendChild(E('li', {
2085 'style': this.isEmptyPane(pane) ? 'display:none' : null,
2086 'class': active ? 'cbi-tab' : 'cbi-tab-disabled',
2087 'data-tab': name
2088 }, E('a', {
2089 'href': '#',
2090 'click': this.switchTab.bind(this)
2091 }, title)));
2092
2093 if (active)
2094 selected = i;
2095 }
2096
2097 group.parentNode.insertBefore(menu, group);
2098
2099 if (selected === null) {
2100 selected = this.getActiveTabId(panes[0]);
2101
2102 if (selected < 0 || selected >= panes.length || this.isEmptyPane(panes[selected])) {
2103 for (var i = 0; i < panes.length; i++) {
2104 if (!this.isEmptyPane(panes[i])) {
2105 selected = i;
2106 break;
2107 }
2108 }
2109 }
2110
2111 menu.childNodes[selected].classList.add('cbi-tab');
2112 menu.childNodes[selected].classList.remove('cbi-tab-disabled');
2113 panes[selected].setAttribute('data-tab-active', 'true');
2114
2115 this.setActiveTabId(panes[selected], selected);
2116 }
2117
2118 this.updateTabs(group);
2119 },
2120
2121 isEmptyPane: function(pane) {
2122 return L.dom.isEmpty(pane, function(n) { return n.classList.contains('cbi-tab-descr') });
2123 },
2124
2125 getPathForPane: function(pane) {
2126 var path = [], node = null;
2127
2128 for (node = pane ? pane.parentNode : null;
2129 node != null && node.hasAttribute != null;
2130 node = node.parentNode)
2131 {
2132 if (node.hasAttribute('data-tab'))
2133 path.unshift(node.getAttribute('data-tab'));
2134 else if (node.hasAttribute('data-section-id'))
2135 path.unshift(node.getAttribute('data-section-id'));
2136 }
2137
2138 return path.join('/');
2139 },
2140
2141 getActiveTabState: function() {
2142 var page = document.body.getAttribute('data-page');
2143
2144 try {
2145 var val = JSON.parse(window.sessionStorage.getItem('tab'));
2146 if (val.page === page && L.isObject(val.paths))
2147 return val;
2148 }
2149 catch(e) {}
2150
2151 window.sessionStorage.removeItem('tab');
2152 return { page: page, paths: {} };
2153 },
2154
2155 getActiveTabId: function(pane) {
2156 var path = this.getPathForPane(pane);
2157 return +this.getActiveTabState().paths[path] || 0;
2158 },
2159
2160 setActiveTabId: function(pane, tabIndex) {
2161 var path = this.getPathForPane(pane);
2162
2163 try {
2164 var state = this.getActiveTabState();
2165 state.paths[path] = tabIndex;
2166
2167 window.sessionStorage.setItem('tab', JSON.stringify(state));
2168 }
2169 catch (e) { return false; }
2170
2171 return true;
2172 },
2173
2174 updateTabs: function(ev, root) {
2175 (root || document).querySelectorAll('[data-tab-title]').forEach(L.bind(function(pane) {
2176 var menu = pane.parentNode.previousElementSibling,
2177 tab = menu ? menu.querySelector('[data-tab="%s"]'.format(pane.getAttribute('data-tab'))) : null,
2178 n_errors = pane.querySelectorAll('.cbi-input-invalid').length;
2179
2180 if (!menu || !tab)
2181 return;
2182
2183 if (this.isEmptyPane(pane)) {
2184 tab.style.display = 'none';
2185 tab.classList.remove('flash');
2186 }
2187 else if (tab.style.display === 'none') {
2188 tab.style.display = '';
2189 requestAnimationFrame(function() { tab.classList.add('flash') });
2190 }
2191
2192 if (n_errors) {
2193 tab.setAttribute('data-errors', n_errors);
2194 tab.setAttribute('data-tooltip', _('%d invalid field(s)').format(n_errors));
2195 tab.setAttribute('data-tooltip-style', 'error');
2196 }
2197 else {
2198 tab.removeAttribute('data-errors');
2199 tab.removeAttribute('data-tooltip');
2200 }
2201 }, this));
2202 },
2203
2204 switchTab: function(ev) {
2205 var tab = ev.target.parentNode,
2206 name = tab.getAttribute('data-tab'),
2207 menu = tab.parentNode,
2208 group = menu.nextElementSibling,
2209 groupId = +group.getAttribute('data-tab-group'),
2210 index = 0;
2211
2212 ev.preventDefault();
2213
2214 if (!tab.classList.contains('cbi-tab-disabled'))
2215 return;
2216
2217 menu.querySelectorAll('[data-tab]').forEach(function(tab) {
2218 tab.classList.remove('cbi-tab');
2219 tab.classList.remove('cbi-tab-disabled');
2220 tab.classList.add(
2221 tab.getAttribute('data-tab') === name ? 'cbi-tab' : 'cbi-tab-disabled');
2222 });
2223
2224 group.childNodes.forEach(function(pane) {
2225 if (L.dom.matches(pane, '[data-tab]')) {
2226 if (pane.getAttribute('data-tab') === name) {
2227 pane.setAttribute('data-tab-active', 'true');
2228 L.ui.tabs.setActiveTabId(pane, index);
2229 }
2230 else {
2231 pane.setAttribute('data-tab-active', 'false');
2232 }
2233
2234 index++;
2235 }
2236 });
2237 }
2238 }),
2239
2240 /* UCI Changes */
2241 changes: L.Class.singleton({
2242 init: function() {
2243 if (!L.env.sessionid)
2244 return;
2245
2246 return uci.changes().then(L.bind(this.renderChangeIndicator, this));
2247 },
2248
2249 setIndicator: function(n) {
2250 var i = document.querySelector('.uci_change_indicator');
2251 if (i == null) {
2252 var poll = document.getElementById('xhr_poll_status');
2253 i = poll.parentNode.insertBefore(E('a', {
2254 'href': '#',
2255 'class': 'uci_change_indicator label notice',
2256 'click': L.bind(this.displayChanges, this)
2257 }), poll);
2258 }
2259
2260 if (n > 0) {
2261 L.dom.content(i, [ _('Unsaved Changes'), ': ', n ]);
2262 i.classList.add('flash');
2263 i.style.display = '';
2264 }
2265 else {
2266 i.classList.remove('flash');
2267 i.style.display = 'none';
2268 }
2269 },
2270
2271 renderChangeIndicator: function(changes) {
2272 var n_changes = 0;
2273
2274 for (var config in changes)
2275 if (changes.hasOwnProperty(config))
2276 n_changes += changes[config].length;
2277
2278 this.changes = changes;
2279 this.setIndicator(n_changes);
2280 },
2281
2282 changeTemplates: {
2283 'add-3': '<ins>uci add %0 <strong>%3</strong> # =%2</ins>',
2284 'set-3': '<ins>uci set %0.<strong>%2</strong>=%3</ins>',
2285 'set-4': '<var><ins>uci set %0.%2.%3=<strong>%4</strong></ins></var>',
2286 'remove-2': '<del>uci del %0.<strong>%2</strong></del>',
2287 'remove-3': '<var><del>uci del %0.%2.<strong>%3</strong></del></var>',
2288 'order-3': '<var>uci reorder %0.%2=<strong>%3</strong></var>',
2289 'list-add-4': '<var><ins>uci add_list %0.%2.%3=<strong>%4</strong></ins></var>',
2290 'list-del-4': '<var><del>uci del_list %0.%2.%3=<strong>%4</strong></del></var>',
2291 'rename-3': '<var>uci rename %0.%2=<strong>%3</strong></var>',
2292 'rename-4': '<var>uci rename %0.%2.%3=<strong>%4</strong></var>'
2293 },
2294
2295 displayChanges: function() {
2296 var list = E('div', { 'class': 'uci-change-list' }),
2297 dlg = L.ui.showModal(_('Configuration') + ' / ' + _('Changes'), [
2298 E('div', { 'class': 'cbi-section' }, [
2299 E('strong', _('Legend:')),
2300 E('div', { 'class': 'uci-change-legend' }, [
2301 E('div', { 'class': 'uci-change-legend-label' }, [
2302 E('ins', '&#160;'), ' ', _('Section added') ]),
2303 E('div', { 'class': 'uci-change-legend-label' }, [
2304 E('del', '&#160;'), ' ', _('Section removed') ]),
2305 E('div', { 'class': 'uci-change-legend-label' }, [
2306 E('var', {}, E('ins', '&#160;')), ' ', _('Option changed') ]),
2307 E('div', { 'class': 'uci-change-legend-label' }, [
2308 E('var', {}, E('del', '&#160;')), ' ', _('Option removed') ])]),
2309 E('br'), list,
2310 E('div', { 'class': 'right' }, [
2311 E('button', {
2312 'class': 'btn',
2313 'click': L.ui.hideModal
2314 }, [ _('Dismiss') ]), ' ',
2315 E('button', {
2316 'class': 'cbi-button cbi-button-positive important',
2317 'click': L.bind(this.apply, this, true)
2318 }, [ _('Save & Apply') ]), ' ',
2319 E('button', {
2320 'class': 'cbi-button cbi-button-reset',
2321 'click': L.bind(this.revert, this)
2322 }, [ _('Revert') ])])])
2323 ]);
2324
2325 for (var config in this.changes) {
2326 if (!this.changes.hasOwnProperty(config))
2327 continue;
2328
2329 list.appendChild(E('h5', '# /etc/config/%s'.format(config)));
2330
2331 for (var i = 0, added = null; i < this.changes[config].length; i++) {
2332 var chg = this.changes[config][i],
2333 tpl = this.changeTemplates['%s-%d'.format(chg[0], chg.length)];
2334
2335 list.appendChild(E(tpl.replace(/%([01234])/g, function(m0, m1) {
2336 switch (+m1) {
2337 case 0:
2338 return config;
2339
2340 case 2:
2341 if (added != null && chg[1] == added[0])
2342 return '@' + added[1] + '[-1]';
2343 else
2344 return chg[1];
2345
2346 case 4:
2347 return "'%h'".format(chg[3].replace(/'/g, "'\"'\"'"));
2348
2349 default:
2350 return chg[m1-1];
2351 }
2352 })));
2353
2354 if (chg[0] == 'add')
2355 added = [ chg[1], chg[2] ];
2356 }
2357 }
2358
2359 list.appendChild(E('br'));
2360 dlg.classList.add('uci-dialog');
2361 },
2362
2363 displayStatus: function(type, content) {
2364 if (type) {
2365 var message = L.ui.showModal('', '');
2366
2367 message.classList.add('alert-message');
2368 DOMTokenList.prototype.add.apply(message.classList, type.split(/\s+/));
2369
2370 if (content)
2371 L.dom.content(message, content);
2372
2373 if (!this.was_polling) {
2374 this.was_polling = L.Request.poll.active();
2375 L.Request.poll.stop();
2376 }
2377 }
2378 else {
2379 L.ui.hideModal();
2380
2381 if (this.was_polling)
2382 L.Request.poll.start();
2383 }
2384 },
2385
2386 rollback: function(checked) {
2387 if (checked) {
2388 this.displayStatus('warning spinning',
2389 E('p', _('Failed to confirm apply within %ds, waiting for rollback…')
2390 .format(L.env.apply_rollback)));
2391
2392 var call = function(r, data, duration) {
2393 if (r.status === 204) {
2394 L.ui.changes.displayStatus('warning', [
2395 E('h4', _('Configuration has been rolled back!')),
2396 E('p', _('The device could not be reached within %d seconds after applying the pending changes, which caused the configuration to be rolled back for safety reasons. If you believe that the configuration changes are correct nonetheless, perform an unchecked configuration apply. Alternatively, you can dismiss this warning and edit changes before attempting to apply again, or revert all pending changes to keep the currently working configuration state.').format(L.env.apply_rollback)),
2397 E('div', { 'class': 'right' }, [
2398 E('button', {
2399 'class': 'btn',
2400 'click': L.bind(L.ui.changes.displayStatus, L.ui.changes, false)
2401 }, [ _('Dismiss') ]), ' ',
2402 E('button', {
2403 'class': 'btn cbi-button-action important',
2404 'click': L.bind(L.ui.changes.revert, L.ui.changes)
2405 }, [ _('Revert changes') ]), ' ',
2406 E('button', {
2407 'class': 'btn cbi-button-negative important',
2408 'click': L.bind(L.ui.changes.apply, L.ui.changes, false)
2409 }, [ _('Apply unchecked') ])
2410 ])
2411 ]);
2412
2413 return;
2414 }
2415
2416 var delay = isNaN(duration) ? 0 : Math.max(1000 - duration, 0);
2417 window.setTimeout(function() {
2418 L.Request.request(L.url('admin/uci/confirm'), {
2419 method: 'post',
2420 timeout: L.env.apply_timeout * 1000,
2421 query: { sid: L.env.sessionid, token: L.env.token }
2422 }).then(call);
2423 }, delay);
2424 };
2425
2426 call({ status: 0 });
2427 }
2428 else {
2429 this.displayStatus('warning', [
2430 E('h4', _('Device unreachable!')),
2431 E('p', _('Could not regain access to the device after applying the configuration changes. You might need to reconnect if you modified network related settings such as the IP address or wireless security credentials.'))
2432 ]);
2433 }
2434 },
2435
2436 confirm: function(checked, deadline, override_token) {
2437 var tt;
2438 var ts = Date.now();
2439
2440 this.displayStatus('notice');
2441
2442 if (override_token)
2443 this.confirm_auth = { token: override_token };
2444
2445 var call = function(r, data, duration) {
2446 if (Date.now() >= deadline) {
2447 window.clearTimeout(tt);
2448 L.ui.changes.rollback(checked);
2449 return;
2450 }
2451 else if (r && (r.status === 200 || r.status === 204)) {
2452 document.dispatchEvent(new CustomEvent('uci-applied'));
2453
2454 L.ui.changes.setIndicator(0);
2455 L.ui.changes.displayStatus('notice',
2456 E('p', _('Configuration has been applied.')));
2457
2458 window.clearTimeout(tt);
2459 window.setTimeout(function() {
2460 //L.ui.changes.displayStatus(false);
2461 window.location = window.location.href.split('#')[0];
2462 }, L.env.apply_display * 1000);
2463
2464 return;
2465 }
2466
2467 var delay = isNaN(duration) ? 0 : Math.max(1000 - duration, 0);
2468 window.setTimeout(function() {
2469 L.Request.request(L.url('admin/uci/confirm'), {
2470 method: 'post',
2471 timeout: L.env.apply_timeout * 1000,
2472 query: L.ui.changes.confirm_auth
2473 }).then(call, call);
2474 }, delay);
2475 };
2476
2477 var tick = function() {
2478 var now = Date.now();
2479
2480 L.ui.changes.displayStatus('notice spinning',
2481 E('p', _('Waiting for configuration to get applied… %ds')
2482 .format(Math.max(Math.floor((deadline - Date.now()) / 1000), 0))));
2483
2484 if (now >= deadline)
2485 return;
2486
2487 tt = window.setTimeout(tick, 1000 - (now - ts));
2488 ts = now;
2489 };
2490
2491 tick();
2492
2493 /* wait a few seconds for the settings to become effective */
2494 window.setTimeout(call, Math.max(L.env.apply_holdoff * 1000 - ((ts + L.env.apply_rollback * 1000) - deadline), 1));
2495 },
2496
2497 apply: function(checked) {
2498 this.displayStatus('notice spinning',
2499 E('p', _('Starting configuration apply…')));
2500
2501 L.Request.request(L.url('admin/uci', checked ? 'apply_rollback' : 'apply_unchecked'), {
2502 method: 'post',
2503 query: { sid: L.env.sessionid, token: L.env.token }
2504 }).then(function(r) {
2505 if (r.status === (checked ? 200 : 204)) {
2506 var tok = null; try { tok = r.json(); } catch(e) {}
2507 if (checked && tok !== null && typeof(tok) === 'object' && typeof(tok.token) === 'string')
2508 L.ui.changes.confirm_auth = tok;
2509
2510 L.ui.changes.confirm(checked, Date.now() + L.env.apply_rollback * 1000);
2511 }
2512 else if (checked && r.status === 204) {
2513 L.ui.changes.displayStatus('notice',
2514 E('p', _('There are no changes to apply')));
2515
2516 window.setTimeout(function() {
2517 L.ui.changes.displayStatus(false);
2518 }, L.env.apply_display * 1000);
2519 }
2520 else {
2521 L.ui.changes.displayStatus('warning',
2522 E('p', _('Apply request failed with status <code>%h</code>')
2523 .format(r.responseText || r.statusText || r.status)));
2524
2525 window.setTimeout(function() {
2526 L.ui.changes.displayStatus(false);
2527 }, L.env.apply_display * 1000);
2528 }
2529 });
2530 },
2531
2532 revert: function() {
2533 this.displayStatus('notice spinning',
2534 E('p', _('Reverting configuration…')));
2535
2536 L.Request.request(L.url('admin/uci/revert'), {
2537 method: 'post',
2538 query: { sid: L.env.sessionid, token: L.env.token }
2539 }).then(function(r) {
2540 if (r.status === 200) {
2541 document.dispatchEvent(new CustomEvent('uci-reverted'));
2542
2543 L.ui.changes.setIndicator(0);
2544 L.ui.changes.displayStatus('notice',
2545 E('p', _('Changes have been reverted.')));
2546
2547 window.setTimeout(function() {
2548 //L.ui.changes.displayStatus(false);
2549 window.location = window.location.href.split('#')[0];
2550 }, L.env.apply_display * 1000);
2551 }
2552 else {
2553 L.ui.changes.displayStatus('warning',
2554 E('p', _('Revert request failed with status <code>%h</code>')
2555 .format(r.statusText || r.status)));
2556
2557 window.setTimeout(function() {
2558 L.ui.changes.displayStatus(false);
2559 }, L.env.apply_display * 1000);
2560 }
2561 });
2562 }
2563 }),
2564
2565 addValidator: function(field, type, optional, vfunc /*, ... */) {
2566 if (type == null)
2567 return;
2568
2569 var events = this.varargs(arguments, 3);
2570 if (events.length == 0)
2571 events.push('blur', 'keyup');
2572
2573 try {
2574 var cbiValidator = L.validation.create(field, type, optional, vfunc),
2575 validatorFn = cbiValidator.validate.bind(cbiValidator);
2576
2577 for (var i = 0; i < events.length; i++)
2578 field.addEventListener(events[i], validatorFn);
2579
2580 validatorFn();
2581
2582 return validatorFn;
2583 }
2584 catch (e) { }
2585 },
2586
2587 createHandlerFn: function(ctx, fn /*, ... */) {
2588 if (typeof(fn) == 'string')
2589 fn = ctx[fn];
2590
2591 if (typeof(fn) != 'function')
2592 return null;
2593
2594 return Function.prototype.bind.apply(function() {
2595 var t = arguments[arguments.length - 1].target;
2596
2597 t.classList.add('spinning');
2598 t.disabled = true;
2599
2600 if (t.blur)
2601 t.blur();
2602
2603 Promise.resolve(fn.apply(ctx, arguments)).finally(function() {
2604 t.classList.remove('spinning');
2605 t.disabled = false;
2606 });
2607 }, this.varargs(arguments, 2, ctx));
2608 },
2609
2610 /* Widgets */
2611 Textfield: UITextfield,
2612 Textarea: UITextarea,
2613 Checkbox: UICheckbox,
2614 Select: UISelect,
2615 Dropdown: UIDropdown,
2616 DynamicList: UIDynamicList,
2617 Combobox: UICombobox,
2618 Hiddenfield: UIHiddenfield,
2619 FileUpload: UIFileUpload
2620 });
Lua Configuration Interface (mirror)