modules/luci-base/htdocs/luci-static/resources/ui.js

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