luci-base: introduce form.js
[oweals/luci.git] / modules / luci-base / htdocs / luci-static / resources / luci.js
1 (function(window, document, undefined) {
2         /* Object.assign polyfill for IE */
3         if (typeof Object.assign !== 'function') {
4                 Object.defineProperty(Object, 'assign', {
5                         value: function assign(target, varArgs) {
6                                 if (target == null)
7                                         throw new TypeError('Cannot convert undefined or null to object');
8
9                                 var to = Object(target);
10
11                                 for (var index = 1; index < arguments.length; index++)
12                                         if (arguments[index] != null)
13                                                 for (var nextKey in arguments[index])
14                                                         if (Object.prototype.hasOwnProperty.call(arguments[index], nextKey))
15                                                                 to[nextKey] = arguments[index][nextKey];
16
17                                 return to;
18                         },
19                         writable: true,
20                         configurable: true
21                 });
22         }
23
24         /*
25          * Class declaration and inheritance helper
26          */
27
28         var toCamelCase = function(s) {
29                 return s.replace(/(?:^|[\. -])(.)/g, function(m0, m1) { return m1.toUpperCase() });
30         };
31
32         var superContext = null, Class = Object.assign(function() {}, {
33                 extend: function(properties) {
34                         var props = {
35                                 __base__: { value: this.prototype },
36                                 __name__: { value: properties.__name__ || 'anonymous' }
37                         };
38
39                         var ClassConstructor = function() {
40                                 if (!(this instanceof ClassConstructor))
41                                         throw new TypeError('Constructor must not be called without "new"');
42
43                                 if (Object.getPrototypeOf(this).hasOwnProperty('__init__')) {
44                                         if (typeof(this.__init__) != 'function')
45                                                 throw new TypeError('Class __init__ member is not a function');
46
47                                         this.__init__.apply(this, arguments)
48                                 }
49                                 else {
50                                         this.super('__init__', arguments);
51                                 }
52                         };
53
54                         for (var key in properties)
55                                 if (!props[key] && properties.hasOwnProperty(key))
56                                         props[key] = { value: properties[key], writable: true };
57
58                         ClassConstructor.prototype = Object.create(this.prototype, props);
59                         ClassConstructor.prototype.constructor = ClassConstructor;
60                         Object.assign(ClassConstructor, this);
61                         ClassConstructor.displayName = toCamelCase(props.__name__.value + 'Class');
62
63                         return ClassConstructor;
64                 },
65
66                 singleton: function(properties /*, ... */) {
67                         return Class.extend(properties)
68                                 .instantiate(Class.prototype.varargs(arguments, 1));
69                 },
70
71                 instantiate: function(args) {
72                         return new (Function.prototype.bind.apply(this,
73                                 Class.prototype.varargs(args, 0, null)))();
74                 },
75
76                 call: function(self, method) {
77                         if (typeof(this.prototype[method]) != 'function')
78                                 throw new ReferenceError(method + ' is not defined in class');
79
80                         return this.prototype[method].apply(self, self.varargs(arguments, 1));
81                 },
82
83                 isSubclass: function(_class) {
84                         return (_class != null &&
85                                 typeof(_class) == 'function' &&
86                                 _class.prototype instanceof this);
87                 },
88
89                 prototype: {
90                         varargs: function(args, offset /*, ... */) {
91                                 return Array.prototype.slice.call(arguments, 2)
92                                         .concat(Array.prototype.slice.call(args, offset));
93                         },
94
95                         super: function(key, callArgs) {
96                                 for (superContext = Object.getPrototypeOf(superContext ||
97                                                                           Object.getPrototypeOf(this));
98                                      superContext && !superContext.hasOwnProperty(key);
99                                      superContext = Object.getPrototypeOf(superContext)) { }
100
101                                 if (!superContext)
102                                         return null;
103
104                                 var res = superContext[key];
105
106                                 if (arguments.length > 1) {
107                                         if (typeof(res) != 'function')
108                                                 throw new ReferenceError(key + ' is not a function in base class');
109
110                                         if (typeof(callArgs) != 'object')
111                                                 callArgs = this.varargs(arguments, 1);
112
113                                         res = res.apply(this, callArgs);
114                                 }
115
116                                 superContext = null;
117
118                                 return res;
119                         },
120
121                         toString: function() {
122                                 var s = '[' + this.constructor.displayName + ']', f = true;
123                                 for (var k in this) {
124                                         if (this.hasOwnProperty(k)) {
125                                                 s += (f ? ' {\n' : '') + '  ' + k + ': ' + typeof(this[k]) + '\n';
126                                                 f = false;
127                                         }
128                                 }
129                                 return s + (f ? '' : '}');
130                         }
131                 }
132         });
133
134
135         /*
136          * HTTP Request helper
137          */
138
139         Headers = Class.extend({
140                 __name__: 'LuCI.XHR.Headers',
141                 __init__: function(xhr) {
142                         var hdrs = this.headers = {};
143                         xhr.getAllResponseHeaders().split(/\r\n/).forEach(function(line) {
144                                 var m = /^([^:]+):(.*)$/.exec(line);
145                                 if (m != null)
146                                         hdrs[m[1].trim().toLowerCase()] = m[2].trim();
147                         });
148                 },
149
150                 has: function(name) {
151                         return this.headers.hasOwnProperty(String(name).toLowerCase());
152                 },
153
154                 get: function(name) {
155                         var key = String(name).toLowerCase();
156                         return this.headers.hasOwnProperty(key) ? this.headers[key] : null;
157                 }
158         });
159
160         Response = Class.extend({
161                 __name__: 'LuCI.XHR.Response',
162                 __init__: function(xhr, url, duration) {
163                         this.ok = (xhr.status >= 200 && xhr.status <= 299);
164                         this.status = xhr.status;
165                         this.statusText = xhr.statusText;
166                         this.responseText = xhr.responseText;
167                         this.headers = new Headers(xhr);
168                         this.duration = duration;
169                         this.url = url;
170                         this.xhr = xhr;
171                 },
172
173                 json: function() {
174                         return JSON.parse(this.responseText);
175                 },
176
177                 text: function() {
178                         return this.responseText;
179                 }
180         });
181
182         Request = Class.singleton({
183                 __name__: 'LuCI.Request',
184
185                 interceptors: [],
186
187                 request: function(target, options) {
188                         var state = { xhr: new XMLHttpRequest(), url: target, start: Date.now() },
189                             opt = Object.assign({}, options, state),
190                             content = null,
191                             contenttype = null,
192                             callback = this.handleReadyStateChange;
193
194                         return new Promise(function(resolveFn, rejectFn) {
195                                 opt.xhr.onreadystatechange = callback.bind(opt, resolveFn, rejectFn);
196                                 opt.method = String(opt.method || 'GET').toUpperCase();
197
198                                 if ('query' in opt) {
199                                         var q = (opt.query != null) ? Object.keys(opt.query).map(function(k) {
200                                                 if (opt.query[k] != null) {
201                                                         var v = (typeof(opt.query[k]) == 'object')
202                                                                 ? JSON.stringify(opt.query[k])
203                                                                 : String(opt.query[k]);
204
205                                                         return '%s=%s'.format(encodeURIComponent(k), encodeURIComponent(v));
206                                                 }
207                                                 else {
208                                                         return encodeURIComponent(k);
209                                                 }
210                                         }).join('&') : '';
211
212                                         if (q !== '') {
213                                                 switch (opt.method) {
214                                                 case 'GET':
215                                                 case 'HEAD':
216                                                 case 'OPTIONS':
217                                                         opt.url += ((/\?/).test(opt.url) ? '&' : '?') + q;
218                                                         break;
219
220                                                 default:
221                                                         if (content == null) {
222                                                                 content = q;
223                                                                 contenttype = 'application/x-www-form-urlencoded';
224                                                         }
225                                                 }
226                                         }
227                                 }
228
229                                 if (!opt.cache)
230                                         opt.url += ((/\?/).test(opt.url) ? '&' : '?') + (new Date()).getTime();
231
232                                 if (!/^(?:[^/]+:)?\/\//.test(opt.url))
233                                         opt.url = location.protocol + '//' + location.host + opt.url;
234
235                                 if ('username' in opt && 'password' in opt)
236                                         opt.xhr.open(opt.method, opt.url, true, opt.username, opt.password);
237                                 else
238                                         opt.xhr.open(opt.method, opt.url, true);
239
240                                 opt.xhr.responseType = 'text';
241                                 opt.xhr.overrideMimeType('application/octet-stream');
242
243                                 if ('timeout' in opt)
244                                         opt.xhr.timeout = +opt.timeout;
245
246                                 if ('credentials' in opt)
247                                         opt.xhr.withCredentials = !!opt.credentials;
248
249                                 if (opt.content != null) {
250                                         switch (typeof(opt.content)) {
251                                         case 'function':
252                                                 content = opt.content(xhr);
253                                                 break;
254
255                                         case 'object':
256                                                 content = JSON.stringify(opt.content);
257                                                 contenttype = 'application/json';
258                                                 break;
259
260                                         default:
261                                                 content = String(opt.content);
262                                         }
263                                 }
264
265                                 if ('headers' in opt)
266                                         for (var header in opt.headers)
267                                                 if (opt.headers.hasOwnProperty(header)) {
268                                                         if (header.toLowerCase() != 'content-type')
269                                                                 opt.xhr.setRequestHeader(header, opt.headers[header]);
270                                                         else
271                                                                 contenttype = opt.headers[header];
272                                                 }
273
274                                 if (contenttype != null)
275                                         opt.xhr.setRequestHeader('Content-Type', contenttype);
276
277                                 try {
278                                         opt.xhr.send(content);
279                                 }
280                                 catch (e) {
281                                         rejectFn.call(opt, e);
282                                 }
283                         });
284                 },
285
286                 handleReadyStateChange: function(resolveFn, rejectFn, ev) {
287                         var xhr = this.xhr;
288
289                         if (xhr.readyState !== 4)
290                                 return;
291
292                         if (xhr.status === 0 && xhr.statusText === '') {
293                                 rejectFn.call(this, new Error('XHR request aborted by browser'));
294                         }
295                         else {
296                                 var response = new Response(
297                                         xhr, xhr.responseURL || this.url, Date.now() - this.start);
298
299                                 Promise.all(Request.interceptors.map(function(fn) { return fn(response) }))
300                                         .then(resolveFn.bind(this, response))
301                                         .catch(rejectFn.bind(this));
302                         }
303
304                         try {
305                                 xhr.abort();
306                         }
307                         catch(e) {}
308                 },
309
310                 get: function(url, options) {
311                         return this.request(url, Object.assign({ method: 'GET' }, options));
312                 },
313
314                 post: function(url, data, options) {
315                         return this.request(url, Object.assign({ method: 'POST', content: data }, options));
316                 },
317
318                 addInterceptor: function(interceptorFn) {
319                         if (typeof(interceptorFn) == 'function')
320                                 this.interceptors.push(interceptorFn);
321                         return interceptorFn;
322                 },
323
324                 removeInterceptor: function(interceptorFn) {
325                         var oldlen = this.interceptors.length, i = oldlen;
326                         while (i--)
327                                 if (this.interceptors[i] === interceptorFn)
328                                         this.interceptors.splice(i, 1);
329                         return (this.interceptors.length < oldlen);
330                 },
331
332                 poll: Class.singleton({
333                         __name__: 'LuCI.Request.Poll',
334
335                         queue: [],
336
337                         add: function(interval, url, options, callback) {
338                                 if (isNaN(interval) || interval <= 0)
339                                         throw new TypeError('Invalid poll interval');
340
341                                 var e = {
342                                         interval: interval,
343                                         url: url,
344                                         options: options,
345                                         callback: callback
346                                 };
347
348                                 this.queue.push(e);
349                                 return e;
350                         },
351
352                         remove: function(entry) {
353                                 var oldlen = this.queue.length, i = oldlen;
354
355                                 while (i--)
356                                         if (this.queue[i] === entry) {
357                                                 delete this.queue[i].running;
358                                                 this.queue.splice(i, 1);
359                                         }
360
361                                 if (!this.queue.length)
362                                         this.stop();
363
364                                 return (this.queue.length < oldlen);
365                         },
366
367                         start: function() {
368                                 if (!this.queue.length || this.active())
369                                         return false;
370
371                                 this.tick = 0;
372                                 this.timer = window.setInterval(this.step, 1000);
373                                 this.step();
374                                 document.dispatchEvent(new CustomEvent('poll-start'));
375                                 return true;
376                         },
377
378                         stop: function() {
379                                 if (!this.active())
380                                         return false;
381
382                                 document.dispatchEvent(new CustomEvent('poll-stop'));
383                                 window.clearInterval(this.timer);
384                                 delete this.timer;
385                                 delete this.tick;
386                                 return true;
387                         },
388
389                         step: function() {
390                                 Request.poll.queue.forEach(function(e) {
391                                         if ((Request.poll.tick % e.interval) != 0)
392                                                 return;
393
394                                         if (e.running)
395                                                 return;
396
397                                         var opts = Object.assign({}, e.options,
398                                                 { timeout: e.interval * 1000 - 5 });
399
400                                         e.running = true;
401                                         Request.request(e.url, opts)
402                                                 .then(function(res) {
403                                                         if (!e.running || !Request.poll.active())
404                                                                 return;
405
406                                                         try {
407                                                                 e.callback(res, res.json(), res.duration);
408                                                         }
409                                                         catch (err) {
410                                                                 e.callback(res, null, res.duration);
411                                                         }
412                                                 })
413                                                 .finally(function() { delete e.running });
414                                 });
415
416                                 Request.poll.tick = (Request.poll.tick + 1) % Math.pow(2, 32);
417                         },
418
419                         active: function() {
420                                 return (this.timer != null);
421                         }
422                 })
423         });
424
425
426         var dummyElem = null,
427             domParser = null,
428             originalCBIInit = null,
429             classes = {};
430
431         LuCI = Class.extend({
432                 __name__: 'LuCI',
433                 __init__: function(env) {
434                         Object.assign(this.env, env);
435
436                         document.addEventListener('poll-start', function(ev) {
437                                 document.querySelectorAll('[id^="xhr_poll_status"]').forEach(function(e) {
438                                         e.style.display = (e.id == 'xhr_poll_status_off') ? 'none' : '';
439                                 });
440                         });
441
442                         document.addEventListener('poll-stop', function(ev) {
443                                 document.querySelectorAll('[id^="xhr_poll_status"]').forEach(function(e) {
444                                         e.style.display = (e.id == 'xhr_poll_status_on') ? 'none' : '';
445                                 });
446                         });
447
448                         var domReady = new Promise(function(resolveFn, rejectFn) {
449                                 document.addEventListener('DOMContentLoaded', resolveFn);
450                         });
451
452                         Promise.all([
453                                 domReady,
454                                 this.require('ui'),
455                                 this.require('form')
456                         ]).then(this.setupDOM.bind(this)).catch(function(error) {
457                                 alert('LuCI class loading error:\n' + error);
458                         });
459
460                         originalCBIInit = window.cbi_init;
461                         window.cbi_init = function() {};
462                 },
463
464                 error: function(type, fmt /*, ...*/) {
465                         var e = null,
466                             msg = fmt ? String.prototype.format.apply(fmt, this.varargs(arguments, 2)) : null,
467                             stack = null;
468
469                         if (type instanceof Error) {
470                                 e = type;
471                                 stack = (e.stack || '').split(/\n/);
472
473                                 if (msg)
474                                         e.message = msg + ': ' + e.message;
475                         }
476                         else {
477                                 e = new (window[type || 'Error'] || Error)(msg || 'Unspecified error');
478                                 e.name = type || 'Error';
479
480                                 try { throw new Error('stacktrace') }
481                                 catch (e2) { stack = (e2.stack || '').split(/\n/) }
482
483                                 /* IE puts the exception message into the first line */
484                                 if (stack[0] == 'Error: stacktrace')
485                                         stack.shift();
486
487                                 /* Pop L.error() invocation from stack */
488                                 stack.shift();
489                         }
490
491                         /* Append shortened & beautified stacktrace to message */
492                         var trace = stack.join('\n')
493                                 .replace(/(.*?)@(.+):(\d+):(\d+)/g, '  at $1 ($2:$3:$4)');
494
495                         if (e.message.indexOf(trace) == -1)
496                                 e.message += '\n' + trace;
497
498                         if (window.console && console.debug)
499                                 console.debug(e);
500
501                         if (this.ui)
502                                 this.ui.showModal(_('Runtime error'),
503                                         E('pre', { 'class': 'alert-message error' }, e));
504                         else
505                                 L.dom.content(document.querySelector('#maincontent'),
506                                         E('pre', { 'class': 'alert-message error' }, e));
507
508                         throw e;
509                 },
510
511                 bind: function(fn, self /*, ... */) {
512                         return Function.prototype.bind.apply(fn, this.varargs(arguments, 2, self));
513                 },
514
515                 /* Class require */
516                 require: function(name, from) {
517                         var L = this, url = null, from = from || [];
518
519                         /* Class already loaded */
520                         if (classes[name] != null) {
521                                 /* Circular dependency */
522                                 if (from.indexOf(name) != -1)
523                                         L.error('DependencyError',
524                                                 'Circular dependency: class "%s" depends on "%s"',
525                                                 name, from.join('" which depends on "'));
526
527                                 return classes[name];
528                         }
529
530                         document.querySelectorAll('script[src$="/luci.js"]').forEach(function(s) {
531                                 url = '%s/%s.js'.format(
532                                         s.getAttribute('src').replace(/\/luci\.js$/, ''),
533                                         name.replace(/\./g, '/'));
534                         });
535
536                         if (url == null)
537                                 L.error('InternalError', 'Cannot find url of luci.js');
538
539                         from = [ name ].concat(from);
540
541                         var compileClass = function(res) {
542                                 if (!res.ok)
543                                         L.error('NetworkError',
544                                                 'HTTP error %d while loading class file "%s"', res.status, url);
545
546                                 var source = res.text(),
547                                     reqmatch = /(?:^|\n)[ \t]*(?:["']require[ \t]+(\S+)(?:[ \t]+as[ \t]+([a-zA-Z_]\S*))?["']);/g,
548                                     depends = [],
549                                     args = '';
550
551                                 /* find require statements in source */
552                                 for (var m = reqmatch.exec(source); m; m = reqmatch.exec(source)) {
553                                         var dep = m[1], as = m[2] || dep.replace(/[^a-zA-Z0-9_]/g, '_');
554                                         depends.push(L.require(dep, from));
555                                         args += ', ' + as;
556                                 }
557
558                                 /* load dependencies and instantiate class */
559                                 return Promise.all(depends).then(function(instances) {
560                                         try {
561                                                 _factory = eval(
562                                                         '(function(window, document, L%s) { %s })\n\n//# sourceURL=%s\n'
563                                                                 .format(args, source, res.url));
564                                         }
565                                         catch (error) {
566                                                 L.error('SyntaxError', '%s\n  in %s:%s',
567                                                         error.message, res.url, error.lineNumber || '?');
568                                         }
569
570                                         _factory.displayName = toCamelCase(name + 'ClassFactory');
571                                         _class = _factory.apply(_factory, [window, document, L].concat(instances));
572
573                                         if (!Class.isSubclass(_class))
574                                             L.error('TypeError', '"%s" factory yields invalid constructor', name);
575
576                                         if (_class.displayName == 'AnonymousClass')
577                                                 _class.displayName = toCamelCase(name + 'Class');
578
579                                         var ptr = Object.getPrototypeOf(L),
580                                             parts = name.split(/\./),
581                                             instance = new _class();
582
583                                         for (var i = 0; ptr && i < parts.length - 1; i++)
584                                                 ptr = ptr[parts[i]];
585
586                                         if (ptr)
587                                                 ptr[parts[i]] = instance;
588
589                                         classes[name] = instance;
590
591                                         return instance;
592                                 });
593                         };
594
595                         /* Request class file */
596                         classes[name] = Request.get(url, { cache: true })
597                                 .then(compileClass)
598                                 .catch(L.error);
599
600                         return classes[name];
601                 },
602
603                 /* DOM setup */
604                 setupDOM: function(ev) {
605                         Request.addInterceptor(function(res) {
606                                 if (res.status != 403 || res.headers.get('X-LuCI-Login-Required') != 'yes')
607                                         return;
608
609                                 Request.poll.stop();
610
611                                 L.ui.showModal(_('Session expired'), [
612                                         E('div', { class: 'alert-message warning' },
613                                                 _('A new login is required since the authentication session expired.')),
614                                         E('div', { class: 'right' },
615                                                 E('div', {
616                                                         class: 'btn primary',
617                                                         click: function() {
618                                                                 var loc = window.location;
619                                                                 window.location = loc.protocol + '//' + loc.host + loc.pathname + loc.search;
620                                                         }
621                                                 }, _('To login…')))
622                                 ]);
623
624                                 throw 'Session expired';
625                         });
626
627                         originalCBIInit();
628                         Request.poll.start();
629
630                         document.dispatchEvent(new CustomEvent('luci-loaded'));
631                 },
632
633                 env: {},
634
635                 /* URL construction helpers */
636                 path: function(prefix, parts) {
637                         var url = [ prefix || '' ];
638
639                         for (var i = 0; i < parts.length; i++)
640                                 if (/^(?:[a-zA-Z0-9_.%,;-]+\/)*[a-zA-Z0-9_.%,;-]+$/.test(parts[i]))
641                                         url.push('/', parts[i]);
642
643                         if (url.length === 1)
644                                 url.push('/');
645
646                         return url.join('');
647                 },
648
649                 url: function() {
650                         return this.path(this.env.scriptname, arguments);
651                 },
652
653                 resource: function() {
654                         return this.path(this.env.resource, arguments);
655                 },
656
657                 location: function() {
658                         return this.path(this.env.scriptname, this.env.requestpath);
659                 },
660
661
662                 /* HTTP resource fetching */
663                 get: function(url, args, cb) {
664                         return this.poll(null, url, args, cb, false);
665                 },
666
667                 post: function(url, args, cb) {
668                         return this.poll(null, url, args, cb, true);
669                 },
670
671                 poll: function(interval, url, args, cb, post) {
672                         if (interval !== null && interval <= 0)
673                                 interval = this.env.pollinterval;
674
675                         var data = post ? { token: this.env.token } : null,
676                             method = post ? 'POST' : 'GET';
677
678                         if (!/^(?:\/|\S+:\/\/)/.test(url))
679                                 url = this.url(url);
680
681                         if (args != null)
682                                 data = Object.assign(data || {}, args);
683
684                         if (interval !== null)
685                                 return Request.poll.add(interval, url, { method: method, query: data }, cb);
686                         else
687                                 return Request.request(url, { method: method, query: data })
688                                         .then(function(res) {
689                                                 var json = null;
690                                                 if (/^application\/json\b/.test(res.headers.get('Content-Type')))
691                                                         try { json = res.json() } catch(e) {}
692                                                 cb(res.xhr, json, res.duration);
693                                         });
694                 },
695
696                 stop: function(entry) { return Request.poll.remove(entry) },
697                 halt: function() { return Request.poll.stop() },
698                 run: function() { return Request.poll.start() },
699
700                 /* DOM manipulation */
701                 dom: Class.singleton({
702                         __name__: 'LuCI.DOM',
703
704                         elem: function(e) {
705                                 return (e != null && typeof(e) == 'object' && 'nodeType' in e);
706                         },
707
708                         parse: function(s) {
709                                 var elem;
710
711                                 try {
712                                         domParser = domParser || new DOMParser();
713                                         elem = domParser.parseFromString(s, 'text/html').body.firstChild;
714                                 }
715                                 catch(e) {}
716
717                                 if (!elem) {
718                                         try {
719                                                 dummyElem = dummyElem || document.createElement('div');
720                                                 dummyElem.innerHTML = s;
721                                                 elem = dummyElem.firstChild;
722                                         }
723                                         catch (e) {}
724                                 }
725
726                                 return elem || null;
727                         },
728
729                         matches: function(node, selector) {
730                                 var m = this.elem(node) ? node.matches || node.msMatchesSelector : null;
731                                 return m ? m.call(node, selector) : false;
732                         },
733
734                         parent: function(node, selector) {
735                                 if (this.elem(node) && node.closest)
736                                         return node.closest(selector);
737
738                                 while (this.elem(node))
739                                         if (this.matches(node, selector))
740                                                 return node;
741                                         else
742                                                 node = node.parentNode;
743
744                                 return null;
745                         },
746
747                         append: function(node, children) {
748                                 if (!this.elem(node))
749                                         return null;
750
751                                 if (Array.isArray(children)) {
752                                         for (var i = 0; i < children.length; i++)
753                                                 if (this.elem(children[i]))
754                                                         node.appendChild(children[i]);
755                                                 else if (children !== null && children !== undefined)
756                                                         node.appendChild(document.createTextNode('' + children[i]));
757
758                                         return node.lastChild;
759                                 }
760                                 else if (typeof(children) === 'function') {
761                                         return this.append(node, children(node));
762                                 }
763                                 else if (this.elem(children)) {
764                                         return node.appendChild(children);
765                                 }
766                                 else if (children !== null && children !== undefined) {
767                                         node.innerHTML = '' + children;
768                                         return node.lastChild;
769                                 }
770
771                                 return null;
772                         },
773
774                         content: function(node, children) {
775                                 if (!this.elem(node))
776                                         return null;
777
778                                 var dataNodes = node.querySelectorAll('[data-idref]');
779
780                                 for (var i = 0; i < dataNodes.length; i++)
781                                         delete this.registry[dataNodes[i].getAttribute('data-idref')];
782
783                                 while (node.firstChild)
784                                         node.removeChild(node.firstChild);
785
786                                 return this.append(node, children);
787                         },
788
789                         attr: function(node, key, val) {
790                                 if (!this.elem(node))
791                                         return null;
792
793                                 var attr = null;
794
795                                 if (typeof(key) === 'object' && key !== null)
796                                         attr = key;
797                                 else if (typeof(key) === 'string')
798                                         attr = {}, attr[key] = val;
799
800                                 for (key in attr) {
801                                         if (!attr.hasOwnProperty(key) || attr[key] == null)
802                                                 continue;
803
804                                         switch (typeof(attr[key])) {
805                                         case 'function':
806                                                 node.addEventListener(key, attr[key]);
807                                                 break;
808
809                                         case 'object':
810                                                 node.setAttribute(key, JSON.stringify(attr[key]));
811                                                 break;
812
813                                         default:
814                                                 node.setAttribute(key, attr[key]);
815                                         }
816                                 }
817                         },
818
819                         create: function() {
820                                 var html = arguments[0],
821                                     attr = arguments[1],
822                                     data = arguments[2],
823                                     elem;
824
825                                 if (!(attr instanceof Object) || Array.isArray(attr))
826                                         data = attr, attr = null;
827
828                                 if (Array.isArray(html)) {
829                                         elem = document.createDocumentFragment();
830                                         for (var i = 0; i < html.length; i++)
831                                                 elem.appendChild(this.create(html[i]));
832                                 }
833                                 else if (this.elem(html)) {
834                                         elem = html;
835                                 }
836                                 else if (html.charCodeAt(0) === 60) {
837                                         elem = this.parse(html);
838                                 }
839                                 else {
840                                         elem = document.createElement(html);
841                                 }
842
843                                 if (!elem)
844                                         return null;
845
846                                 this.attr(elem, attr);
847                                 this.append(elem, data);
848
849                                 return elem;
850                         },
851
852                         registry: {},
853
854                         data: function(node, key, val) {
855                                 var id = node.getAttribute('data-idref');
856
857                                 /* clear all data */
858                                 if (arguments.length > 1 && key == null) {
859                                         if (id != null) {
860                                                 node.removeAttribute('data-idref');
861                                                 val = this.registry[id]
862                                                 delete this.registry[id];
863                                                 return val;
864                                         }
865
866                                         return null;
867                                 }
868
869                                 /* clear a key */
870                                 else if (arguments.length > 2 && key != null && val == null) {
871                                         if (id != null) {
872                                                 val = this.registry[id][key];
873                                                 delete this.registry[id][key];
874                                                 return val;
875                                         }
876
877                                         return null;
878                                 }
879
880                                 /* set a key */
881                                 else if (arguments.length > 2 && key != null && val != null) {
882                                         if (id == null) {
883                                                 do { id = Math.floor(Math.random() * 0xffffffff).toString(16) }
884                                                 while (this.registry.hasOwnProperty(id));
885
886                                                 node.setAttribute('data-idref', id);
887                                                 this.registry[id] = {};
888                                         }
889
890                                         return (this.registry[id][key] = val);
891                                 }
892
893                                 /* get all data */
894                                 else if (arguments.length == 1) {
895                                         if (id != null)
896                                                 return this.registry[id];
897
898                                         return null;
899                                 }
900
901                                 /* get a key */
902                                 else if (arguments.length == 2) {
903                                         if (id != null)
904                                                 return this.registry[id][key];
905                                 }
906
907                                 return null;
908                         },
909
910                         bindClassInstance: function(node, inst) {
911                                 if (!(inst instanceof Class))
912                                         L.error('TypeError', 'Argument must be a class instance');
913
914                                 return this.data(node, '_class', inst);
915                         },
916
917                         findClassInstance: function(node) {
918                                 var inst = null;
919
920                                 do {
921                                         inst = this.data(node, '_class');
922                                         node = node.parentNode;
923                                 }
924                                 while (!(inst instanceof Class) && node != null);
925
926                                 return inst;
927                         },
928
929                         callClassMethod: function(node, method /*, ... */) {
930                                 var inst = this.findClassInstance(node);
931
932                                 if (inst == null || typeof(inst[method]) != 'function')
933                                         return null;
934
935                                 return inst[method].apply(inst, inst.varargs(arguments, 2));
936                         }
937                 }),
938
939                 Class: Class,
940                 Request: Request,
941
942                 view: Class.extend({
943                         __name__: 'LuCI.View',
944
945                         __init__: function() {
946                                 var vp = document.getElementById('view');
947
948                                 L.dom.content(vp, E('div', { 'class': 'spinning' }, _('Loading view…')));
949
950                                 return Promise.resolve(this.load())
951                                         .then(L.bind(this.render, this))
952                                         .then(L.bind(function(nodes) {
953                                                 var vp = document.getElementById('view');
954
955                                                 L.dom.content(vp, nodes);
956                                                 L.dom.append(vp, this.addFooter());
957                                         }, this)).catch(L.error);
958                         },
959
960                         load: function() {},
961                         render: function() {},
962
963                         handleSave: function(ev) {
964                                 var tasks = [];
965
966                                 document.getElementById('maincontent')
967                                         .querySelectorAll('.cbi-map').forEach(function(map) {
968                                                 tasks.push(L.dom.callClassMethod(map, 'save'));
969                                         });
970
971                                 return Promise.all(tasks);
972                         },
973
974                         handleSaveApply: function(ev) {
975                                 return this.handleSave(ev).then(function() {
976                                         L.ui.changes.apply(true);
977                                 });
978                         },
979
980                         handleReset: function(ev) {
981                                 var tasks = [];
982
983                                 document.getElementById('maincontent')
984                                         .querySelectorAll('.cbi-map').forEach(function(map) {
985                                                 tasks.push(L.dom.callClassMethod(map, 'reset'));
986                                         });
987
988                                 return Promise.all(tasks);
989                         },
990
991                         addFooter: function() {
992                                 var footer = E([]),
993                                     mc = document.getElementById('maincontent');
994
995                                 if (mc.querySelector('.cbi-map')) {
996                                         footer.appendChild(E('div', { 'class': 'cbi-page-actions' }, [
997                                                 E('input', {
998                                                         'class': 'cbi-button cbi-button-apply',
999                                                         'type': 'button',
1000                                                         'value': _('Save & Apply'),
1001                                                         'click': L.bind(this.handleSaveApply, this)
1002                                                 }), ' ',
1003                                                 E('input', {
1004                                                         'class': 'cbi-button cbi-button-save',
1005                                                         'type': 'submit',
1006                                                         'value': _('Save'),
1007                                                         'click': L.bind(this.handleSave, this)
1008                                                 }), ' ',
1009                                                 E('input', {
1010                                                         'class': 'cbi-button cbi-button-reset',
1011                                                         'type': 'button',
1012                                                         'value': _('Reset'),
1013                                                         'click': L.bind(this.handleReset, this)
1014                                                 })
1015                                         ]));
1016                                 }
1017
1018                                 return footer;
1019                         }
1020                 })
1021         });
1022
1023         XHR = Class.extend({
1024                 __name__: 'LuCI.XHR',
1025                 __init__: function() {
1026                         if (window.console && console.debug)
1027                                 console.debug('Direct use XHR() is deprecated, please use L.Request instead');
1028                 },
1029
1030                 _response: function(cb, res, json, duration) {
1031                         if (this.active)
1032                                 cb(res, json, duration);
1033                         delete this.active;
1034                 },
1035
1036                 get: function(url, data, callback, timeout) {
1037                         this.active = true;
1038                         L.get(url, data, this._response.bind(this, callback), timeout);
1039                 },
1040
1041                 post: function(url, data, callback, timeout) {
1042                         this.active = true;
1043                         L.post(url, data, this._response.bind(this, callback), timeout);
1044                 },
1045
1046                 cancel: function() { delete this.active },
1047                 busy: function() { return (this.active === true) },
1048                 abort: function() {},
1049                 send_form: function() { L.error('InternalError', 'Not implemented') },
1050         });
1051
1052         XHR.get = function() { return window.L.get.apply(window.L, arguments) };
1053         XHR.post = function() { return window.L.post.apply(window.L, arguments) };
1054         XHR.poll = function() { return window.L.poll.apply(window.L, arguments) };
1055         XHR.stop = Request.poll.remove.bind(Request.poll);
1056         XHR.halt = Request.poll.stop.bind(Request.poll);
1057         XHR.run = Request.poll.start.bind(Request.poll);
1058         XHR.running = Request.poll.active.bind(Request.poll);
1059
1060         window.XHR = XHR;
1061         window.LuCI = LuCI;
1062 })(window, document);