LuCI - Lua Configuration Interface
Copyright 2008 Steven Barth <steven@midlink.org>
- Copyright 2008-2012 Jo-Philipp Wich <jow@openwrt.org>
+ Copyright 2008-2018 Jo-Philipp Wich <jo@mein.io>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
*/
var cbi_d = [];
-var cbi_t = [];
var cbi_strings = { path: {}, label: {} };
+function s8(bytes, off) {
+ var n = bytes[off];
+ return (n > 0x7F) ? (n - 256) >>> 0 : n;
+}
+
+function u16(bytes, off) {
+ return ((bytes[off + 1] << 8) + bytes[off]) >>> 0;
+}
+
function sfh(s) {
if (s === null || s.length === 0)
return null;
- var hash = (s.length >>> 0),
- len = (s.length >>> 2),
+ var bytes = [];
+
+ for (var i = 0; i < s.length; i++) {
+ var ch = s.charCodeAt(i);
+
+ if (ch <= 0x7F)
+ bytes.push(ch);
+ else if (ch <= 0x7FF)
+ bytes.push(((ch >>> 6) & 0x1F) | 0xC0,
+ ( ch & 0x3F) | 0x80);
+ else if (ch <= 0xFFFF)
+ bytes.push(((ch >>> 12) & 0x0F) | 0xE0,
+ ((ch >>> 6) & 0x3F) | 0x80,
+ ( ch & 0x3F) | 0x80);
+ else if (code <= 0x10FFFF)
+ bytes.push(((ch >>> 18) & 0x07) | 0xF0,
+ ((ch >>> 12) & 0x3F) | 0x80,
+ ((ch >> 6) & 0x3F) | 0x80,
+ ( ch & 0x3F) | 0x80);
+ }
+
+ if (!bytes.length)
+ return null;
+
+ var hash = (bytes.length >>> 0),
+ len = (bytes.length >>> 2),
off = 0, tmp;
while (len--) {
- hash += ((s.charCodeAt(off + 1) << 8) + s.charCodeAt(off)) >>> 0;
- tmp = ((((s.charCodeAt(off + 3) << 8) + s.charCodeAt(off + 2)) << 11) ^ hash) >>> 0;
+ hash += u16(bytes, off);
+ tmp = ((u16(bytes, off + 2) << 11) ^ hash) >>> 0;
hash = ((hash << 16) ^ tmp) >>> 0;
hash += hash >>> 11;
off += 4;
}
- switch ((s.length & 3) >>> 0) {
+ switch ((bytes.length & 3) >>> 0) {
case 3:
- hash += ((s.charCodeAt(off + 1) << 8) + s.charCodeAt(off)) >>> 0;
+ hash += u16(bytes, off);
hash = (hash ^ (hash << 16)) >>> 0;
- hash = (hash ^ (s.charCodeAt(off + 2) << 18)) >>> 0;
- hash += hash >> 11;
+ hash = (hash ^ (s8(bytes, off + 2) << 18)) >>> 0;
+ hash += hash >>> 11;
break;
case 2:
- hash += ((s.charCodeAt(off + 1) << 8) + s.charCodeAt(off)) >>> 0;
+ hash += u16(bytes, off);
hash = (hash ^ (hash << 11)) >>> 0;
hash += hash >>> 17;
break;
case 1:
- hash += s.charCodeAt(off);
+ hash += s8(bytes, off);
hash = (hash ^ (hash << 10)) >>> 0;
hash += hash >>> 1;
break;
return (0x100000000 + hash).toString(16).substr(1);
}
-function _(s) {
- return (window.TR && TR[sfh(s)]) || s;
-}
-
-function Int(x) {
- return (/^-?\d+$/.test(x) ? +x : NaN);
-}
+var plural_function = null;
-function Dec(x) {
- return (/^-?\d+(?:\.\d+)?$/.test(x) ? +x : NaN);
+function trimws(s) {
+ return String(s).trim().replace(/[ \t\n]+/g, ' ');
}
-function IPv4(x) {
- if (!x.match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/))
- return null;
-
- if (RegExp.$1 > 255 || RegExp.$2 > 255 || RegExp.$3 > 255 || RegExp.$4 > 255)
- return null;
-
- return [ +RegExp.$1, +RegExp.$2, +RegExp.$3, +RegExp.$4 ];
-}
-
-function IPv6(x) {
- if (x.match(/^([a-fA-F0-9:]+):(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})$/)) {
- var v6 = RegExp.$1, v4 = IPv4(RegExp.$2);
-
- if (!v4)
- return null;
-
- x = v6 + ':' + (v4[0] * 256 + v4[1]).toString(16)
- + ':' + (v4[2] * 256 + v4[3]).toString(16);
- }
-
- if (!x.match(/^[a-fA-F0-9:]+$/))
- return null;
-
- var prefix_suffix = x.split(/::/);
-
- if (prefix_suffix.length > 2)
- return null;
-
- var prefix = (prefix_suffix[0] || '0').split(/:/);
- var suffix = prefix_suffix.length > 1 ? (prefix_suffix[1] || '0').split(/:/) : [];
-
- if (suffix.length ? (prefix.length + suffix.length > 7)
- : ((prefix_suffix.length < 2 && prefix.length < 8) || prefix.length > 8))
- return null;
-
- var i, word;
- var words = [];
-
- for (i = 0, word = parseInt(prefix[0], 16); i < prefix.length; word = parseInt(prefix[++i], 16))
- if (prefix[i].length <= 4 && !isNaN(word) && word <= 0xFFFF)
- words.push(word);
- else
- return null;
-
- for (i = 0; i < (8 - prefix.length - suffix.length); i++)
- words.push(0);
-
- for (i = 0, word = parseInt(suffix[0], 16); i < suffix.length; word = parseInt(suffix[++i], 16))
- if (suffix[i].length <= 4 && !isNaN(word) && word <= 0xFFFF)
- words.push(word);
- else
- return null;
-
- return words;
+function _(s, c) {
+ var k = (c != null ? trimws(c) + '\u0001' : '') + trimws(s);
+ return (window.TR && TR[sfh(k)]) || s;
}
-var CBIValidatorPrototype = {
- apply: function(name, value, args) {
- var func;
-
- if (typeof(name) === 'function')
- func = name;
- else if (typeof(this.types[name]) === 'function')
- func = this.types[name];
- else
- return false;
-
- if (value !== undefined && value !== null)
- this.value = value;
-
- return func.apply(this, args);
- },
-
- assert: function(condition, message) {
- if (!condition) {
- this.field.classList.add('cbi-input-invalid');
- this.error = message;
- return false;
- }
-
- this.field.classList.remove('cbi-input-invalid');
- this.error = null;
- return true;
- },
-
- compile: function(code) {
- var pos = 0;
- var esc = false;
- var depth = 0;
- var stack = [ ];
-
- code += ',';
-
- for (var i = 0; i < code.length; i++) {
- if (esc) {
- esc = false;
- continue;
- }
-
- switch (code.charCodeAt(i))
- {
- case 92:
- esc = true;
- break;
-
- case 40:
- case 44:
- if (depth <= 0) {
- if (pos < i) {
- var label = code.substring(pos, i);
- label = label.replace(/\\(.)/g, '$1');
- label = label.replace(/^[ \t]+/g, '');
- label = label.replace(/[ \t]+$/g, '');
-
- if (label && !isNaN(label)) {
- stack.push(parseFloat(label));
- }
- else if (label.match(/^(['"]).*\1$/)) {
- stack.push(label.replace(/^(['"])(.*)\1$/, '$2'));
- }
- else if (typeof this.types[label] == 'function') {
- stack.push(this.types[label]);
- stack.push(null);
- }
- else {
- throw "Syntax error, unhandled token '"+label+"'";
- }
- }
-
- pos = i+1;
- }
-
- depth += (code.charCodeAt(i) == 40);
- break;
-
- case 41:
- if (--depth <= 0) {
- if (typeof stack[stack.length-2] != 'function')
- throw "Syntax error, argument list follows non-function";
+function N_(n, s, p, c) {
+ if (plural_function == null && window.TR)
+ plural_function = new Function('n', (TR['00000000'] || 'plural=(n != 1);') + 'return +plural');
- stack[stack.length-1] = this.compile(code.substring(pos, i));
- pos = i+1;
- }
-
- break;
- }
- }
-
- return stack;
- },
-
- validate: function() {
- /* element is detached */
- if (!findParent(this.field, 'form'))
- return true;
-
- this.field.classList.remove('cbi-input-invalid');
- this.value = matchesElem(this.field, 'select') ? this.field.options[this.field.selectedIndex].value : this.field.value;
- this.error = null;
-
- var valid;
-
- if (this.value.length === 0)
- valid = this.assert(this.optional, _('non-empty value'));
- else
- valid = this.vstack[0].apply(this, this.vstack[1]);
-
- if (!valid) {
- this.field.setAttribute('data-tooltip', _('Expecting %s').format(this.error));
- this.field.setAttribute('data-tooltip-style', 'error');
- this.field.dispatchEvent(new CustomEvent('validation-failure', { bubbles: true }));
- }
- else {
- this.field.removeAttribute('data-tooltip');
- this.field.removeAttribute('data-tooltip-style');
- this.field.dispatchEvent(new CustomEvent('validation-success', { bubbles: true }));
- }
-
- return valid;
- },
-
- types: {
- integer: function() {
- return this.assert(Int(this.value) !== NaN, _('valid integer value'));
- },
-
- uinteger: function() {
- return this.assert(Int(this.value) >= 0, _('positive integer value'));
- },
-
- float: function() {
- return this.assert(Dec(this.value) !== NaN, _('valid decimal value'));
- },
-
- ufloat: function() {
- return this.assert(Dec(this.value) >= 0, _('positive decimal value'));
- },
-
- ipaddr: function(nomask) {
- return this.assert(this.apply('ip4addr', null, [nomask]) || this.apply('ip6addr', null, [nomask]),
- nomask ? _('valid IP address') : _('valid IP address or prefix'));
- },
-
- ip4addr: function(nomask) {
- var re = nomask ? /^(\d+\.\d+\.\d+\.\d+)$/ : /^(\d+\.\d+\.\d+\.\d+)(?:\/(\d+\.\d+\.\d+\.\d+)|\/(\d{1,2}))?$/,
- m = this.value.match(re);
-
- return this.assert(m && IPv4(m[1]) && (m[2] ? IPv4(m[2]) : (m[3] ? this.apply('ip4prefix', m[3]) : true)),
- nomask ? _('valid IPv4 address') : _('valid IPv4 address or network'));
- },
-
- ip6addr: function(nomask) {
- var re = nomask ? /^([0-9a-fA-F:.]+)$/ : /^([0-9a-fA-F:.]+)(?:\/(\d{1,3}))?$/,
- m = this.value.match(re);
-
- return this.assert(m && IPv6(m[1]) && (m[2] ? this.apply('ip6prefix', m[2]) : true),
- nomask ? _('valid IPv6 address') : _('valid IPv6 address or prefix'));
- },
-
- ip4prefix: function() {
- return this.assert(!isNaN(this.value) && this.value >= 0 && this.value <= 32,
- _('valid IPv4 prefix value (0-32)'));
- },
-
- ip6prefix: function() {
- return this.assert(!isNaN(this.value) && this.value >= 0 && this.value <= 128,
- _('valid IPv6 prefix value (0-128)'));
- },
-
- cidr: function() {
- return this.assert(this.apply('cidr4') || this.apply('cidr6'), _('valid IPv4 or IPv6 CIDR'));
- },
-
- cidr4: function() {
- var m = this.value.match(/^(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})\/(\d{1,2})$/);
- return this.assert(m && IPv4(m[1]) && this.apply('ip4prefix', m[2]), _('valid IPv4 CIDR'));
- },
-
- cidr6: function() {
- var m = this.value.match(/^([0-9a-fA-F:.]+)\/(\d{1,3})$/);
- return this.assert(m && IPv6(m[1]) && this.apply('ip6prefix', m[2]), _('valid IPv6 CIDR'));
- },
-
- ipnet4: function() {
- var m = this.value.match(/^(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})\/(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})$/);
- return this.assert(m && IPv4(m[1]) && IPv4(m[2]), _('IPv4 network in address/netmask notation'));
- },
-
- ipnet6: function() {
- var m = this.value.match(/^([0-9a-fA-F:.]+)\/([0-9a-fA-F:.]+)$/);
- return this.assert(m && IPv6(m[1]) && IPv6(m[2]), _('IPv6 network in address/netmask notation'));
- },
-
- ip6hostid: function() {
- if (this.value == "eui64" || this.value == "random")
- return true;
-
- var v6 = IPv6(this.value);
- return this.assert(!(!v6 || v6[0] || v6[1] || v6[2] || v6[3]), _('valid IPv6 host id'));
- },
-
- ipmask: function() {
- return this.assert(this.apply('ipmask4') || this.apply('ipmask6'),
- _('valid network in address/netmask notation'));
- },
-
- ipmask4: function() {
- return this.assert(this.apply('cidr4') || this.apply('ipnet4') || this.apply('ip4addr'),
- _('valid IPv4 network'));
- },
-
- ipmask6: function() {
- return this.assert(this.apply('cidr6') || this.apply('ipnet6') || this.apply('ip6addr'),
- _('valid IPv6 network'));
- },
-
- port: function() {
- var p = Int(this.value);
- return this.assert(p >= 0 && p <= 65535, _('valid port value'));
- },
-
- portrange: function() {
- if (this.value.match(/^(\d+)-(\d+)$/)) {
- var p1 = +RegExp.$1;
- var p2 = +RegExp.$2;
- return this.assert(p1 <= p2 && p2 <= 65535,
- _('valid port or port range (port1-port2)'));
- }
-
- return this.assert(this.apply('port'), _('valid port or port range (port1-port2)'));
- },
-
- macaddr: function() {
- return this.assert(this.value.match(/^([a-fA-F0-9]{2}:){5}[a-fA-F0-9]{2}$/) != null,
- _('valid MAC address'));
- },
-
- host: function(ipv4only) {
- return this.assert(this.apply('hostname') || this.apply(ipv4only == 1 ? 'ip4addr' : 'ipaddr'),
- _('valid hostname or IP address'));
- },
-
- hostname: function(strict) {
- if (this.value.length <= 253)
- return this.assert(
- (this.value.match(/^[a-zA-Z0-9_]+$/) != null ||
- (this.value.match(/^[a-zA-Z0-9_][a-zA-Z0-9_\-.]*[a-zA-Z0-9]$/) &&
- this.value.match(/[^0-9.]/))) &&
- (!strict || !this.value.match(/^_/)),
- _('valid hostname'));
-
- return this.assert(false, _('valid hostname'));
- },
-
- network: function() {
- return this.assert(this.apply('uciname') || this.apply('host'),
- _('valid UCI identifier, hostname or IP address'));
- },
-
- hostport: function(ipv4only) {
- var hp = this.value.split(/:/);
- return this.assert(hp.length == 2 && this.apply('host', hp[0], [ipv4only]) && this.apply('port', hp[1]),
- _('valid host:port'));
- },
-
- ip4addrport: function() {
- var hp = this.value.split(/:/);
- return this.assert(hp.length == 2 && this.apply('ip4addr', hp[0], [true]) && this.apply('port', hp[1]),
- _('valid IPv4 address:port'));
- },
-
- ipaddrport: function(bracket) {
- var m4 = this.value.match(/^([^\[\]:]+):(\d+)$/),
- m6 = this.value.match((bracket == 1) ? /^\[(.+)\]:(\d+)$/ : /^([^\[\]]+):(\d+)$/);
-
- if (m4)
- return this.assert(this.apply('ip4addr', m4[0], [true]) && this.apply('port', m4[1]),
- _('valid address:port'));
-
- return this.assert(m6 && this.apply('ip6addr', m6[0], [true]) && this.apply('port', m6[1]),
- _('valid address:port'));
- },
-
- wpakey: function() {
- var v = this.value;
-
- if (v.length == 64)
- return this.assert(v.match(/^[a-fA-F0-9]{64}$/), _('valid hexadecimal WPA key'));
-
- return this.assert((v.length >= 8) && (v.length <= 63), _('key between 8 and 63 characters'));
- },
-
- wepkey: function() {
- var v = this.value;
-
- if (v.substr(0, 2) === 's:')
- v = v.substr(2);
-
- if ((v.length == 10) || (v.length == 26))
- return this.assert(v.match(/^[a-fA-F0-9]{10,26}$/), _('valid hexadecimal WEP key'));
-
- return this.assert((v.length === 5) || (v.length === 13), _('key with either 5 or 13 characters'));
- },
-
- uciname: function() {
- return this.assert(this.value.match(/^[a-zA-Z0-9_]+$/), _('valid UCI identifier'));
- },
-
- range: function(min, max) {
- var val = Dec(this.value);
- return this.assert(val >= +min && val <= +max, _('value between %f and %f').format(min, max));
- },
-
- min: function(min) {
- return this.assert(Dec(this.value) >= +min, _('value greater or equal to %f').format(min));
- },
-
- max: function(max) {
- return this.assert(Dec(this.value) <= +max, _('value smaller or equal to %f').format(max));
- },
-
- rangelength: function(min, max) {
- var val = '' + this.value;
- return this.assert((val.length >= +min) && (val.length <= +max),
- _('value between %d and %d characters').format(min, max));
- },
-
- minlength: function(min) {
- return this.assert((''+this.value).length >= +min,
- _('value with at least %d characters').format(min));
- },
-
- maxlength: function(max) {
- return this.assert((''+this.value).length <= +max,
- _('value with at most %d characters').format(max));
- },
-
- or: function() {
- var errors = [];
-
- for (var i = 0; i < arguments.length; i += 2) {
- if (typeof arguments[i] != 'function') {
- if (arguments[i] == this.value)
- return this.assert(true);
- errors.push('"%s"'.format(arguments[i]));
- i--;
- }
- else if (arguments[i].apply(this, arguments[i+1])) {
- return this.assert(true);
- }
- else {
- errors.push(this.error);
- }
- }
-
- return this.assert(false, _('one of:\n - %s'.format(errors.join('\n - '))));
- },
-
- and: function() {
- for (var i = 0; i < arguments.length; i += 2) {
- if (typeof arguments[i] != 'function') {
- if (arguments[i] != this.value)
- return this.assert(false, '"%s"'.format(arguments[i]));
- i--;
- }
- else if (!arguments[i].apply(this, arguments[i+1])) {
- return this.assert(false, this.error);
- }
- }
-
- return this.assert(true);
- },
-
- neg: function() {
- return this.apply('or', this.value.replace(/^[ \t]*![ \t]*/, ''), arguments);
- },
-
- list: function(subvalidator, subargs) {
- this.field.setAttribute('data-is-list', 'true');
+ var i = plural_function ? plural_function(n) : (n != 1),
+ k = (c != null ? trimws(c) + '\u0001' : '') + trimws(s) + '\u0002' + i.toString();
- var tokens = this.value.match(/[^ \t]+/g);
- for (var i = 0; i < tokens.length; i++)
- if (!this.apply(subvalidator, tokens[i], subargs))
- return this.assert(false, this.error);
-
- return this.assert(true);
- },
-
- phonedigit: function() {
- return this.assert(this.value.match(/^[0-9\*#!\.]+$/),
- _('valid phone digit (0-9, "*", "#", "!" or ".")'));
- },
-
- timehhmmss: function() {
- return this.assert(this.value.match(/^[0-6][0-9]:[0-6][0-9]:[0-6][0-9]$/),
- _('valid time (HH:MM:SS)'));
- },
-
- dateyyyymmdd: function() {
- if (this.value.match(/^(\d\d\d\d)-(\d\d)-(\d\d)/)) {
- var year = +RegExp.$1,
- month = +RegExp.$2,
- day = +RegExp.$3,
- days_in_month = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
-
- function is_leap_year(year) {
- return ((!(year % 4) && (year % 100)) || !(year % 400));
- }
-
- function get_days_in_month(month, year) {
- return (month === 2 && is_leap_year(year)) ? 29 : days_in_month[month - 1];
- }
-
- /* Firewall rules in the past don't make sense */
- return this.assert(year >= 2015 && month && month <= 12 && day && day <= get_days_in_month(month, year),
- _('valid date (YYYY-MM-DD)'));
-
- }
-
- return this.assert(false, _('valid date (YYYY-MM-DD)'));
- },
-
- unique: function(subvalidator, subargs) {
- var ctx = this,
- option = findParent(ctx.field, '[data-type][data-name]'),
- section = findParent(option, '.cbi-section'),
- query = '[data-type="%s"][data-name="%s"]'.format(option.getAttribute('data-type'), option.getAttribute('data-name')),
- unique = true;
-
- section.querySelectorAll(query).forEach(function(sibling) {
- if (sibling === option)
- return;
-
- var input = sibling.querySelector('[data-type]'),
- values = input ? (input.getAttribute('data-is-list') ? input.value.match(/[^ \t]+/g) : [ input.value ]) : null;
-
- if (values !== null && values.indexOf(ctx.value) !== -1)
- unique = false;
- });
-
- if (!unique)
- return this.assert(false, _('unique value'));
-
- if (typeof(subvalidator) === 'function')
- return this.apply(subvalidator, undefined, subargs);
-
- return this.assert(true);
- },
-
- hexstring: function() {
- return this.assert(this.value.match(/^([a-f0-9][a-f0-9]|[A-F0-9][A-F0-9])+$/),
- _('hexadecimal encoded value'));
- }
- }
-};
-
-function CBIValidator(field, type, optional)
-{
- this.field = field;
- this.optional = optional;
- this.vstack = this.compile(type);
+ return (window.TR && TR[sfh(k)]) || (i ? p : s);
}
-CBIValidator.prototype = CBIValidatorPrototype;
-
function cbi_d_add(field, dep, index) {
var obj = (typeof(field) === 'string') ? document.getElementById(field) : field;
parent.parentNode.style.display = (parent.options.length <= 1) ? 'none' : '';
}
- if (entry && entry.parent) {
- if (!cbi_t_update())
- cbi_tag_last(parent);
- }
+ if (entry && entry.parent)
+ cbi_tag_last(parent);
if (state)
cbi_d_update();
+ else if (parent)
+ parent.dispatchEvent(new CustomEvent('dependency-update', { bubbles: true }));
}
function cbi_init() {
var nodes;
+ document.querySelectorAll('.cbi-dropdown').forEach(function(node) {
+ cbi_dropdown_init(node);
+ node.addEventListener('cbi-dropdown-change', cbi_d_update);
+ });
+
nodes = document.querySelectorAll('[data-strings]');
for (var i = 0, node; (node = nodes[i]) !== undefined; i++) {
nodes = document.querySelectorAll('[data-choices]');
for (var i = 0, node; (node = nodes[i]) !== undefined; i++) {
- var choices = JSON.parse(node.getAttribute('data-choices'));
- var options = {};
+ var choices = JSON.parse(node.getAttribute('data-choices')),
+ options = {};
for (var j = 0; j < choices[0].length; j++)
options[choices[0][j]] = choices[1][j];
var def = (node.getAttribute('data-optional') === 'true')
? node.placeholder || '' : null;
- cbi_combobox_init(node, options, def,
- node.getAttribute('data-manual'));
+ var cb = new L.ui.Combobox(node.value, options, {
+ name: node.getAttribute('name'),
+ sort: choices[0],
+ select_placeholder: def || _('-- Please choose --'),
+ custom_placeholder: node.getAttribute('data-manual') || _('-- custom --')
+ });
+
+ var n = cb.render();
+ n.addEventListener('cbi-dropdown-change', cbi_d_update);
+ node.parentNode.replaceChild(n, node);
}
nodes = document.querySelectorAll('[data-dynlist]');
for (var i = 0, node; (node = nodes[i]) !== undefined; i++) {
- var choices = JSON.parse(node.getAttribute('data-dynlist'));
- var options = null;
+ var choices = JSON.parse(node.getAttribute('data-dynlist')),
+ values = JSON.parse(node.getAttribute('data-values') || '[]'),
+ options = null;
if (choices[0] && choices[0].length) {
options = {};
options[choices[0][j]] = choices[1][j];
}
- cbi_dynlist_init(node, choices[2], choices[3], options);
+ var dl = new L.ui.DynamicList(values, options, {
+ name: node.getAttribute('data-prefix'),
+ sort: choices[0],
+ datatype: choices[2],
+ optional: choices[3],
+ placeholder: node.getAttribute('data-placeholder')
+ });
+
+ var n = dl.render();
+ n.addEventListener('cbi-dynlist-change', cbi_d_update);
+ node.parentNode.replaceChild(n, node);
}
nodes = document.querySelectorAll('[data-type]');
node.getAttribute('data-type'));
}
- document.querySelectorAll('.cbi-dropdown').forEach(function(s) {
- cbi_dropdown_init(s);
- });
-
document.querySelectorAll('.cbi-tooltip:not(:empty)').forEach(function(s) {
s.parentNode.classList.add('cbi-tooltip-container');
});
i.addEventListener('mouseout', handler);
});
- cbi_d_update();
-}
-
-function cbi_combobox_init(id, values, def, man) {
- var obj = (typeof(id) === 'string') ? document.getElementById(id) : id;
- var sb = E('div', {
- 'name': obj.name,
- 'class': 'cbi-dropdown',
- 'display-items': 5,
- 'optional': obj.getAttribute('data-optional'),
- 'placeholder': _('-- Please choose --'),
- 'data-type': obj.getAttribute('data-type'),
- 'data-optional': obj.getAttribute('data-optional')
- }, [ E('ul') ]);
-
- if (!(obj.value in values) && obj.value.length) {
- sb.lastElementChild.appendChild(E('li', {
- 'data-value': obj.value,
- 'selected': ''
- }, obj.value.length ? obj.value : (def || _('-- Please choose --'))));
- }
-
- for (var i in values) {
- sb.lastElementChild.appendChild(E('li', {
- 'data-value': i,
- 'selected': (i == obj.value) ? '' : null
- }, values[i]));
- }
-
- sb.lastElementChild.appendChild(E('li', { 'data-value': '-' }, [
- E('input', {
- 'type': 'text',
- 'class': 'create-item-input',
- 'data-type': obj.getAttribute('data-type'),
- 'data-optional': true,
- 'placeholder': (man || _('-- custom --'))
- })
- ]));
-
- sb.value = obj.value;
- obj.parentNode.replaceChild(sb, obj);
-}
-
-function cbi_filebrowser(id, defpath) {
- var field = document.getElementById(id);
- var browser = window.open(
- cbi_strings.path.browser + ( field.value || defpath || '' ) + '?field=' + id,
- "luci_filebrowser", "width=300,height=400,left=100,top=200,scrollbars=yes"
- );
-
- browser.focus();
-}
-
-function cbi_browser_init(id, resource, defpath)
-{
- function cbi_browser_btnclick(e) {
- cbi_filebrowser(id, defpath);
- return false;
- }
-
- var field = document.getElementById(id);
-
- var btn = document.createElement('img');
- btn.className = 'cbi-image-button';
- btn.src = (resource || cbi_strings.path.resource) + '/cbi/folder.gif';
- field.parentNode.insertBefore(btn, field.nextSibling);
-
- btn.addEventListener('click', cbi_browser_btnclick);
-}
-
-CBIDynamicList = {
- addItem: function(dl, value, text, flash) {
- var exists = false,
- new_item = E('div', { 'class': flash ? 'item flash' : 'item', 'tabindex': 0 }, [
- E('span', {}, text || value),
- E('input', {
- 'type': 'hidden',
- 'name': dl.getAttribute('data-prefix'),
- 'value': value })]);
-
- dl.querySelectorAll('.item, .add-item').forEach(function(item) {
- if (exists)
- return;
-
- var hidden = item.querySelector('input[type="hidden"]');
-
- if (hidden && hidden.value === value)
- exists = true;
- else if (!hidden || hidden.value >= value)
- exists = !!item.parentNode.insertBefore(new_item, item);
- });
- },
-
- removeItem: function(dl, item) {
- var sb = dl.querySelector('.cbi-dropdown');
- if (sb) {
- var value = item.querySelector('input[type="hidden"]').value;
-
- sb.querySelectorAll('ul > li').forEach(function(li) {
- if (li.getAttribute('data-value') === value)
- li.removeAttribute('unselectable');
- });
- }
-
- item.parentNode.removeChild(item);
- },
-
- handleClick: function(ev) {
- var dl = ev.currentTarget,
- item = findParent(ev.target, '.item');
-
- if (item) {
- this.removeItem(dl, item);
- }
- else if (matchesElem(ev.target, '.cbi-button-add')) {
- var input = ev.target.previousElementSibling;
- if (input.value.length && !input.classList.contains('cbi-input-invalid')) {
- this.addItem(dl, input.value, null, true);
- input.value = '';
- }
- }
- },
-
- handleDropdownChange: function(ev) {
- var dl = ev.currentTarget,
- sbIn = ev.detail.instance,
- sbEl = ev.detail.element,
- sbVal = ev.detail.value;
-
- if (sbVal === null)
- return;
-
- sbIn.setValues(sbEl, null);
- sbVal.element.setAttribute('unselectable', '');
-
- this.addItem(dl, sbVal.value, sbVal.text, true);
- },
-
- handleKeydown: function(ev) {
- var dl = ev.currentTarget,
- item = findParent(ev.target, '.item');
-
- if (item) {
- switch (ev.keyCode) {
- case 8: /* backspace */
- if (item.previousElementSibling)
- item.previousElementSibling.focus();
-
- this.removeItem(dl, item);
- break;
-
- case 46: /* delete */
- if (item.nextElementSibling) {
- if (item.nextElementSibling.classList.contains('item'))
- item.nextElementSibling.focus();
- else
- item.nextElementSibling.firstElementChild.focus();
- }
-
- this.removeItem(dl, item);
- break;
- }
- }
- else if (matchesElem(ev.target, '.cbi-input-text')) {
- switch (ev.keyCode) {
- case 13: /* enter */
- if (ev.target.value.length && !ev.target.classList.contains('cbi-input-invalid')) {
- this.addItem(dl, ev.target.value, null, true);
- ev.target.value = '';
- ev.target.blur();
- ev.target.focus();
- }
-
- ev.preventDefault();
- break;
- }
- }
- }
-};
-
-function cbi_dynlist_init(dl, datatype, optional, choices)
-{
- if (!(this instanceof cbi_dynlist_init))
- return new cbi_dynlist_init(dl, datatype, optional, choices);
-
- dl.classList.add('cbi-dynlist');
- dl.appendChild(E('div', { 'class': 'add-item' }, E('input', {
- 'type': 'text',
- 'name': 'cbi.dynlist.' + dl.getAttribute('data-prefix'),
- 'class': 'cbi-input-text',
- 'data-type': datatype,
- 'data-optional': true
- })));
-
- if (choices)
- cbi_combobox_init(dl.lastElementChild.lastElementChild, choices, '', _('-- custom --'));
- else
- dl.lastElementChild.appendChild(E('div', { 'class': 'cbi-button cbi-button-add' }, '+'));
-
- dl.addEventListener('click', this.handleClick.bind(this));
- dl.addEventListener('keydown', this.handleKeydown.bind(this));
- dl.addEventListener('cbi-dropdown-change', this.handleDropdownChange.bind(this));
-
- try {
- var values = JSON.parse(dl.getAttribute('data-values') || '[]');
-
- if (typeof(values) === 'object' && Array.isArray(values))
- for (var i = 0; i < values.length; i++)
- this.addItem(dl, values[i], choices ? choices[values[i]] : null);
- }
- catch (e) {}
-}
-
-cbi_dynlist_init.prototype = CBIDynamicList;
+ var tasks = [];
+ document.querySelectorAll('[data-ui-widget]').forEach(function(node) {
+ var args = JSON.parse(node.getAttribute('data-ui-widget') || '[]'),
+ widget = new (Function.prototype.bind.apply(L.ui[args[0]], args)),
+ markup = widget.render();
-function cbi_t_add(section, tab) {
- var t = document.getElementById('tab.' + section + '.' + tab);
- var c = document.getElementById('container.' + section + '.' + tab);
-
- if (t && c) {
- cbi_t[section] = (cbi_t[section] || [ ]);
- cbi_t[section][tab] = { 'tab': t, 'container': c, 'cid': c.id };
- }
-}
-
-function cbi_t_switch(section, tab) {
- if (cbi_t[section] && cbi_t[section][tab]) {
- var o = cbi_t[section][tab];
- var h = document.getElementById('tab.' + section);
-
- for (var tid in cbi_t[section]) {
- var o2 = cbi_t[section][tid];
-
- if (o.tab.id != o2.tab.id) {
- o2.tab.classList.remove('cbi-tab');
- o2.tab.classList.add('cbi-tab-disabled');
- o2.container.style.display = 'none';
- }
- else {
- if(h)
- h.value = tab;
-
- o2.tab.classList.remove('cbi-tab-disabled');
- o2.tab.classList.add('cbi-tab');
- o2.container.style.display = 'block';
- }
- }
- }
-
- return false;
-}
-
-function cbi_t_update() {
- var hl_tabs = [ ];
- var updated = false;
-
- for (var sid in cbi_t)
- for (var tid in cbi_t[sid]) {
- var t = cbi_t[sid][tid].tab;
- var c = cbi_t[sid][tid].container;
-
- if (!c.firstElementChild) {
- t.style.display = 'none';
- }
- else if (t.style.display == 'none') {
- t.style.display = '';
- t.classList.add('cbi-tab-highlighted');
- hl_tabs.push(t);
- }
-
- cbi_tag_last(c);
- updated = true;
- }
-
- if (hl_tabs.length > 0)
- window.setTimeout(function() {
- for (var i = 0; i < hl_tabs.length; i++)
- hl_tabs[i].classList.remove('cbi-tab-highlighted');
- }, 750);
+ tasks.push(Promise.resolve(markup).then(function(markup) {
+ markup.addEventListener('widget-change', cbi_d_update);
+ node.parentNode.replaceChild(markup, node);
+ }));
+ });
- return updated;
+ Promise.all(tasks).then(cbi_d_update);
}
-
function cbi_validate_form(form, errmsg)
{
/* if triggered by a section removal or addition, don't validate */
return true;
}
+function cbi_validate_named_section_add(input)
+{
+ var button = input.parentNode.parentNode.querySelector('.cbi-button-add');
+ button.disabled = input.value === '';
+}
+
function cbi_validate_reset(form)
{
window.setTimeout(
var validatorFn;
try {
- var cbiValidator = new CBIValidator(field, type, optional);
-
- validatorFn = function() {
- return cbiValidator.validate();
- };
+ var cbiValidator = L.validation.create(field, type, optional);
+ validatorFn = cbiValidator.validate.bind(cbiValidator);
}
catch(e) {
validatorFn = null;
field.addEventListener("click", validatorFn);
}
- field.setAttribute("cbi_validate", validatorFn);
- field.setAttribute("cbi_datatype", type);
- field.setAttribute("cbi_optional", (!!optional).toString());
-
validatorFn();
-
- var fcbox = document.getElementById('cbi.combobox.' + field.id);
- if (fcbox)
- cbi_validate_field(fcbox, optional, type);
}
}
var quot_esc = [/"/g, '"', /'/g, '''];
function esc(s, r) {
- if (typeof(s) !== 'string' && !(s instanceof String))
+ var t = typeof(s);
+
+ if (s == null || t === 'object' || t === 'function')
return '';
+ if (t !== 'string')
+ s = String(s);
+
for (var i = 0; i < r.length; i += 2)
s = s.replace(r[i], r[i+1]);
switch(pType) {
case 'b':
- subst = (+param || 0).toString(2);
+ subst = Math.floor(+param || 0).toString(2);
break;
case 'c':
break;
case 'd':
- subst = ~~(+param || 0);
+ subst = Math.floor(+param || 0).toFixed(0);
break;
case 'u':
- subst = ~~Math.abs(+param || 0);
+ var n = +param || 0;
+ subst = Math.floor((n < 0) ? 0x100000000 + n : n).toFixed(0);
break;
case 'f':
break;
case 'o':
- subst = (+param || 0).toString(8);
+ subst = Math.floor(+param || 0).toString(8);
break;
case 's':
break;
case 'x':
- subst = ('' + (+param || 0).toString(16)).toLowerCase();
+ subst = Math.floor(+param || 0).toString(16).toLowerCase();
break;
case 'X':
- subst = ('' + (+param || 0).toString(16)).toUpperCase();
+ subst = Math.floor(+param || 0).toString(16).toUpperCase();
break;
case 'h':
var tm = 0;
var ts = (param || 0);
- if (ts > 60) {
+ if (ts > 59) {
tm = Math.floor(ts / 60);
ts = (ts % 60);
}
- if (tm > 60) {
+ if (tm > 59) {
th = Math.floor(tm / 60);
tm = (tm % 60);
}
- if (th > 24) {
+ if (th > 23) {
td = Math.floor(th / 24);
th = (th % 24);
}
for (i = 0; (i < units.length) && (val > mf); i++)
val /= mf;
- subst = (i ? val.toFixed(pr) : val) + units[i];
+ if (i)
+ subst = val.toFixed(pr) + units[i] + (mf == 1024 ? 'i' : '');
+ else
+ subst = val + ' ';
+
pMinLength = null;
break;
}
};
}
-
-var dummyElem, domParser;
-
-function isElem(e)
-{
- return (typeof(e) === 'object' && e !== null && 'nodeType' in e);
-}
-
-function toElem(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;
-}
-
-function matchesElem(node, selector)
-{
- return ((node.matches && node.matches(selector)) ||
- (node.msMatchesSelector && node.msMatchesSelector(selector)));
-}
-
-function findParent(node, selector)
-{
- if (node.closest)
- return node.closest(selector);
-
- while (node)
- if (matchesElem(node, selector))
- return node;
- else
- node = node.parentNode;
-
- return null;
-}
-
-function E()
-{
- var html = arguments[0],
- attr = (arguments[1] instanceof Object && !Array.isArray(arguments[1])) ? arguments[1] : null,
- data = attr ? arguments[2] : arguments[1],
- elem;
-
- if (isElem(html))
- elem = html;
- else if (html.charCodeAt(0) === 60)
- elem = toElem(html);
- else
- elem = document.createElement(html);
-
- if (!elem)
- return null;
-
- if (attr)
- for (var key in attr)
- if (attr.hasOwnProperty(key) && attr[key] !== null && attr[key] !== undefined)
- switch (typeof(attr[key])) {
- case 'function':
- elem.addEventListener(key, attr[key]);
- break;
-
- case 'object':
- elem.setAttribute(key, JSON.stringify(attr[key]));
- break;
-
- default:
- elem.setAttribute(key, attr[key]);
- }
-
- if (typeof(data) === 'function')
- data = data(elem);
-
- if (isElem(data)) {
- elem.appendChild(data);
- }
- else if (Array.isArray(data)) {
- for (var i = 0; i < data.length; i++)
- if (isElem(data[i]))
- elem.appendChild(data[i]);
- else
- elem.appendChild(document.createTextNode('' + data[i]));
- }
- else if (data !== null && data !== undefined) {
- elem.innerHTML = '' + data;
- }
-
- return elem;
-}
-
-if (typeof(window.CustomEvent) !== 'function') {
- function CustomEvent(event, params) {
- params = params || { bubbles: false, cancelable: false, detail: undefined };
- var evt = document.createEvent('CustomEvent');
- evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
- return evt;
- }
-
- CustomEvent.prototype = window.Event.prototype;
- window.CustomEvent = CustomEvent;
+if (!window.requestAnimationFrame) {
+ window.requestAnimationFrame = function(f) {
+ window.setTimeout(function() {
+ f(new Date().getTime())
+ }, 1000/30);
+ };
}
-CBIDropdown = {
- openDropdown: function(sb) {
- var st = window.getComputedStyle(sb, null),
- ul = sb.querySelector('ul'),
- li = ul.querySelectorAll('li'),
- sel = ul.querySelector('[selected]'),
- rect = sb.getBoundingClientRect(),
- h = sb.clientHeight - parseFloat(st.paddingTop) - parseFloat(st.paddingBottom),
- mh = this.dropdown_items * h,
- eh = Math.min(mh, li.length * h);
-
- document.querySelectorAll('.cbi-dropdown[open]').forEach(function(s) {
- s.dispatchEvent(new CustomEvent('cbi-dropdown-close', {}));
- });
-
- sb.setAttribute('open', '');
-
- if ('ontouchstart' in window) {
- var scroll = document.documentElement.scrollTop,
- vpWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
- vpHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
-
- ul.style.top = h + 'px';
- ul.style.left = -rect.left + 'px';
- ul.style.right = (rect.right - vpWidth) + 'px';
-
- window.scrollTo(0, (scroll + rect.top - vpHeight * 0.6));
- }
- else {
- ul.style.maxHeight = mh + 'px';
- ul.scrollTop = sel ? Math.max(sel.offsetTop - sel.offsetHeight, 0) : 0;
- ul.style.top = ul.style.bottom = '';
- ul.style[((rect.top + rect.height + eh) > window.innerHeight) ? 'bottom' : 'top'] = rect.height + 'px';
- }
-
- ul.querySelectorAll('[selected] input[type="checkbox"]').forEach(function(c) {
- c.checked = true;
- });
-
- ul.classList.add('dropdown');
-
- var pv = ul.cloneNode(true);
- pv.classList.remove('dropdown');
- pv.classList.add('preview');
-
- sb.insertBefore(pv, ul.nextElementSibling);
-
- li.forEach(function(l) {
- l.setAttribute('tabindex', 0);
- });
-
- sb.lastElementChild.setAttribute('tabindex', 0);
-
- this.setFocus(sb, sel || li[0], true);
- },
-
- closeDropdown: function(sb, no_focus) {
- if (!sb.hasAttribute('open'))
- return;
-
- var pv = sb.querySelector('ul.preview'),
- ul = sb.querySelector('ul.dropdown'),
- li = ul.querySelectorAll('li');
-
- li.forEach(function(l) { l.removeAttribute('tabindex'); });
- sb.lastElementChild.removeAttribute('tabindex');
-
- sb.removeChild(pv);
- sb.removeAttribute('open');
- sb.style.width = sb.style.height = '';
-
- ul.classList.remove('dropdown');
-
- if (!no_focus)
- this.setFocus(sb, sb);
-
- this.saveValues(sb, ul);
- },
-
- toggleItem: function(sb, li, force_state) {
- if (li.hasAttribute('unselectable'))
- return;
-
- if (this.multi) {
- var cbox = li.querySelector('input[type="checkbox"]'),
- items = li.parentNode.querySelectorAll('li'),
- label = sb.querySelector('ul.preview'),
- sel = li.parentNode.querySelectorAll('[selected]').length,
- more = sb.querySelector('.more'),
- ndisplay = this.display_items,
- n = 0;
-
- if (li.hasAttribute('selected')) {
- if (force_state !== true) {
- if (sel > 1 || this.optional) {
- li.removeAttribute('selected');
- cbox.checked = cbox.disabled = false;
- sel--;
- }
- else {
- cbox.disabled = true;
- }
- }
- }
- else {
- if (force_state !== false) {
- li.setAttribute('selected', '');
- cbox.checked = true;
- cbox.disabled = false;
- sel++;
- }
- }
-
- while (label.firstElementChild)
- label.removeChild(label.firstElementChild);
-
- for (var i = 0; i < items.length; i++) {
- items[i].removeAttribute('display');
- if (items[i].hasAttribute('selected')) {
- if (ndisplay-- > 0) {
- items[i].setAttribute('display', n++);
- label.appendChild(items[i].cloneNode(true));
- }
- var c = items[i].querySelector('input[type="checkbox"]');
- if (c)
- c.disabled = (sel == 1 && !this.optional);
- }
- }
-
- if (ndisplay < 0)
- sb.setAttribute('more', '');
- else
- sb.removeAttribute('more');
-
- if (ndisplay === this.display_items)
- sb.setAttribute('empty', '');
- else
- sb.removeAttribute('empty');
-
- more.innerHTML = (ndisplay === this.display_items) ? this.placeholder : '···';
- }
- else {
- var sel = li.parentNode.querySelector('[selected]');
- if (sel) {
- sel.removeAttribute('display');
- sel.removeAttribute('selected');
- }
-
- li.setAttribute('display', 0);
- li.setAttribute('selected', '');
-
- this.closeDropdown(sb, true);
- }
-
- this.saveValues(sb, li.parentNode);
- },
-
- transformItem: function(sb, li) {
- var cbox = E('form', {}, E('input', { type: 'checkbox', tabindex: -1, onclick: 'event.preventDefault()' })),
- label = E('label');
-
- while (li.firstChild)
- label.appendChild(li.firstChild);
-
- li.appendChild(cbox);
- li.appendChild(label);
- },
-
- saveValues: function(sb, ul) {
- var sel = ul.querySelectorAll('li[selected]'),
- div = sb.lastElementChild,
- strval = '',
- values = [];
-
- while (div.lastElementChild)
- div.removeChild(div.lastElementChild);
-
- sel.forEach(function (s) {
- if (s.hasAttribute('placeholder'))
- return;
-
- var v = {
- text: s.innerText,
- value: s.hasAttribute('data-value') ? s.getAttribute('data-value') : s.innerText,
- element: s
- };
-
- div.appendChild(E('input', {
- type: 'hidden',
- name: s.hasAttribute('name') ? s.getAttribute('name') : (sb.getAttribute('name') || ''),
- value: v.value
- }));
-
- values.push(v);
-
- strval += strval.length ? ' ' + v.value : v.value;
- });
-
- var detail = {
- instance: this,
- element: sb
- };
-
- if (this.multi)
- detail.values = values;
- else
- detail.value = values.length ? values[0] : null;
-
- sb.value = strval;
-
- sb.dispatchEvent(new CustomEvent('cbi-dropdown-change', {
- bubbles: true,
- detail: detail
- }));
-
- cbi_d_update();
- },
-
- setValues: function(sb, values) {
- var ul = sb.querySelector('ul');
-
- if (this.multi) {
- ul.querySelectorAll('li[data-value]').forEach(function(li) {
- if (values === null || !(li.getAttribute('data-value') in values))
- this.toggleItem(sb, li, false);
- else
- this.toggleItem(sb, li, true);
- });
- }
- else {
- var ph = ul.querySelector('li[placeholder]');
- if (ph)
- this.toggleItem(sb, ph);
-
- ul.querySelectorAll('li[data-value]').forEach(function(li) {
- if (values !== null && (li.getAttribute('data-value') in values))
- this.toggleItem(sb, li);
- });
- }
- },
-
- setFocus: function(sb, elem, scroll) {
- if (sb && sb.hasAttribute && sb.hasAttribute('locked-in'))
- return;
-
- if (sb.target && findParent(sb.target, 'ul.dropdown'))
- return;
-
- document.querySelectorAll('.focus').forEach(function(e) {
- if (!matchesElem(e, 'input')) {
- e.classList.remove('focus');
- e.blur();
- }
- });
-
- if (elem) {
- elem.focus();
- elem.classList.add('focus');
-
- if (scroll)
- elem.parentNode.scrollTop = elem.offsetTop - elem.parentNode.offsetTop;
- }
- },
-
- createItems: function(sb, value) {
- var sbox = this,
- val = (value || '').trim().split(/\s+/),
- ul = sb.querySelector('ul');
-
- if (!sbox.multi)
- val.length = Math.min(val.length, 1);
-
- if (val.length === 1 && val[0].length === 0)
- val.length = 0;
-
- val.forEach(function(item) {
- var new_item = null;
-
- ul.childNodes.forEach(function(li) {
- if (li.getAttribute && li.getAttribute('data-value') === item)
- new_item = li;
- });
-
- if (!new_item) {
- var markup,
- tpl = sb.querySelector(sbox.template);
-
- if (tpl)
- markup = (tpl.textContent || tpl.innerHTML || tpl.firstChild.data).replace(/^<!--|-->$/, '').trim();
- else
- markup = '<li data-value="{{value}}">{{value}}</li>';
-
- new_item = E(markup.replace(/{{value}}/g, item));
-
- if (sbox.multi) {
- sbox.transformItem(sb, new_item);
- }
- else {
- var old = ul.querySelector('li[created]');
- if (old)
- ul.removeChild(old);
-
- new_item.setAttribute('created', '');
- }
-
- new_item = ul.insertBefore(new_item, ul.lastElementChild);
- }
-
- sbox.toggleItem(sb, new_item, true);
- sbox.setFocus(sb, new_item, true);
- });
- },
-
- closeAllDropdowns: function() {
- document.querySelectorAll('.cbi-dropdown[open]').forEach(function(s) {
- s.dispatchEvent(new CustomEvent('cbi-dropdown-close', {}));
- });
- },
-
- handleClick: function(ev) {
- var sb = ev.currentTarget;
-
- if (!sb.hasAttribute('open')) {
- if (!matchesElem(ev.target, 'input'))
- this.openDropdown(sb);
- }
- else {
- var li = findParent(ev.target, 'li');
- if (li && li.parentNode.classList.contains('dropdown'))
- this.toggleItem(sb, li);
- }
-
- ev.preventDefault();
- ev.stopPropagation();
- },
-
- handleKeydown: function(ev) {
- var sb = ev.currentTarget;
-
- if (matchesElem(ev.target, 'input'))
- return;
-
- if (!sb.hasAttribute('open')) {
- switch (ev.keyCode) {
- case 37:
- case 38:
- case 39:
- case 40:
- this.openDropdown(sb);
- ev.preventDefault();
- }
- }
- else {
- var active = findParent(document.activeElement, 'li');
-
- switch (ev.keyCode) {
- case 27:
- this.closeDropdown(sb);
- break;
-
- case 13:
- if (active) {
- if (!active.hasAttribute('selected'))
- this.toggleItem(sb, active);
- this.closeDropdown(sb);
- ev.preventDefault();
- }
- break;
-
- case 32:
- if (active) {
- this.toggleItem(sb, active);
- ev.preventDefault();
- }
- break;
-
- case 38:
- if (active && active.previousElementSibling) {
- this.setFocus(sb, active.previousElementSibling);
- ev.preventDefault();
- }
- break;
-
- case 40:
- if (active && active.nextElementSibling) {
- this.setFocus(sb, active.nextElementSibling);
- ev.preventDefault();
- }
- break;
- }
- }
- },
-
- handleDropdownClose: function(ev) {
- var sb = ev.currentTarget;
-
- this.closeDropdown(sb, true);
- },
-
- handleDropdownSelect: function(ev) {
- var sb = ev.currentTarget,
- li = findParent(ev.target, 'li');
-
- if (!li)
- return;
-
- this.toggleItem(sb, li);
- this.closeDropdown(sb, true);
- },
-
- handleMouseover: function(ev) {
- var sb = ev.currentTarget;
-
- if (!sb.hasAttribute('open'))
- return;
-
- var li = findParent(ev.target, 'li');
-
- if (li && li.parentNode.classList.contains('dropdown'))
- this.setFocus(sb, li);
- },
-
- handleFocus: function(ev) {
- var sb = ev.currentTarget;
-
- document.querySelectorAll('.cbi-dropdown[open]').forEach(function(s) {
- if (s !== sb || sb.hasAttribute('open'))
- s.dispatchEvent(new CustomEvent('cbi-dropdown-close', {}));
- });
- },
-
- handleCanaryFocus: function(ev) {
- this.closeDropdown(ev.currentTarget.parentNode);
- },
-
- handleCreateKeydown: function(ev) {
- var input = ev.currentTarget,
- sb = findParent(input, '.cbi-dropdown');
-
- switch (ev.keyCode) {
- case 13:
- ev.preventDefault();
-
- if (input.classList.contains('cbi-input-invalid'))
- return;
-
- this.createItems(sb, input.value);
- input.value = '';
- input.blur();
- break;
- }
- },
- handleCreateFocus: function(ev) {
- var input = ev.currentTarget,
- cbox = findParent(input, 'li').querySelector('input[type="checkbox"]'),
- sb = findParent(input, '.cbi-dropdown');
-
- if (cbox)
- cbox.checked = true;
-
- sb.setAttribute('locked-in', '');
- },
-
- handleCreateBlur: function(ev) {
- var input = ev.currentTarget,
- cbox = findParent(input, 'li').querySelector('input[type="checkbox"]'),
- sb = findParent(input, '.cbi-dropdown');
-
- if (cbox)
- cbox.checked = false;
-
- sb.removeAttribute('locked-in');
- },
-
- handleCreateClick: function(ev) {
- ev.currentTarget.querySelector(this.create).focus();
- }
-};
+function isElem(e) { return L.dom.elem(e) }
+function toElem(s) { return L.dom.parse(s) }
+function matchesElem(node, selector) { return L.dom.matches(node, selector) }
+function findParent(node, selector) { return L.dom.parent(node, selector) }
+function E() { return L.dom.create.apply(L.dom, arguments) }
function cbi_dropdown_init(sb) {
- if (!(this instanceof cbi_dropdown_init))
- return new cbi_dropdown_init(sb);
-
- this.multi = sb.hasAttribute('multiple');
- this.optional = sb.hasAttribute('optional');
- this.placeholder = sb.getAttribute('placeholder') || '---';
- this.display_items = parseInt(sb.getAttribute('display-items') || 3);
- this.dropdown_items = parseInt(sb.getAttribute('dropdown-items') || 5);
- this.create = sb.getAttribute('item-create') || '.create-item-input';
- this.template = sb.getAttribute('item-template') || 'script[type="item-template"]';
-
- var ul = sb.querySelector('ul'),
- more = sb.appendChild(E('span', { class: 'more', tabindex: -1 }, '···')),
- open = sb.appendChild(E('span', { class: 'open', tabindex: -1 }, '▾')),
- canary = sb.appendChild(E('div')),
- create = sb.querySelector(this.create),
- ndisplay = this.display_items,
- n = 0;
-
- if (this.multi) {
- var items = ul.querySelectorAll('li');
-
- for (var i = 0; i < items.length; i++) {
- this.transformItem(sb, items[i]);
-
- if (items[i].hasAttribute('selected') && ndisplay-- > 0)
- items[i].setAttribute('display', n++);
- }
- }
- else {
- if (this.optional && !ul.querySelector('li[data-value=""]')) {
- var placeholder = E('li', { placeholder: '' }, this.placeholder);
- ul.firstChild ? ul.insertBefore(placeholder, ul.firstChild) : ul.appendChild(placeholder);
- }
-
- var items = ul.querySelectorAll('li'),
- sel = sb.querySelectorAll('[selected]');
-
- sel.forEach(function(s) {
- s.removeAttribute('selected');
- });
-
- var s = sel[0] || items[0];
- if (s) {
- s.setAttribute('selected', '');
- s.setAttribute('display', n++);
- }
-
- ndisplay--;
- }
-
- this.saveValues(sb, ul);
-
- ul.setAttribute('tabindex', -1);
- sb.setAttribute('tabindex', 0);
-
- if (ndisplay < 0)
- sb.setAttribute('more', '')
- else
- sb.removeAttribute('more');
-
- if (ndisplay === this.display_items)
- sb.setAttribute('empty', '')
- else
- sb.removeAttribute('empty');
-
- more.innerHTML = (ndisplay === this.display_items) ? this.placeholder : '···';
-
-
- sb.addEventListener('click', this.handleClick.bind(this));
- sb.addEventListener('keydown', this.handleKeydown.bind(this));
- sb.addEventListener('cbi-dropdown-close', this.handleDropdownClose.bind(this));
- sb.addEventListener('cbi-dropdown-select', this.handleDropdownSelect.bind(this));
-
- if ('ontouchstart' in window) {
- sb.addEventListener('touchstart', function(ev) { ev.stopPropagation(); });
- window.addEventListener('touchstart', this.closeAllDropdowns);
- }
- else {
- sb.addEventListener('mouseover', this.handleMouseover.bind(this));
- sb.addEventListener('focus', this.handleFocus.bind(this));
-
- canary.addEventListener('focus', this.handleCanaryFocus.bind(this));
-
- window.addEventListener('mouseover', this.setFocus);
- window.addEventListener('click', this.closeAllDropdowns);
- }
-
- if (create) {
- create.addEventListener('keydown', this.handleCreateKeydown.bind(this));
- create.addEventListener('focus', this.handleCreateFocus.bind(this));
- create.addEventListener('blur', this.handleCreateBlur.bind(this));
-
- var li = findParent(create, 'li');
+ if (sb && L.dom.findClassInstance(sb) instanceof L.ui.Dropdown)
+ return;
- li.setAttribute('unselectable', '');
- li.addEventListener('click', this.handleCreateClick.bind(this));
- }
+ var dl = new L.ui.Dropdown(sb, null, { name: sb.getAttribute('name') });
+ return dl.bind(sb);
}
-cbi_dropdown_init.prototype = CBIDropdown;
-
function cbi_update_table(table, data, placeholder) {
var target = isElem(table) ? table : document.querySelector(table);
if (!isElem(target))
return;
- target.querySelectorAll('.tr.table-titles, .cbi-section-table-titles').forEach(function(thead) {
- var titles = [];
-
- thead.querySelectorAll('.th').forEach(function(th) {
- titles.push(th);
- });
-
- if (Array.isArray(data)) {
- var n = 0, rows = target.querySelectorAll('.tr');
-
- data.forEach(function(row) {
- var trow = E('div', { 'class': 'tr' });
-
- for (var i = 0; i < titles.length; i++) {
- var text = (titles[i].innerText || '').trim();
- var td = trow.appendChild(E('div', {
- 'class': titles[i].className,
- 'data-title': (text !== '') ? text : null
- }, row[i] || ''));
-
- td.classList.remove('th');
- td.classList.add('td');
- }
-
- trow.classList.add('cbi-rowstyle-%d'.format((n++ % 2) ? 2 : 1));
-
- if (rows[n])
- target.replaceChild(trow, rows[n]);
- else
- target.appendChild(trow);
- });
-
- while (rows[++n])
- target.removeChild(rows[n]);
-
- if (placeholder && target.firstElementChild === target.lastElementChild) {
- var trow = target.appendChild(E('div', { 'class': 'tr placeholder' }));
- var td = trow.appendChild(E('div', { 'class': titles[0].className }, placeholder));
-
- td.classList.remove('th');
- td.classList.add('td');
- }
- }
- else {
- thead.parentNode.style.display = 'none';
-
- thead.parentNode.querySelectorAll('.tr, .cbi-section-table-row').forEach(function(trow) {
- if (trow !== thead) {
- var n = 0;
- trow.querySelectorAll('.th, .td').forEach(function(td) {
- if (n < titles.length) {
- var text = (titles[n++].innerText || '').trim();
- if (text !== '')
- td.setAttribute('data-title', text);
- }
- });
- }
- });
-
- thead.parentNode.style.display = '';
- }
- });
-}
-
-var tooltipDiv = null, tooltipTimeout = null;
-
-function showTooltip(ev) {
- var target = findParent(ev.target, '[data-tooltip]');
-
- if (!target)
- return;
-
- if (tooltipTimeout !== null) {
- window.clearTimeout(tooltipTimeout);
- tooltipTimeout = null;
- }
-
- var rect = target.getBoundingClientRect(),
- x = rect.left + window.pageXOffset,
- y = rect.top + rect.height + window.pageYOffset;
-
- tooltipDiv.className = 'cbi-tooltip';
- tooltipDiv.innerHTML = '▲ ';
- tooltipDiv.firstChild.data += target.getAttribute('data-tooltip');
+ var t = L.dom.findClassInstance(target);
- if (target.hasAttribute('data-tooltip-style'))
- tooltipDiv.classList.add(target.getAttribute('data-tooltip-style'));
-
- if ((y + tooltipDiv.offsetHeight) > (window.innerHeight + window.pageYOffset)) {
- y -= (tooltipDiv.offsetHeight + target.offsetHeight);
- tooltipDiv.firstChild.data = '▼ ' + tooltipDiv.firstChild.data.substr(2);
+ if (!(t instanceof L.ui.Table)) {
+ t = new L.ui.Table(target);
+ L.dom.bindClassInstance(target, t);
}
- tooltipDiv.style.top = y + 'px';
- tooltipDiv.style.left = x + 'px';
- tooltipDiv.style.opacity = 1;
+ t.update(data, placeholder);
}
-function hideTooltip(ev) {
- if (ev.target === tooltipDiv || ev.relatedTarget === tooltipDiv)
- return;
-
- if (tooltipTimeout !== null) {
- window.clearTimeout(tooltipTimeout);
- tooltipTimeout = null;
- }
-
- tooltipDiv.style.opacity = 0;
- tooltipTimeout = window.setTimeout(function() { tooltipDiv.removeAttribute('style'); }, 250);
+function showModal(title, children)
+{
+ return L.showModal(title, children);
}
-document.addEventListener('DOMContentLoaded', function() {
- tooltipDiv = document.body.appendChild(E('div', { 'class': 'cbi-tooltip' }));
+function hideModal()
+{
+ return L.hideModal();
+}
- document.addEventListener('mouseover', showTooltip, true);
- document.addEventListener('mouseout', hideTooltip, true);
- document.addEventListener('focus', showTooltip, true);
- document.addEventListener('blur', hideTooltip, true);
+document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('validation-failure', function(ev) {
if (ev.target === document.activeElement)
- showTooltip(ev);
+ L.showTooltip(ev);
});
document.addEventListener('validation-success', function(ev) {
if (ev.target === document.activeElement)
- hideTooltip(ev);
+ L.hideTooltip(ev);
});
- document.querySelectorAll('.table').forEach(cbi_update_table);
+ L.require('ui').then(function(ui) {
+ document.querySelectorAll('.table').forEach(cbi_update_table);
+ });
});