/** * @class LuCI * @classdesc * * This is the LuCI base class. It is automatically instantiated and * accessible using the global `L` variable. * * @param {Object} env * The environment settings to use for the LuCI runtime. */ (function(window, document, undefined) { 'use strict'; /* Object.assign polyfill for IE */ if (typeof Object.assign !== 'function') { Object.defineProperty(Object, 'assign', { value: function assign(target, varArgs) { if (target == null) throw new TypeError('Cannot convert undefined or null to object'); var to = Object(target); for (var index = 1; index < arguments.length; index++) if (arguments[index] != null) for (var nextKey in arguments[index]) if (Object.prototype.hasOwnProperty.call(arguments[index], nextKey)) to[nextKey] = arguments[index][nextKey]; return to; }, writable: true, configurable: true }); } /* Promise.finally polyfill */ if (typeof Promise.prototype.finally !== 'function') { Promise.prototype.finally = function(fn) { var onFinally = function(cb) { return Promise.resolve(fn.call(this)).then(cb); }; return this.then( function(result) { return onFinally.call(this, function() { return result }) }, function(reason) { return onFinally.call(this, function() { return Promise.reject(reason) }) } ); }; } /* * Class declaration and inheritance helper */ var toCamelCase = function(s) { return s.replace(/(?:^|[\. -])(.)/g, function(m0, m1) { return m1.toUpperCase() }); }; /** * @class Class * @hideconstructor * @memberof LuCI * @classdesc * * `LuCI.Class` is the abstract base class all LuCI classes inherit from. * * It provides simple means to create subclasses of given classes and * implements prototypal inheritance. */ var superContext = null, Class = Object.assign(function() {}, { /** * Extends this base class with the properties described in * `properties` and returns a new subclassed Class instance * * @memberof LuCI.Class * * @param {Object<string, *>} properties * An object describing the properties to add to the new * subclass. * * @returns {LuCI.Class} * Returns a new LuCI.Class sublassed from this class, extended * by the given properties and with its prototype set to this base * class to enable inheritance. The resulting value represents a * class constructor and can be instantiated with `new`. */ extend: function(properties) { var props = { __base__: { value: this.prototype }, __name__: { value: properties.__name__ || 'anonymous' } }; var ClassConstructor = function() { if (!(this instanceof ClassConstructor)) throw new TypeError('Constructor must not be called without "new"'); if (Object.getPrototypeOf(this).hasOwnProperty('__init__')) { if (typeof(this.__init__) != 'function') throw new TypeError('Class __init__ member is not a function'); this.__init__.apply(this, arguments) } else { this.super('__init__', arguments); } }; for (var key in properties) if (!props[key] && properties.hasOwnProperty(key)) props[key] = { value: properties[key], writable: true }; ClassConstructor.prototype = Object.create(this.prototype, props); ClassConstructor.prototype.constructor = ClassConstructor; Object.assign(ClassConstructor, this); ClassConstructor.displayName = toCamelCase(props.__name__.value + 'Class'); return ClassConstructor; }, /** * Extends this base class with the properties described in * `properties`, instantiates the resulting subclass using * the additional optional arguments passed to this function * and returns the resulting subclassed Class instance. * * This function serves as a convenience shortcut for * {@link LuCI.Class.extend Class.extend()} and subsequent * `new`. * * @memberof LuCI.Class * * @param {Object<string, *>} properties * An object describing the properties to add to the new * subclass. * * @param {...*} [new_args] * Specifies arguments to be passed to the subclass constructor * as-is in order to instantiate the new subclass. * * @returns {LuCI.Class} * Returns a new LuCI.Class instance extended by the given * properties with its prototype set to this base class to * enable inheritance. */ singleton: function(properties /*, ... */) { return Class.extend(properties) .instantiate(Class.prototype.varargs(arguments, 1)); }, /** * Calls the class constructor using `new` with the given argument * array being passed as variadic parameters to the constructor. * * @memberof LuCI.Class * * @param {Array<*>} params * An array of arbitrary values which will be passed as arguments * to the constructor function. * * @param {...*} [new_args] * Specifies arguments to be passed to the subclass constructor * as-is in order to instantiate the new subclass. * * @returns {LuCI.Class} * Returns a new LuCI.Class instance extended by the given * properties with its prototype set to this base class to * enable inheritance. */ instantiate: function(args) { return new (Function.prototype.bind.apply(this, Class.prototype.varargs(args, 0, null)))(); }, /* unused */ call: function(self, method) { if (typeof(this.prototype[method]) != 'function') throw new ReferenceError(method + ' is not defined in class'); return this.prototype[method].apply(self, self.varargs(arguments, 1)); }, /** * Checks whether the given class value is a subclass of this class. * * @memberof LuCI.Class * * @param {LuCI.Class} classValue * The class object to test. * * @returns {boolean} * Returns `true` when the given `classValue` is a subclass of this * class or `false` if the given value is not a valid class or not * a subclass of this class'. */ isSubclass: function(classValue) { return (classValue != null && typeof(classValue) == 'function' && classValue.prototype instanceof this); }, prototype: { /** * Extract all values from the given argument array beginning from * `offset` and prepend any further given optional parameters to * the beginning of the resulting array copy. * * @memberof LuCI.Class * @instance * * @param {Array<*>} args * The array to extract the values from. * * @param {number} offset * The offset from which to extract the values. An offset of `0` * would copy all values till the end. * * @param {...*} [extra_args] * Extra arguments to add to prepend to the resultung array. * * @returns {Array<*>} * Returns a new array consisting of the optional extra arguments * and the values extracted from the `args` array beginning with * `offset`. */ varargs: function(args, offset /*, ... */) { return Array.prototype.slice.call(arguments, 2) .concat(Array.prototype.slice.call(args, offset)); }, /** * Walks up the parent class chain and looks for a class member * called `key` in any of the parent classes this class inherits * from. Returns the member value of the superclass or calls the * member as function and returns its return value when the * optional `callArgs` array is given. * * This function has two signatures and is sensitive to the * amount of arguments passed to it: * - `super('key')` - * Returns the value of `key` when found within one of the * parent classes. * - `super('key', ['arg1', 'arg2'])` - * Calls the `key()` method with parameters `arg1` and `arg2` * when found within one of the parent classes. * * @memberof LuCI.Class * @instance * * @param {string} key * The name of the superclass member to retrieve. * * @param {Array<*>} [callArgs] * An optional array of function call parameters to use. When * this parameter is specified, the found member value is called * as function using the values of this array as arguments. * * @throws {ReferenceError} * Throws a `ReferenceError` when `callArgs` are specified and * the found member named by `key` is not a function value. * * @returns {*|null} * Returns the value of the found member or the return value of * the call to the found method. Returns `null` when no member * was found in the parent class chain or when the call to the * superclass method returned `null`. */ super: function(key, callArgs) { for (superContext = Object.getPrototypeOf(superContext || Object.getPrototypeOf(this)); superContext && !superContext.hasOwnProperty(key); superContext = Object.getPrototypeOf(superContext)) { } if (!superContext) return null; var res = superContext[key]; if (arguments.length > 1) { if (typeof(res) != 'function') throw new ReferenceError(key + ' is not a function in base class'); if (typeof(callArgs) != 'object') callArgs = this.varargs(arguments, 1); res = res.apply(this, callArgs); } superContext = null; return res; }, /** * Returns a string representation of this class. * * @returns {string} * Returns a string representation of this class containing the * constructor functions `displayName` and describing the class * members and their respective types. */ toString: function() { var s = '[' + this.constructor.displayName + ']', f = true; for (var k in this) { if (this.hasOwnProperty(k)) { s += (f ? ' {\n' : '') + ' ' + k + ': ' + typeof(this[k]) + '\n'; f = false; } } return s + (f ? '' : '}'); } } }); /** * @class * @memberof LuCI * @hideconstructor * @classdesc * * The `Headers` class is an internal utility class exposed in HTTP * response objects using the `response.headers` property. */ var Headers = Class.extend(/** @lends LuCI.Headers.prototype */ { __name__: 'LuCI.XHR.Headers', __init__: function(xhr) { var hdrs = this.headers = {}; xhr.getAllResponseHeaders().split(/\r\n/).forEach(function(line) { var m = /^([^:]+):(.*)$/.exec(line); if (m != null) hdrs[m[1].trim().toLowerCase()] = m[2].trim(); }); }, /** * Checks whether the given header name is present. * Note: Header-Names are case-insensitive. * * @instance * @memberof LuCI.Headers * @param {string} name * The header name to check * * @returns {boolean} * Returns `true` if the header name is present, `false` otherwise */ has: function(name) { return this.headers.hasOwnProperty(String(name).toLowerCase()); }, /** * Returns the value of the given header name. * Note: Header-Names are case-insensitive. * * @instance * @memberof LuCI.Headers * @param {string} name * The header name to read * * @returns {string|null} * The value of the given header name or `null` if the header isn't present. */ get: function(name) { var key = String(name).toLowerCase(); return this.headers.hasOwnProperty(key) ? this.headers[key] : null; } }); /** * @class * @memberof LuCI * @hideconstructor * @classdesc * * The `Response` class is an internal utility class representing HTTP responses. */ var Response = Class.extend({ __name__: 'LuCI.XHR.Response', __init__: function(xhr, url, duration, headers, content) { /** * Describes whether the response is successful (status codes `200..299`) or not * @instance * @memberof LuCI.Response * @name ok * @type {boolean} */ this.ok = (xhr.status >= 200 && xhr.status <= 299); /** * The numeric HTTP status code of the response * @instance * @memberof LuCI.Response * @name status * @type {number} */ this.status = xhr.status; /** * The HTTP status description message of the response * @instance * @memberof LuCI.Response * @name statusText * @type {string} */ this.statusText = xhr.statusText; /** * The HTTP headers of the response * @instance * @memberof LuCI.Response * @name headers * @type {LuCI.Headers} */ this.headers = (headers != null) ? headers : new Headers(xhr); /** * The total duration of the HTTP request in milliseconds * @instance * @memberof LuCI.Response * @name duration * @type {number} */ this.duration = duration; /** * The final URL of the request, i.e. after following redirects. * @instance * @memberof LuCI.Response * @name url * @type {string} */ this.url = url; /* privates */ this.xhr = xhr; if (content != null && typeof(content) == 'object') { this.responseJSON = content; this.responseText = null; } else if (content != null) { this.responseJSON = null; this.responseText = String(content); } else { this.responseJSON = null; this.responseText = xhr.responseText; } }, /** * Clones the given response object, optionally overriding the content * of the cloned instance. * * @instance * @memberof LuCI.Response * @param {*} [content] * Override the content of the cloned response. Object values will be * treated as JSON response data, all other types will be converted * using `String()` and treated as response text. * * @returns {LuCI.Response} * The cloned `Response` instance. */ clone: function(content) { var copy = new Response(this.xhr, this.url, this.duration, this.headers, content); copy.ok = this.ok; copy.status = this.status; copy.statusText = this.statusText; return copy; }, /** * Access the response content as JSON data. * * @instance * @memberof LuCI.Response * @throws {SyntaxError} * Throws `SyntaxError` if the content isn't valid JSON. * * @returns {*} * The parsed JSON data. */ json: function() { if (this.responseJSON == null) this.responseJSON = JSON.parse(this.responseText); return this.responseJSON; }, /** * Access the response content as string. * * @instance * @memberof LuCI.Response * @returns {string} * The response content. */ text: function() { if (this.responseText == null && this.responseJSON != null) this.responseText = JSON.stringify(this.responseJSON); return this.responseText; } }); var requestQueue = []; function isQueueableRequest(opt) { if (!classes.rpc) return false; if (opt.method != 'POST' || typeof(opt.content) != 'object') return false; if (opt.nobatch === true) return false; var rpcBaseURL = Request.expandURL(classes.rpc.getBaseURL()); return (rpcBaseURL != null && opt.url.indexOf(rpcBaseURL) == 0); } function flushRequestQueue() { if (!requestQueue.length) return; var reqopt = Object.assign({}, requestQueue[0][0], { content: [], nobatch: true }), batch = []; for (var i = 0; i < requestQueue.length; i++) { batch[i] = requestQueue[i]; reqopt.content[i] = batch[i][0].content; } requestQueue.length = 0; Request.request(rpcBaseURL, reqopt).then(function(reply) { var json = null, req = null; try { json = reply.json() } catch(e) { } while ((req = batch.shift()) != null) if (Array.isArray(json) && json.length) req[2].call(reqopt, reply.clone(json.shift())); else req[1].call(reqopt, new Error('No related RPC reply')); }).catch(function(error) { var req = null; while ((req = batch.shift()) != null) req[1].call(reqopt, error); }); } /** * @class * @memberof LuCI * @hideconstructor * @classdesc * * The `Request` class allows initiating HTTP requests and provides utilities * for dealing with responses. */ var Request = Class.singleton(/** @lends LuCI.Request.prototype */ { __name__: 'LuCI.Request', interceptors: [], /** * Turn the given relative URL into an absolute URL if necessary. * * @instance * @memberof LuCI.Request * @param {string} url * The URL to convert. * * @returns {string} * The absolute URL derived from the given one, or the original URL * if it already was absolute. */ expandURL: function(url) { if (!/^(?:[^/]+:)?\/\//.test(url)) url = location.protocol + '//' + location.host + url; return url; }, /** * @typedef {Object} RequestOptions * @memberof LuCI.Request * * @property {string} [method=GET] * The HTTP method to use, e.g. `GET` or `POST`. * * @property {Object<string, Object|string>} [query] * Query string data to append to the URL. Non-string values of the * given object will be converted to JSON. * * @property {boolean} [cache=false] * Specifies whether the HTTP response may be retrieved from cache. * * @property {string} [username] * Provides a username for HTTP basic authentication. * * @property {string} [password] * Provides a password for HTTP basic authentication. * * @property {number} [timeout] * Specifies the request timeout in seconds. * * @property {boolean} [credentials=false] * Whether to include credentials such as cookies in the request. * * @property {*} [content] * Specifies the HTTP message body to send along with the request. * If the value is a function, it is invoked and the return value * used as content, if it is a FormData instance, it is used as-is, * if it is an object, it will be converted to JSON, in all other * cases it is converted to a string. * * @property {Object<string, string>} [header] * Specifies HTTP headers to set for the request. * * @property {function} [progress] * An optional request callback function which receives ProgressEvent * instances as sole argument during the HTTP request transfer. */ /** * Initiate an HTTP request to the given target. * * @instance * @memberof LuCI.Request * @param {string} target * The URL to request. * * @param {LuCI.Request.RequestOptions} [options] * Additional options to configure the request. * * @returns {Promise<LuCI.Response>} * The resulting HTTP response. */ request: function(target, options) { var state = { xhr: new XMLHttpRequest(), url: this.expandURL(target), start: Date.now() }, opt = Object.assign({}, options, state), content = null, contenttype = null, callback = this.handleReadyStateChange; return new Promise(function(resolveFn, rejectFn) { opt.xhr.onreadystatechange = callback.bind(opt, resolveFn, rejectFn); opt.method = String(opt.method || 'GET').toUpperCase(); if ('query' in opt) { var q = (opt.query != null) ? Object.keys(opt.query).map(function(k) { if (opt.query[k] != null) { var v = (typeof(opt.query[k]) == 'object') ? JSON.stringify(opt.query[k]) : String(opt.query[k]); return '%s=%s'.format(encodeURIComponent(k), encodeURIComponent(v)); } else { return encodeURIComponent(k); } }).join('&') : ''; if (q !== '') { switch (opt.method) { case 'GET': case 'HEAD': case 'OPTIONS': opt.url += ((/\?/).test(opt.url) ? '&' : '?') + q; break; default: if (content == null) { content = q; contenttype = 'application/x-www-form-urlencoded'; } } } } if (!opt.cache) opt.url += ((/\?/).test(opt.url) ? '&' : '?') + (new Date()).getTime(); if (isQueueableRequest(opt)) { requestQueue.push([opt, rejectFn, resolveFn]); requestAnimationFrame(flushRequestQueue); return; } if ('username' in opt && 'password' in opt) opt.xhr.open(opt.method, opt.url, true, opt.username, opt.password); else opt.xhr.open(opt.method, opt.url, true); opt.xhr.responseType = 'text'; if ('overrideMimeType' in opt.xhr) opt.xhr.overrideMimeType('application/octet-stream'); if ('timeout' in opt) opt.xhr.timeout = +opt.timeout; if ('credentials' in opt) opt.xhr.withCredentials = !!opt.credentials; if (opt.content != null) { switch (typeof(opt.content)) { case 'function': content = opt.content(xhr); break; case 'object': if (!(opt.content instanceof FormData)) { content = JSON.stringify(opt.content); contenttype = 'application/json'; } else { content = opt.content; } break; default: content = String(opt.content); } } if ('headers' in opt) for (var header in opt.headers) if (opt.headers.hasOwnProperty(header)) { if (header.toLowerCase() != 'content-type') opt.xhr.setRequestHeader(header, opt.headers[header]); else contenttype = opt.headers[header]; } if ('progress' in opt && 'upload' in opt.xhr) opt.xhr.upload.addEventListener('progress', opt.progress); if (contenttype != null) opt.xhr.setRequestHeader('Content-Type', contenttype); try { opt.xhr.send(content); } catch (e) { rejectFn.call(opt, e); } }); }, handleReadyStateChange: function(resolveFn, rejectFn, ev) { var xhr = this.xhr, duration = Date.now() - this.start; if (xhr.readyState !== 4) return; if (xhr.status === 0 && xhr.statusText === '') { if (duration >= this.timeout) rejectFn.call(this, new Error('XHR request timed out')); else rejectFn.call(this, new Error('XHR request aborted by browser')); } else { var response = new Response( xhr, xhr.responseURL || this.url, duration); Promise.all(Request.interceptors.map(function(fn) { return fn(response) })) .then(resolveFn.bind(this, response)) .catch(rejectFn.bind(this)); } }, /** * Initiate an HTTP GET request to the given target. * * @instance * @memberof LuCI.Request * @param {string} target * The URL to request. * * @param {LuCI.Request.RequestOptions} [options] * Additional options to configure the request. * * @returns {Promise<LuCI.Response>} * The resulting HTTP response. */ get: function(url, options) { return this.request(url, Object.assign({ method: 'GET' }, options)); }, /** * Initiate an HTTP POST request to the given target. * * @instance * @memberof LuCI.Request * @param {string} target * The URL to request. * * @param {*} [data] * The request data to send, see {@link LuCI.Request.RequestOptions} for details. * * @param {LuCI.Request.RequestOptions} [options] * Additional options to configure the request. * * @returns {Promise<LuCI.Response>} * The resulting HTTP response. */ post: function(url, data, options) { return this.request(url, Object.assign({ method: 'POST', content: data }, options)); }, /** * Interceptor functions are invoked whenever an HTTP reply is received, in the order * these functions have been registered. * @callback LuCI.Request.interceptorFn * @param {LuCI.Response} res * The HTTP response object */ /** * Register an HTTP response interceptor function. Interceptor * functions are useful to perform default actions on incoming HTTP * responses, such as checking for expired authentication or for * implementing request retries before returning a failure. * * @instance * @memberof LuCI.Request * @param {LuCI.Request.interceptorFn} interceptorFn * The interceptor function to register. * * @returns {LuCI.Request.interceptorFn} * The registered function. */ addInterceptor: function(interceptorFn) { if (typeof(interceptorFn) == 'function') this.interceptors.push(interceptorFn); return interceptorFn; }, /** * Remove an HTTP response interceptor function. The passed function * value must be the very same value that was used to register the * function. * * @instance * @memberof LuCI.Request * @param {LuCI.Request.interceptorFn} interceptorFn * The interceptor function to remove. * * @returns {boolean} * Returns `true` if any function has been removed, else `false`. */ removeInterceptor: function(interceptorFn) { var oldlen = this.interceptors.length, i = oldlen; while (i--) if (this.interceptors[i] === interceptorFn) this.interceptors.splice(i, 1); return (this.interceptors.length < oldlen); }, /** * @class * @memberof LuCI.Request * @hideconstructor * @classdesc * * The `Request.poll` class provides some convience wrappers around * {@link LuCI.Poll} mainly to simplify registering repeating HTTP * request calls as polling functions. */ poll: { /** * The callback function is invoked whenever an HTTP reply to a * polled request is received or when the polled request timed * out. * * @callback LuCI.Request.poll~callbackFn * @param {LuCI.Response} res * The HTTP response object. * * @param {*} data * The response JSON if the response could be parsed as such, * else `null`. * * @param {number} duration * The total duration of the request in milliseconds. */ /** * Register a repeating HTTP request with an optional callback * to invoke whenever a response for the request is received. * * @instance * @memberof LuCI.Request.poll * @param {number} interval * The poll interval in seconds. * * @param {string} url * The URL to request on each poll. * * @param {LuCI.Request.RequestOptions} [options] * Additional options to configure the request. * * @param {LuCI.Request.poll~callbackFn} [callback] * {@link LuCI.Request.poll~callbackFn Callback} function to * invoke for each HTTP reply. * * @throws {TypeError} * Throws `TypeError` when an invalid interval was passed. * * @returns {function} * Returns the internally created poll function. */ add: function(interval, url, options, callback) { if (isNaN(interval) || interval <= 0) throw new TypeError('Invalid poll interval'); var ival = interval >>> 0, opts = Object.assign({}, options, { timeout: ival * 1000 - 5 }); var fn = function() { return Request.request(url, options).then(function(res) { if (!Poll.active()) return; try { callback(res, res.json(), res.duration); } catch (err) { callback(res, null, res.duration); } }); }; return (Poll.add(fn, ival) ? fn : null); }, /** * Remove a polling request that has been previously added using `add()`. * This function is essentially a wrapper around * {@link LuCI.Poll.remove LuCI.Poll.remove()}. * * @instance * @memberof LuCI.Request.poll * @param {function} entry * The poll function returned by {@link LuCI.Request.poll#add add()}. * * @returns {boolean} * Returns `true` if any function has been removed, else `false`. */ remove: function(entry) { return Poll.remove(entry) }, /** * Alias for {@link LuCI.Poll.start LuCI.Poll.start()}. * * @instance * @memberof LuCI.Request.poll */ start: function() { return Poll.start() }, /** * Alias for {@link LuCI.Poll.stop LuCI.Poll.stop()}. * * @instance * @memberof LuCI.Request.poll */ stop: function() { return Poll.stop() }, /** * Alias for {@link LuCI.Poll.active LuCI.Poll.active()}. * * @instance * @memberof LuCI.Request.poll */ active: function() { return Poll.active() } } }); /** * @class * @memberof LuCI * @hideconstructor * @classdesc * * The `Poll` class allows registering and unregistering poll actions, * as well as starting, stopping and querying the state of the polling * loop. */ var Poll = Class.singleton(/** @lends LuCI.Poll.prototype */ { __name__: 'LuCI.Poll', queue: [], /** * Add a new operation to the polling loop. If the polling loop is not * already started at this point, it will be implicitely started. * * @instance * @memberof LuCI.Poll * @param {function} fn * The function to invoke on each poll interval. * * @param {number} interval * The poll interval in seconds. * * @throws {TypeError} * Throws `TypeError` when an invalid interval was passed. * * @returns {boolean} * Returns `true` if the function has been added or `false` if it * already is registered. */ add: function(fn, interval) { if (interval == null || interval <= 0) interval = window.L ? window.L.env.pollinterval : null; if (isNaN(interval) || typeof(fn) != 'function') throw new TypeError('Invalid argument to LuCI.Poll.add()'); for (var i = 0; i < this.queue.length; i++) if (this.queue[i].fn === fn) return false; var e = { r: true, i: interval >>> 0, fn: fn }; this.queue.push(e); if (this.tick != null && !this.active()) this.start(); return true; }, /** * Remove an operation from the polling loop. If no further operatons * are registered, the polling loop is implicitely stopped. * * @instance * @memberof LuCI.Poll * @param {function} fn * The function to remove. * * @throws {TypeError} * Throws `TypeError` when the given argument isn't a function. * * @returns {boolean} * Returns `true` if the function has been removed or `false` if it * wasn't found. */ remove: function(fn) { if (typeof(fn) != 'function') throw new TypeError('Invalid argument to LuCI.Poll.remove()'); var len = this.queue.length; for (var i = len; i > 0; i--) if (this.queue[i-1].fn === fn) this.queue.splice(i-1, 1); if (!this.queue.length && this.stop()) this.tick = 0; return (this.queue.length != len); }, /** * (Re)start the polling loop. Dispatches a custom `poll-start` event * to the `document` object upon successful start. * * @instance * @memberof LuCI.Poll * @returns {boolean} * Returns `true` if polling has been started (or if no functions * where registered) or `false` when the polling loop already runs. */ start: function() { if (this.active()) return false; this.tick = 0; if (this.queue.length) { this.timer = window.setInterval(this.step, 1000); this.step(); document.dispatchEvent(new CustomEvent('poll-start')); } return true; }, /** * Stop the polling loop. Dispatches a custom `poll-stop` event * to the `document` object upon successful stop. * * @instance * @memberof LuCI.Poll * @returns {boolean} * Returns `true` if polling has been stopped or `false` if it din't * run to begin with. */ stop: function() { if (!this.active()) return false; document.dispatchEvent(new CustomEvent('poll-stop')); window.clearInterval(this.timer); delete this.timer; delete this.tick; return true; }, /* private */ step: function() { for (var i = 0, e = null; (e = Poll.queue[i]) != null; i++) { if ((Poll.tick % e.i) != 0) continue; if (!e.r) continue; e.r = false; Promise.resolve(e.fn()).finally((function() { this.r = true }).bind(e)); } Poll.tick = (Poll.tick + 1) % Math.pow(2, 32); }, /** * Test whether the polling loop is running. * * @instance * @memberof LuCI.Poll * @returns {boolean} - Returns `true` if polling is active, else `false`. */ active: function() { return (this.timer != null); } }); var dummyElem = null, domParser = null, originalCBIInit = null, rpcBaseURL = null, sysFeatures = null, classes = {}; var LuCI = Class.extend(/** @lends LuCI.prototype */ { __name__: 'LuCI', __init__: function(env) { document.querySelectorAll('script[src*="/luci.js"]').forEach(function(s) { if (env.base_url == null || env.base_url == '') { var m = (s.getAttribute('src') || '').match(/^(.*)\/luci\.js(?:\?v=([^?]+))?$/); if (m) { env.base_url = m[1]; env.resource_version = m[2]; } } }); if (env.base_url == null) this.error('InternalError', 'Cannot find url of luci.js'); Object.assign(this.env, env); document.addEventListener('poll-start', function(ev) { document.querySelectorAll('[id^="xhr_poll_status"]').forEach(function(e) { e.style.display = (e.id == 'xhr_poll_status_off') ? 'none' : ''; }); }); document.addEventListener('poll-stop', function(ev) { document.querySelectorAll('[id^="xhr_poll_status"]').forEach(function(e) { e.style.display = (e.id == 'xhr_poll_status_on') ? 'none' : ''; }); }); var domReady = new Promise(function(resolveFn, rejectFn) { document.addEventListener('DOMContentLoaded', resolveFn); }); Promise.all([ domReady, this.require('ui'), this.require('rpc'), this.require('form'), this.probeRPCBaseURL() ]).then(this.setupDOM.bind(this)).catch(this.error); originalCBIInit = window.cbi_init; window.cbi_init = function() {}; }, /** * Captures the current stack trace and throws an error of the * specified type as a new exception. Also logs the exception as * error to the debug console if it is available. * * @instance * @memberof LuCI * * @param {Error|string} [type=Error] * Either a string specifying the type of the error to throw or an * existing `Error` instance to copy. * * @param {string} [fmt=Unspecified error] * A format string which is used to form the error message, together * with all subsequent optional arguments. * * @param {...*} [args] * Zero or more variable arguments to the supplied format string. * * @throws {Error} * Throws the created error object with the captured stack trace * appended to the message and the type set to the given type * argument or copied from the given error instance. */ raise: function(type, fmt /*, ...*/) { var e = null, msg = fmt ? String.prototype.format.apply(fmt, this.varargs(arguments, 2)) : null, stack = null; if (type instanceof Error) { e = type; if (msg) e.message = msg + ': ' + e.message; } else { try { throw new Error('stacktrace') } catch (e2) { stack = (e2.stack || '').split(/\n/) } e = new (window[type || 'Error'] || Error)(msg || 'Unspecified error'); e.name = type || 'Error'; } stack = (stack || []).map(function(frame) { frame = frame.replace(/(.*?)@(.+):(\d+):(\d+)/g, 'at $1 ($2:$3:$4)').trim(); return frame ? ' ' + frame : ''; }); if (!/^ at /.test(stack[0])) stack.shift(); if (/\braise /.test(stack[0])) stack.shift(); if (/\berror /.test(stack[0])) stack.shift(); if (stack.length) e.message += '\n' + stack.join('\n'); if (window.console && console.debug) console.debug(e); throw e; }, /** * A wrapper around {@link LuCI#raise raise()} which also renders * the error either as modal overlay when `ui.js` is already loaed * or directly into the view body. * * @instance * @memberof LuCI * * @param {Error|string} [type=Error] * Either a string specifying the type of the error to throw or an * existing `Error` instance to copy. * * @param {string} [fmt=Unspecified error] * A format string which is used to form the error message, together * with all subsequent optional arguments. * * @param {...*} [args] * Zero or more variable arguments to the supplied format string. * * @throws {Error} * Throws the created error object with the captured stack trace * appended to the message and the type set to the given type * argument or copied from the given error instance. */ error: function(type, fmt /*, ...*/) { try { L.raise.apply(L, Array.prototype.slice.call(arguments)); } catch (e) { if (!e.reported) { if (L.ui) L.ui.addNotification(e.name || _('Runtime error'), E('pre', {}, e.message), 'danger'); else L.dom.content(document.querySelector('#maincontent'), E('pre', { 'class': 'alert-message error' }, e.message)); e.reported = true; } throw e; } }, /** * Return a bound function using the given `self` as `this` context * and any further arguments as parameters to the bound function. * * @instance * @memberof LuCI * * @param {function} fn * The function to bind. * * @param {*} self * The value to bind as `this` context to the specified function. * * @param {...*} [args] * Zero or more variable arguments which are bound to the function * as parameters. * * @returns {function} * Returns the bound function. */ bind: function(fn, self /*, ... */) { return Function.prototype.bind.apply(fn, this.varargs(arguments, 2, self)); }, /** * Load an additional LuCI JavaScript class and its dependencies, * instantiate it and return the resulting class instance. Each * class is only loaded once. Subsequent attempts to load the same * class will return the already instantiated class. * * @instance * @memberof LuCI * * @param {string} name * The name of the class to load in dotted notation. Dots will * be replaced by spaces and joined with the runtime-determined * base URL of LuCI.js to form an absolute URL to load the class * file from. * * @throws {DependencyError} * Throws a `DependencyError` when the class to load includes * circular dependencies. * * @throws {NetworkError} * Throws `NetworkError` when the underlying {@link LuCI.Request} * call failed. * * @throws {SyntaxError} * Throws `SyntaxError` when the loaded class file code cannot * be interpreted by `eval`. * * @throws {TypeError} * Throws `TypeError` when the class file could be loaded and * interpreted, but when invoking its code did not yield a valid * class instance. * * @returns {Promise<LuCI#Class>} * Returns the instantiated class. */ require: function(name, from) { var L = this, url = null, from = from || []; /* Class already loaded */ if (classes[name] != null) { /* Circular dependency */ if (from.indexOf(name) != -1) L.raise('DependencyError', 'Circular dependency: class "%s" depends on "%s"', name, from.join('" which depends on "')); return Promise.resolve(classes[name]); } url = '%s/%s.js%s'.format(L.env.base_url, name.replace(/\./g, '/'), (L.env.resource_version ? '?v=' + L.env.resource_version : '')); from = [ name ].concat(from); var compileClass = function(res) { if (!res.ok) L.raise('NetworkError', 'HTTP error %d while loading class file "%s"', res.status, url); var source = res.text(), requirematch = /^require[ \t]+(\S+)(?:[ \t]+as[ \t]+([a-zA-Z_]\S*))?$/, strictmatch = /^use[ \t]+strict$/, depends = [], args = ''; /* find require statements in source */ for (var i = 0, off = -1, quote = -1, esc = false; i < source.length; i++) { var chr = source.charCodeAt(i); if (esc) { esc = false; } else if (chr == 92) { esc = true; } else if (chr == quote) { var s = source.substring(off, i), m = requirematch.exec(s); if (m) { var dep = m[1], as = m[2] || dep.replace(/[^a-zA-Z0-9_]/g, '_'); depends.push(L.require(dep, from)); args += ', ' + as; } else if (!strictmatch.exec(s)) { break; } off = -1; quote = -1; } else if (quote == -1 && (chr == 34 || chr == 39)) { off = i + 1; quote = chr; } } /* load dependencies and instantiate class */ return Promise.all(depends).then(function(instances) { var _factory, _class; try { _factory = eval( '(function(window, document, L%s) { %s })\n\n//# sourceURL=%s\n' .format(args, source, res.url)); } catch (error) { L.raise('SyntaxError', '%s\n in %s:%s', error.message, res.url, error.lineNumber || '?'); } _factory.displayName = toCamelCase(name + 'ClassFactory'); _class = _factory.apply(_factory, [window, document, L].concat(instances)); if (!Class.isSubclass(_class)) L.error('TypeError', '"%s" factory yields invalid constructor', name); if (_class.displayName == 'AnonymousClass') _class.displayName = toCamelCase(name + 'Class'); var ptr = Object.getPrototypeOf(L), parts = name.split(/\./), instance = new _class(); for (var i = 0; ptr && i < parts.length - 1; i++) ptr = ptr[parts[i]]; if (ptr) ptr[parts[i]] = instance; classes[name] = instance; return instance; }); }; /* Request class file */ classes[name] = Request.get(url, { cache: true }).then(compileClass); return classes[name]; }, /* DOM setup */ probeRPCBaseURL: function() { if (rpcBaseURL == null) { try { rpcBaseURL = window.sessionStorage.getItem('rpcBaseURL'); } catch (e) { } } if (rpcBaseURL == null) { var rpcFallbackURL = this.url('admin/ubus'); rpcBaseURL = Request.get('/ubus/').then(function(res) { return (rpcBaseURL = (res.status == 400) ? '/ubus/' : rpcFallbackURL); }, function() { return (rpcBaseURL = rpcFallbackURL); }).then(function(url) { try { window.sessionStorage.setItem('rpcBaseURL', url); } catch (e) { } return url; }); } return Promise.resolve(rpcBaseURL); }, probeSystemFeatures: function() { var sessionid = classes.rpc.getSessionID(); if (sysFeatures == null) { try { var data = JSON.parse(window.sessionStorage.getItem('sysFeatures')); if (this.isObject(data) && this.isObject(data[sessionid])) sysFeatures = data[sessionid]; } catch (e) {} } if (!this.isObject(sysFeatures)) { sysFeatures = classes.rpc.declare({ object: 'luci', method: 'getFeatures', expect: { '': {} } })().then(function(features) { try { var data = {}; data[sessionid] = features; window.sessionStorage.setItem('sysFeatures', JSON.stringify(data)); } catch (e) {} sysFeatures = features; return features; }); } return Promise.resolve(sysFeatures); }, /** * Test whether a particular system feature is available, such as * hostapd SAE support or an installed firewall. The features are * queried once at the beginning of the LuCI session and cached in * `SessionStorage` throughout the lifetime of the associated tab or * browser window. * * @instance * @memberof LuCI * * @param {string} feature * The feature to test. For detailed list of known feature flags, * see `/modules/luci-base/root/usr/libexec/rpcd/luci`. * * @param {string} [subfeature] * Some feature classes like `hostapd` provide sub-feature flags, * such as `sae` or `11w` support. The `subfeature` argument can * be used to query these. * * @return {boolean|null} * Return `true` if the queried feature (and sub-feature) is available * or `false` if the requested feature isn't present or known. * Return `null` when a sub-feature was queried for a feature which * has no sub-features. */ hasSystemFeature: function() { var ft = sysFeatures[arguments[0]]; if (arguments.length == 2) return this.isObject(ft) ? ft[arguments[1]] : null; return (ft != null && ft != false); }, /* private */ notifySessionExpiry: function() { Poll.stop(); L.ui.showModal(_('Session expired'), [ E('div', { class: 'alert-message warning' }, _('A new login is required since the authentication session expired.')), E('div', { class: 'right' }, E('div', { class: 'btn primary', click: function() { var loc = window.location; window.location = loc.protocol + '//' + loc.host + loc.pathname + loc.search; } }, _('To login…'))) ]); L.raise('SessionError', 'Login session is expired'); }, /* private */ setupDOM: function(res) { var domEv = res[0], uiClass = res[1], rpcClass = res[2], formClass = res[3], rpcBaseURL = res[4]; rpcClass.setBaseURL(rpcBaseURL); rpcClass.addInterceptor(function(msg, req) { if (!L.isObject(msg) || !L.isObject(msg.error) || msg.error.code != -32002) return; if (!L.isObject(req) || (req.object == 'session' && req.method == 'access')) return; return rpcClass.declare({ 'object': 'session', 'method': 'access', 'params': [ 'scope', 'object', 'function' ], 'expect': { access: true } })('uci', 'luci', 'read').catch(L.notifySessionExpiry); }); Request.addInterceptor(function(res) { var isDenied = false; if (res.status == 403 && res.headers.get('X-LuCI-Login-Required') == 'yes') isDenied = true; if (!isDenied) return; L.notifySessionExpiry(); }); return this.probeSystemFeatures().finally(this.initDOM); }, /* private */ initDOM: function() { originalCBIInit(); Poll.start(); document.dispatchEvent(new CustomEvent('luci-loaded')); }, /** * The `env` object holds environment settings used by LuCI, such * as request timeouts, base URLs etc. * * @instance * @memberof LuCI */ env: {}, /** * Construct a relative URL path from the given prefix and parts. * The resulting URL is guaranteed to only contain the characters * `a-z`, `A-Z`, `0-9`, `_`, `.`, `%`, `,`, `;`, and `-` as well * as `/` for the path separator. * * @instance * @memberof LuCI * * @param {string} [prefix] * The prefix to join the given parts with. If the `prefix` is * omitted, it defaults to an empty string. * * @param {string[]} [parts] * An array of parts to join into an URL path. Parts may contain * slashes and any of the other characters mentioned above. * * @return {string} * Return the joined URL path. */ path: function(prefix, parts) { var url = [ prefix || '' ]; for (var i = 0; i < parts.length; i++) if (/^(?:[a-zA-Z0-9_.%,;-]+\/)*[a-zA-Z0-9_.%,;-]+$/.test(parts[i])) url.push('/', parts[i]); if (url.length === 1) url.push('/'); return url.join(''); }, /** * Construct an URL pathrelative to the script path of the server * side LuCI application (usually `/cgi-bin/luci`). * * The resulting URL is guaranteed to only contain the characters * `a-z`, `A-Z`, `0-9`, `_`, `.`, `%`, `,`, `;`, and `-` as well * as `/` for the path separator. * * @instance * @memberof LuCI * * @param {string[]} [parts] * An array of parts to join into an URL path. Parts may contain * slashes and any of the other characters mentioned above. * * @return {string} * Returns the resulting URL path. */ url: function() { return this.path(this.env.scriptname, arguments); }, /** * Construct an URL path relative to the global static resource path * of the LuCI ui (usually `/luci-static/resources`). * * The resulting URL is guaranteed to only contain the characters * `a-z`, `A-Z`, `0-9`, `_`, `.`, `%`, `,`, `;`, and `-` as well * as `/` for the path separator. * * @instance * @memberof LuCI * * @param {string[]} [parts] * An array of parts to join into an URL path. Parts may contain * slashes and any of the other characters mentioned above. * * @return {string} * Returns the resulting URL path. */ resource: function() { return this.path(this.env.resource, arguments); }, /** * Return the complete URL path to the current view. * * @instance * @memberof LuCI * * @return {string} * Returns the URL path to the current view. */ location: function() { return this.path(this.env.scriptname, this.env.requestpath); }, /** * Tests whether the passed argument is a JavaScript object. * This function is meant to be an object counterpart to the * standard `Array.isArray()` function. * * @instance * @memberof LuCI * * @param {*} [val] * The value to test * * @return {boolean} * Returns `true` if the given value is of type object and * not `null`, else returns `false`. */ isObject: function(val) { return (val != null && typeof(val) == 'object'); }, /** * Return an array of sorted object keys, optionally sorted by * a different key or a different sorting mode. * * @instance * @memberof LuCI * * @param {object} obj * The object to extract the keys from. If the given value is * not an object, the function will return an empty array. * * @param {string} [key] * Specifies the key to order by. This is mainly useful for * nested objects of objects or objects of arrays when sorting * shall not be performed by the primary object keys but by * some other key pointing to a value within the nested values. * * @param {string} [sortmode] * May be either `addr` or `num` to override the natural * lexicographic sorting with a sorting suitable for IP/MAC style * addresses or numeric values respectively. * * @return {string[]} * Returns an array containing the sorted keys of the given object. */ sortedKeys: function(obj, key, sortmode) { if (obj == null || typeof(obj) != 'object') return []; return Object.keys(obj).map(function(e) { var v = (key != null) ? obj[e][key] : e; switch (sortmode) { case 'addr': v = (v != null) ? v.replace(/(?:^|[.:])([0-9a-fA-F]{1,4})/g, function(m0, m1) { return ('000' + m1.toLowerCase()).substr(-4) }) : null; break; case 'num': v = (v != null) ? +v : null; break; } return [ e, v ]; }).filter(function(e) { return (e[1] != null); }).sort(function(a, b) { return (a[1] > b[1]); }).map(function(e) { return e[0]; }); }, /** * Converts the given value to an array. If the given value is of * type array, it is returned as-is, values of type object are * returned as one-element array containing the object, empty * strings and `null` values are returned as empty array, all other * values are converted using `String()`, trimmed, split on white * space and returned as array. * * @instance * @memberof LuCI * * @param {*} val * The value to convert into an array. * * @return {Array<*>} * Returns the resulting array. */ toArray: function(val) { if (val == null) return []; else if (Array.isArray(val)) return val; else if (typeof(val) == 'object') return [ val ]; var s = String(val).trim(); if (s == '') return []; return s.split(/\s+/); }, /** * Returns a promise resolving with either the given value or or with * the given default in case the input value is a rejecting promise. * * @instance * @memberof LuCI * * @param {*} value * The value to resolve the promise with. * * @param {*} defvalue * The default value to resolve the promise with in case the given * input value is a rejecting promise. * * @returns {Promise<*>} * Returns a new promise resolving either to the given input value or * to the given default value on error. */ resolveDefault: function(value, defvalue) { return Promise.resolve(value).catch(function() { return defvalue }); }, /** * The request callback function is invoked whenever an HTTP * reply to a request made using the `L.get()`, `L.post()` or * `L.poll()` function is timed out or received successfully. * * @instance * @memberof LuCI * * @callback LuCI.requestCallbackFn * @param {XMLHTTPRequest} xhr * The XMLHTTPRequest instance used to make the request. * * @param {*} data * The response JSON if the response could be parsed as such, * else `null`. * * @param {number} duration * The total duration of the request in milliseconds. */ /** * Issues a GET request to the given url and invokes the specified * callback function. The function is a wrapper around * {@link LuCI.Request#request Request.request()}. * * @deprecated * @instance * @memberof LuCI * * @param {string} url * The URL to request. * * @param {Object<string, string>} [args] * Additional query string arguments to append to the URL. * * @param {LuCI.requestCallbackFn} cb * The callback function to invoke when the request finishes. * * @return {Promise<null>} * Returns a promise resolving to `null` when concluded. */ get: function(url, args, cb) { return this.poll(null, url, args, cb, false); }, /** * Issues a POST request to the given url and invokes the specified * callback function. The function is a wrapper around * {@link LuCI.Request#request Request.request()}. The request is * sent using `application/x-www-form-urlencoded` encoding and will * contain a field `token` with the current value of `LuCI.env.token` * by default. * * @deprecated * @instance * @memberof LuCI * * @param {string} url * The URL to request. * * @param {Object<string, string>} [args] * Additional post arguments to append to the request body. * * @param {LuCI.requestCallbackFn} cb * The callback function to invoke when the request finishes. * * @return {Promise<null>} * Returns a promise resolving to `null` when concluded. */ post: function(url, args, cb) { return this.poll(null, url, args, cb, true); }, /** * Register a polling HTTP request that invokes the specified * callback function. The function is a wrapper around * {@link LuCI.Request.poll#add Request.poll.add()}. * * @deprecated * @instance * @memberof LuCI * * @param {number} interval * The poll interval to use. If set to a value less than or equal * to `0`, it will default to the global poll interval configured * in `LuCI.env.pollinterval`. * * @param {string} url * The URL to request. * * @param {Object<string, string>} [args] * Specifies additional arguments for the request. For GET requests, * the arguments are appended to the URL as query string, for POST * requests, they'll be added to the request body. * * @param {LuCI.requestCallbackFn} cb * The callback function to invoke whenever a request finishes. * * @param {boolean} [post=false] * When set to `false` or not specified, poll requests will be made * using the GET method. When set to `true`, POST requests will be * issued. In case of POST requests, the request body will contain * an argument `token` with the current value of `LuCI.env.token` by * default, regardless of the parameters specified with `args`. * * @return {function} * Returns the internally created function that has been passed to * {@link LuCI.Request.poll#add Request.poll.add()}. This value can * be passed to {@link LuCI.Poll.remove Poll.remove()} to remove the * polling request. */ poll: function(interval, url, args, cb, post) { if (interval !== null && interval <= 0) interval = this.env.pollinterval; var data = post ? { token: this.env.token } : null, method = post ? 'POST' : 'GET'; if (!/^(?:\/|\S+:\/\/)/.test(url)) url = this.url(url); if (args != null) data = Object.assign(data || {}, args); if (interval !== null) return Request.poll.add(interval, url, { method: method, query: data }, cb); else return Request.request(url, { method: method, query: data }) .then(function(res) { var json = null; if (/^application\/json\b/.test(res.headers.get('Content-Type'))) try { json = res.json() } catch(e) {} cb(res.xhr, json, res.duration); }); }, /** * Deprecated wrapper around {@link LuCI.Poll.remove Poll.remove()}. * * @deprecated * @instance * @memberof LuCI * * @param {function} entry * The polling function to remove. * * @return {boolean} * Returns `true` when the function has been removed or `false` if * it could not be found. */ stop: function(entry) { return Poll.remove(entry) }, /** * Deprecated wrapper around {@link LuCI.Poll.stop Poll.stop()}. * * @deprecated * @instance * @memberof LuCI * * @return {boolean} * Returns `true` when the polling loop has been stopped or `false` * when it didn't run to begin with. */ halt: function() { return Poll.stop() }, /** * Deprecated wrapper around {@link LuCI.Poll.start Poll.start()}. * * @deprecated * @instance * @memberof LuCI * * @return {boolean} * Returns `true` when the polling loop has been started or `false` * when it was already running. */ run: function() { return Poll.start() }, /** * @class * @memberof LuCI * @hideconstructor * @classdesc * * The `dom` class provides convenience method for creating and * manipulating DOM elements. */ dom: Class.singleton(/* @lends LuCI.dom.prototype */ { __name__: 'LuCI.DOM', /** * Tests whether the given argument is a valid DOM `Node`. * * @instance * @memberof LuCI.dom * @param {*} e * The value to test. * * @returns {boolean} * Returns `true` if the value is a DOM `Node`, else `false`. */ elem: function(e) { return (e != null && typeof(e) == 'object' && 'nodeType' in e); }, /** * Parses a given string as HTML and returns the first child node. * * @instance * @memberof LuCI.dom * @param {string} s * A string containing an HTML fragment to parse. Note that only * the first result of the resulting structure is returned, so an * input value of `<div>foo</div> <div>bar</div>` will only return * the first `div` element node. * * @returns {Node} * Returns the first DOM `Node` extracted from the HTML fragment or * `null` on parsing failures or if no element could be found. */ parse: function(s) { var elem; try { domParser = domParser || new DOMParser(); elem = domParser.parseFromString(s, 'text/html').body.firstChild; } catch(e) {} if (!elem) { try { dummyElem = dummyElem || document.createElement('div'); dummyElem.innerHTML = s; elem = dummyElem.firstChild; } catch (e) {} } return elem || null; }, /** * Tests whether a given `Node` matches the given query selector. * * This function is a convenience wrapper around the standard * `Node.matches("selector")` function with the added benefit that * the `node` argument may be a non-`Node` value, in which case * this function simply returns `false`. * * @instance * @memberof LuCI.dom * @param {*} node * The `Node` argument to test the selector against. * * @param {string} [selector] * The query selector expression to test against the given node. * * @returns {boolean} * Returns `true` if the given node matches the specified selector * or `false` when the node argument is no valid DOM `Node` or the * selector didn't match. */ matches: function(node, selector) { var m = this.elem(node) ? node.matches || node.msMatchesSelector : null; return m ? m.call(node, selector) : false; }, /** * Returns the closest parent node that matches the given query * selector expression. * * This function is a convenience wrapper around the standard * `Node.closest("selector")` function with the added benefit that * the `node` argument may be a non-`Node` value, in which case * this function simply returns `null`. * * @instance * @memberof LuCI.dom * @param {*} node * The `Node` argument to find the closest parent for. * * @param {string} [selector] * The query selector expression to test against each parent. * * @returns {Node|null} * Returns the closest parent node matching the selector or * `null` when the node argument is no valid DOM `Node` or the * selector didn't match any parent. */ parent: function(node, selector) { if (this.elem(node) && node.closest) return node.closest(selector); while (this.elem(node)) if (this.matches(node, selector)) return node; else node = node.parentNode; return null; }, /** * Appends the given children data to the given node. * * @instance * @memberof LuCI.dom * @param {*} node * The `Node` argument to append the children to. * * @param {*} [children] * The childrens to append to the given node. * * When `children` is an array, then each item of the array * will be either appended as child element or text node, * depending on whether the item is a DOM `Node` instance or * some other non-`null` value. Non-`Node`, non-`null` values * will be converted to strings first before being passed as * argument to `createTextNode()`. * * When `children` is a function, it will be invoked with * the passed `node` argument as sole parameter and the `append` * function will be invoked again, with the given `node` argument * as first and the return value of the `children` function as * second parameter. * * When `children` is is a DOM `Node` instance, it will be * appended to the given `node`. * * When `children` is any other non-`null` value, it will be * converted to a string and appened to the `innerHTML` property * of the given `node`. * * @returns {Node|null} * Returns the last children `Node` appended to the node or `null` * if either the `node` argument was no valid DOM `node` or if the * `children` was `null` or didn't result in further DOM nodes. */ append: function(node, children) { if (!this.elem(node)) return null; if (Array.isArray(children)) { for (var i = 0; i < children.length; i++) if (this.elem(children[i])) node.appendChild(children[i]); else if (children !== null && children !== undefined) node.appendChild(document.createTextNode('' + children[i])); return node.lastChild; } else if (typeof(children) === 'function') { return this.append(node, children(node)); } else if (this.elem(children)) { return node.appendChild(children); } else if (children !== null && children !== undefined) { node.innerHTML = '' + children; return node.lastChild; } return null; }, /** * Replaces the content of the given node with the given children. * * This function first removes any children of the given DOM * `Node` and then adds the given given children following the * rules outlined below. * * @instance * @memberof LuCI.dom * @param {*} node * The `Node` argument to replace the children of. * * @param {*} [children] * The childrens to replace into the given node. * * When `children` is an array, then each item of the array * will be either appended as child element or text node, * depending on whether the item is a DOM `Node` instance or * some other non-`null` value. Non-`Node`, non-`null` values * will be converted to strings first before being passed as * argument to `createTextNode()`. * * When `children` is a function, it will be invoked with * the passed `node` argument as sole parameter and the `append` * function will be invoked again, with the given `node` argument * as first and the return value of the `children` function as * second parameter. * * When `children` is is a DOM `Node` instance, it will be * appended to the given `node`. * * When `children` is any other non-`null` value, it will be * converted to a string and appened to the `innerHTML` property * of the given `node`. * * @returns {Node|null} * Returns the last children `Node` appended to the node or `null` * if either the `node` argument was no valid DOM `node` or if the * `children` was `null` or didn't result in further DOM nodes. */ content: function(node, children) { if (!this.elem(node)) return null; var dataNodes = node.querySelectorAll('[data-idref]'); for (var i = 0; i < dataNodes.length; i++) delete this.registry[dataNodes[i].getAttribute('data-idref')]; while (node.firstChild) node.removeChild(node.firstChild); return this.append(node, children); }, /** * Sets attributes or registers event listeners on element nodes. * * @instance * @memberof LuCI.dom * @param {*} node * The `Node` argument to set the attributes or add the event * listeners for. When the given `node` value is not a valid * DOM `Node`, the function returns and does nothing. * * @param {string|Object<string, *>} key * Specifies either the attribute or event handler name to use, * or an object containing multiple key, value pairs which are * each added to the node as either attribute or event handler, * depending on the respective value. * * @param {*} [val] * Specifies the attribute value or event handler function to add. * If the `key` parameter is an `Object`, this parameter will be * ignored. * * When `val` is of type function, it will be registered as event * handler on the given `node` with the `key` parameter being the * event name. * * When `val` is of type object, it will be serialized as JSON and * added as attribute to the given `node`, using the given `key` * as attribute name. * * When `val` is of any other type, it will be added as attribute * to the given `node` as-is, with the underlying `setAttribute()` * call implicitely turning it into a string. */ attr: function(node, key, val) { if (!this.elem(node)) return null; var attr = null; if (typeof(key) === 'object' && key !== null) attr = key; else if (typeof(key) === 'string') attr = {}, attr[key] = val; for (key in attr) { if (!attr.hasOwnProperty(key) || attr[key] == null) continue; switch (typeof(attr[key])) { case 'function': node.addEventListener(key, attr[key]); break; case 'object': node.setAttribute(key, JSON.stringify(attr[key])); break; default: node.setAttribute(key, attr[key]); } } }, /** * Creates a new DOM `Node` from the given `html`, `attr` and * `data` parameters. * * This function has multiple signatures, it can be either invoked * in the form `create(html[, attr[, data]])` or in the form * `create(html[, data])`. The used variant is determined from the * type of the second argument. * * @instance * @memberof LuCI.dom * @param {*} html * Describes the node to create. * * When the value of `html` is of type array, a `DocumentFragment` * node is created and each item of the array is first converted * to a DOM `Node` by passing it through `create()` and then added * as child to the fragment. * * When the value of `html` is a DOM `Node` instance, no new * element will be created but the node will be used as-is. * * When the value of `html` is a string starting with `<`, it will * be passed to `dom.parse()` and the resulting value is used. * * When the value of `html` is any other string, it will be passed * to `document.createElement()` for creating a new DOM `Node` of * the given name. * * @param {Object<string, *>} [attr] * Specifies an Object of key, value pairs to set as attributes * or event handlers on the created node. Refer to * {@link LuCI.dom#attr dom.attr()} for details. * * @param {*} [data] * Specifies children to append to the newly created element. * Refer to {@link LuCI.dom#append dom.append()} for details. * * @throws {InvalidCharacterError} * Throws an `InvalidCharacterError` when the given `html` * argument contained malformed markup (such as not escaped * `&` characters in XHTML mode) or when the given node name * in `html` contains characters which are not legal in DOM * element names, such as spaces. * * @returns {Node} * Returns the newly created `Node`. */ create: function() { var html = arguments[0], attr = arguments[1], data = arguments[2], elem; if (!(attr instanceof Object) || Array.isArray(attr)) data = attr, attr = null; if (Array.isArray(html)) { elem = document.createDocumentFragment(); for (var i = 0; i < html.length; i++) elem.appendChild(this.create(html[i])); } else if (this.elem(html)) { elem = html; } else if (html.charCodeAt(0) === 60) { elem = this.parse(html); } else { elem = document.createElement(html); } if (!elem) return null; this.attr(elem, attr); this.append(elem, data); return elem; }, registry: {}, /** * Attaches or detaches arbitrary data to and from a DOM `Node`. * * This function is useful to attach non-string values or runtime * data that is not serializable to DOM nodes. To decouple data * from the DOM, values are not added directly to nodes, but * inserted into a registry instead which is then referenced by a * string key stored as `data-idref` attribute in the node. * * This function has multiple signatures and is sensitive to the * number of arguments passed to it. * * - `dom.data(node)` - * Fetches all data associated with the given node. * - `dom.data(node, key)` - * Fetches a specific key associated with the given node. * - `dom.data(node, key, val)` - * Sets a specific key to the given value associated with the * given node. * - `dom.data(node, null)` - * Clears any data associated with the node. * - `dom.data(node, key, null)` - * Clears the given key associated with the node. * * @instance * @memberof LuCI.dom * @param {Node} node * The DOM `Node` instance to set or retrieve the data for. * * @param {string|null} [key] * This is either a string specifying the key to retrieve, or * `null` to unset the entire node data. * * @param {*|null} [val] * This is either a non-`null` value to set for a given key or * `null` to remove the given `key` from the specified node. * * @returns {*} * Returns the get or set value, or `null` when no value could * be found. */ data: function(node, key, val) { var id = node.getAttribute('data-idref'); /* clear all data */ if (arguments.length > 1 && key == null) { if (id != null) { node.removeAttribute('data-idref'); val = this.registry[id] delete this.registry[id]; return val; } return null; } /* clear a key */ else if (arguments.length > 2 && key != null && val == null) { if (id != null) { val = this.registry[id][key]; delete this.registry[id][key]; return val; } return null; } /* set a key */ else if (arguments.length > 2 && key != null && val != null) { if (id == null) { do { id = Math.floor(Math.random() * 0xffffffff).toString(16) } while (this.registry.hasOwnProperty(id)); node.setAttribute('data-idref', id); this.registry[id] = {}; } return (this.registry[id][key] = val); } /* get all data */ else if (arguments.length == 1) { if (id != null) return this.registry[id]; return null; } /* get a key */ else if (arguments.length == 2) { if (id != null) return this.registry[id][key]; } return null; }, /** * Binds the given class instance ot the specified DOM `Node`. * * This function uses the `dom.data()` facility to attach the * passed instance of a Class to a node. This is needed for * complex widget elements or similar where the corresponding * class instance responsible for the element must be retrieved * from DOM nodes obtained by `querySelector()` or similar means. * * @instance * @memberof LuCI.dom * @param {Node} node * The DOM `Node` instance to bind the class to. * * @param {Class} inst * The Class instance to bind to the node. * * @throws {TypeError} * Throws a `TypeError` when the given instance argument isn't * a valid Class instance. * * @returns {Class} * Returns the bound class instance. */ bindClassInstance: function(node, inst) { if (!(inst instanceof Class)) L.error('TypeError', 'Argument must be a class instance'); return this.data(node, '_class', inst); }, /** * Finds a bound class instance on the given node itself or the * first bound instance on its closest parent node. * * @instance * @memberof LuCI.dom * @param {Node} node * The DOM `Node` instance to start from. * * @returns {Class|null} * Returns the founds class instance if any or `null` if no bound * class could be found on the node itself or any of its parents. */ findClassInstance: function(node) { var inst = null; do { inst = this.data(node, '_class'); node = node.parentNode; } while (!(inst instanceof Class) && node != null); return inst; }, /** * Finds a bound class instance on the given node itself or the * first bound instance on its closest parent node and invokes * the specified method name on the found class instance. * * @instance * @memberof LuCI.dom * @param {Node} node * The DOM `Node` instance to start from. * * @param {string} method * The name of the method to invoke on the found class instance. * * @param {...*} params * Additional arguments to pass to the invoked method as-is. * * @returns {*|null} * Returns the return value of the invoked method if a class * instance and method has been found. Returns `null` if either * no bound class instance could be found, or if the found * instance didn't have the requested `method`. */ callClassMethod: function(node, method /*, ... */) { var inst = this.findClassInstance(node); if (inst == null || typeof(inst[method]) != 'function') return null; return inst[method].apply(inst, inst.varargs(arguments, 2)); }, /** * The ignore callback function is invoked by `isEmpty()` for each * child node to decide whether to ignore a child node or not. * * When this function returns `false`, the node passed to it is * ignored, else not. * * @callback LuCI.dom~ignoreCallbackFn * @param {Node} node * The child node to test. * * @returns {boolean} * Boolean indicating whether to ignore the node or not. */ /** * Tests whether a given DOM `Node` instance is empty or appears * empty. * * Any element child nodes which have the CSS class `hidden` set * or for which the optionally passed `ignoreFn` callback function * returns `false` are ignored. * * @instance * @memberof LuCI.dom * @param {Node} node * The DOM `Node` instance to test. * * @param {LuCI.dom~ignoreCallbackFn} [ignoreFn] * Specifies an optional function which is invoked for each child * node to decide whether the child node should be ignored or not. * * @returns {boolean} * Returns `true` if the node does not have any children or if * any children node either has a `hidden` CSS class or a `false` * result when testing it using the given `ignoreFn`. */ isEmpty: function(node, ignoreFn) { for (var child = node.firstElementChild; child != null; child = child.nextElementSibling) if (!child.classList.contains('hidden') && (!ignoreFn || !ignoreFn(child))) return false; return true; } }), Poll: Poll, Class: Class, Request: Request, /** * @class * @memberof LuCI * @hideconstructor * @classdesc * * The `view` class forms the basis of views and provides a standard * set of methods to inherit from. */ view: Class.extend(/* @lends LuCI.view.prototype */ { __name__: 'LuCI.View', __init__: function() { var vp = document.getElementById('view'); L.dom.content(vp, E('div', { 'class': 'spinning' }, _('Loading view…'))); return Promise.resolve(this.load()) .then(L.bind(this.render, this)) .then(L.bind(function(nodes) { var vp = document.getElementById('view'); L.dom.content(vp, nodes); L.dom.append(vp, this.addFooter()); }, this)).catch(L.error); }, /** * The load function is invoked before the view is rendered. * * The invocation of this function is wrapped by * `Promise.resolve()` so it may return Promises if needed. * * The return value of the function (or the resolved values * of the promise returned by it) will be passed as first * argument to `render()`. * * This function is supposed to be overwritten by subclasses, * the default implementation does nothing. * * @instance * @abstract * @memberof LuCI.view * * @returns {*|Promise<*>} * May return any value or a Promise resolving to any value. */ load: function() {}, /** * The render function is invoked after the * {@link LuCI.view#load load()} function and responsible * for setting up the view contents. It must return a DOM * `Node` or `DocumentFragment` holding the contents to * insert into the view area. * * The invocation of this function is wrapped by * `Promise.resolve()` so it may return Promises if needed. * * The return value of the function (or the resolved values * of the promise returned by it) will be inserted into the * main content area using * {@link LuCI.dom#append dom.append()}. * * This function is supposed to be overwritten by subclasses, * the default implementation does nothing. * * @instance * @abstract * @memberof LuCI.view * @param {*|null} load_results * This function will receive the return value of the * {@link LuCI.view#load view.load()} function as first * argument. * * @returns {Node|Promise<Node>} * Should return a DOM `Node` value or a `Promise` resolving * to a `Node` value. */ render: function() {}, /** * The handleSave function is invoked when the user clicks * the `Save` button in the page action footer. * * The default implementation should be sufficient for most * views using {@link form#Map form.Map()} based forms - it * will iterate all forms present in the view and invoke * the {@link form#Map#save Map.save()} method on each form. * * Views not using `Map` instances or requiring other special * logic should overwrite `handleSave()` with a custom * implementation. * * To disable the `Save` page footer button, views extending * this base class should overwrite the `handleSave` function * with `null`. * * The invocation of this function is wrapped by * `Promise.resolve()` so it may return Promises if needed. * * @instance * @memberof LuCI.view * @param {Event} ev * The DOM event that triggered the function. * * @returns {*|Promise<*>} * Any return values of this function are discarded, but * passed through `Promise.resolve()` to ensure that any * returned promise runs to completion before the button * is reenabled. */ handleSave: function(ev) { var tasks = []; document.getElementById('maincontent') .querySelectorAll('.cbi-map').forEach(function(map) { tasks.push(L.dom.callClassMethod(map, 'save')); }); return Promise.all(tasks); }, /** * The handleSaveApply function is invoked when the user clicks * the `Save & Apply` button in the page action footer. * * The default implementation should be sufficient for most * views using {@link form#Map form.Map()} based forms - it * will first invoke * {@link LuCI.view.handleSave view.handleSave()} and then * call {@link ui#changes#apply ui.changes.apply()} to start the * modal config apply and page reload flow. * * Views not using `Map` instances or requiring other special * logic should overwrite `handleSaveApply()` with a custom * implementation. * * To disable the `Save & Apply` page footer button, views * extending this base class should overwrite the * `handleSaveApply` function with `null`. * * The invocation of this function is wrapped by * `Promise.resolve()` so it may return Promises if needed. * * @instance * @memberof LuCI.view * @param {Event} ev * The DOM event that triggered the function. * * @returns {*|Promise<*>} * Any return values of this function are discarded, but * passed through `Promise.resolve()` to ensure that any * returned promise runs to completion before the button * is reenabled. */ handleSaveApply: function(ev) { return this.handleSave(ev).then(function() { L.ui.changes.apply(true); }); }, /** * The handleReset function is invoked when the user clicks * the `Reset` button in the page action footer. * * The default implementation should be sufficient for most * views using {@link form#Map form.Map()} based forms - it * will iterate all forms present in the view and invoke * the {@link form#Map#save Map.reset()} method on each form. * * Views not using `Map` instances or requiring other special * logic should overwrite `handleReset()` with a custom * implementation. * * To disable the `Reset` page footer button, views extending * this base class should overwrite the `handleReset` function * with `null`. * * The invocation of this function is wrapped by * `Promise.resolve()` so it may return Promises if needed. * * @instance * @memberof LuCI.view * @param {Event} ev * The DOM event that triggered the function. * * @returns {*|Promise<*>} * Any return values of this function are discarded, but * passed through `Promise.resolve()` to ensure that any * returned promise runs to completion before the button * is reenabled. */ handleReset: function(ev) { var tasks = []; document.getElementById('maincontent') .querySelectorAll('.cbi-map').forEach(function(map) { tasks.push(L.dom.callClassMethod(map, 'reset')); }); return Promise.all(tasks); }, /** * Renders a standard page action footer if any of the * `handleSave()`, `handleSaveApply()` or `handleReset()` * functions are defined. * * The default implementation should be sufficient for most * views - it will render a standard page footer with action * buttons labeled `Save`, `Save & Apply` and `Reset` * triggering the `handleSave()`, `handleSaveApply()` and * `handleReset()` functions respectively. * * When any of these `handle*()` functions is overwritten * with `null` by a view extending this class, the * corresponding button will not be rendered. * * @instance * @memberof LuCI.view * @returns {DocumentFragment} * Returns a `DocumentFragment` containing the footer bar * with buttons for each corresponding `handle*()` action * or an empty `DocumentFragment` if all three `handle*()` * methods are overwritten with `null`. */ addFooter: function() { var footer = E([]); if (this.handleSaveApply || this.handleSave || this.handleReset) { footer.appendChild(E('div', { 'class': 'cbi-page-actions' }, [ this.handleSaveApply ? E('button', { 'class': 'cbi-button cbi-button-apply', 'click': L.ui.createHandlerFn(this, 'handleSaveApply') }, [ _('Save & Apply') ]) : '', ' ', this.handleSave ? E('button', { 'class': 'cbi-button cbi-button-save', 'click': L.ui.createHandlerFn(this, 'handleSave') }, [ _('Save') ]) : '', ' ', this.handleReset ? E('button', { 'class': 'cbi-button cbi-button-reset', 'click': L.ui.createHandlerFn(this, 'handleReset') }, [ _('Reset') ]) : '' ])); } return footer; } }) }); /** * @class * @memberof LuCI * @deprecated * @classdesc * * The `LuCI.XHR` class is a legacy compatibility shim for the * functionality formerly provided by `xhr.js`. It is registered as global * `window.XHR` symbol for compatibility with legacy code. * * New code should use {@link LuCI.Request} instead to implement HTTP * request handling. */ var XHR = Class.extend(/** @lends LuCI.XHR.prototype */ { __name__: 'LuCI.XHR', __init__: function() { if (window.console && console.debug) console.debug('Direct use XHR() is deprecated, please use L.Request instead'); }, _response: function(cb, res, json, duration) { if (this.active) cb(res, json, duration); delete this.active; }, /** * This function is a legacy wrapper around * {@link LuCI#get LuCI.get()}. * * @instance * @deprecated * @memberof LuCI.XHR * * @param {string} url * The URL to request * * @param {Object} [data] * Additional query string data * * @param {LuCI.requestCallbackFn} [callback] * Callback function to invoke on completion * * @param {number} [timeout] * Request timeout to use * * @return {Promise<null>} */ get: function(url, data, callback, timeout) { this.active = true; L.get(url, data, this._response.bind(this, callback), timeout); }, /** * This function is a legacy wrapper around * {@link LuCI#post LuCI.post()}. * * @instance * @deprecated * @memberof LuCI.XHR * * @param {string} url * The URL to request * * @param {Object} [data] * Additional data to append to the request body. * * @param {LuCI.requestCallbackFn} [callback] * Callback function to invoke on completion * * @param {number} [timeout] * Request timeout to use * * @return {Promise<null>} */ post: function(url, data, callback, timeout) { this.active = true; L.post(url, data, this._response.bind(this, callback), timeout); }, /** * Cancels a running request. * * This function does not actually cancel the underlying * `XMLHTTPRequest` request but it sets a flag which prevents the * invocation of the callback function when the request eventually * finishes or timed out. * * @instance * @deprecated * @memberof LuCI.XHR */ cancel: function() { delete this.active }, /** * Checks the running state of the request. * * @instance * @deprecated * @memberof LuCI.XHR * * @returns {boolean} * Returns `true` if the request is still running or `false` if it * already completed. */ busy: function() { return (this.active === true) }, /** * Ignored for backwards compatibility. * * This function does nothing. * * @instance * @deprecated * @memberof LuCI.XHR */ abort: function() {}, /** * Existing for backwards compatibility. * * This function simply throws an `InternalError` when invoked. * * @instance * @deprecated * @memberof LuCI.XHR * * @throws {InternalError} * Throws an `InternalError` with the message `Not implemented` * when invoked. */ send_form: function() { L.error('InternalError', 'Not implemented') }, }); XHR.get = function() { return window.L.get.apply(window.L, arguments) }; XHR.post = function() { return window.L.post.apply(window.L, arguments) }; XHR.poll = function() { return window.L.poll.apply(window.L, arguments) }; XHR.stop = Request.poll.remove.bind(Request.poll); XHR.halt = Request.poll.stop.bind(Request.poll); XHR.run = Request.poll.start.bind(Request.poll); XHR.running = Request.poll.active.bind(Request.poll); window.XHR = XHR; window.LuCI = LuCI; })(window, document);