return (/^-?\d+(?:\.\d+)?$/.test(x) ? +x : NaN);
}
+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.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;
+}
+
var cbi_validators = {
'integer': function()
'ip4addr': function()
{
- if (this.match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})(\/(\S+))?$/))
- {
- return (RegExp.$1 >= 0) && (RegExp.$1 <= 255) &&
- (RegExp.$2 >= 0) && (RegExp.$2 <= 255) &&
- (RegExp.$3 >= 0) && (RegExp.$3 <= 255) &&
- (RegExp.$4 >= 0) && (RegExp.$4 <= 255) &&
- ((RegExp.$6.indexOf('.') < 0)
- ? ((RegExp.$6 >= 0) && (RegExp.$6 <= 32))
- : (cbi_validators.ip4addr.apply(RegExp.$6)))
- ;
- }
-
- return false;
+ var m = this.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})|\/(\d{1,2}))?$/);
+ return !!(m && IPv4(m[1]) && (m[2] ? IPv4(m[2]) : (m[3] ? cbi_validators.ip4prefix.apply(m[3]) : true)));
},
'ip6addr': function()
{
- if( this.match(/^([a-fA-F0-9:.]+)(\/(\d+))?$/) )
- {
- if( !RegExp.$2 || ((RegExp.$3 >= 0) && (RegExp.$3 <= 128)) )
- {
- var addr = RegExp.$1;
+ var m = this.match(/^([0-9a-fA-F:.]+)(?:\/(\d{1,3}))?$/);
+ return !!(m && IPv6(m[1]) && (m[2] ? cbi_validators.ip6prefix.apply(m[2]) : true));
+ },
- if( addr == '::' )
- {
- return true;
- }
+ 'ip4prefix': function()
+ {
+ return !isNaN(this) && this >= 0 && this <= 32;
+ },
- if( addr.indexOf('.') > 0 )
- {
- var off = addr.lastIndexOf(':');
+ 'ip6prefix': function()
+ {
+ return !isNaN(this) && this >= 0 && this <= 128;
+ },
- if( !(off && cbi_validators.ip4addr.apply(addr.substr(off+1))) )
- return false;
+ 'cidr': function()
+ {
+ return cbi_validators.cidr4.apply(this) ||
+ cbi_validators.cidr6.apply(this);
+ },
- addr = addr.substr(0, off) + ':0:0';
- }
+ 'cidr4': function()
+ {
+ var m = this.match(/^(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})\/(\d{1,2})$/);
+ return !!(m && IPv4(m[1]) && cbi_validators.ip4prefix.apply(m[2]));
+ },
- if( addr.indexOf('::') >= 0 )
- {
- var colons = 0;
- var fill = '0';
+ 'cidr6': function()
+ {
+ var m = this.match(/^([0-9a-fA-F:.]+)\/(\d{1,3})$/);
+ return !!(m && IPv6(m[1]) && cbi_validators.ip6prefix.apply(m[2]));
+ },
- for( var i = 1; i < (addr.length-1); i++ )
- if( addr.charAt(i) == ':' )
- colons++;
+ 'ipnet4': function()
+ {
+ var m = this.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 !!(m && IPv4(m[1]) && IPv4(m[2]));
+ },
- if( colons > 7 )
- return false;
+ 'ipnet6': function()
+ {
+ var m = this.match(/^([0-9a-fA-F:.]+)\/([0-9a-fA-F:.]+)$/);
+ return !!(m && IPv6(m[1]) && IPv6(m[2]));
+ },
- for( var i = 0; i < (7 - colons); i++ )
- fill += ':0';
+ 'ip6hostid': function()
+ {
+ if (this == "eui64" || this == "random")
+ return true;
- if (addr.match(/^(.*?)::(.*?)$/))
- addr = (RegExp.$1 ? RegExp.$1 + ':' : '') + fill +
- (RegExp.$2 ? ':' + RegExp.$2 : '');
- }
+ var v6 = IPv6(this);
+ return !(!v6 || v6[0] || v6[1] || v6[2] || v6[3]);
+ },
- return (addr.match(/^(?:[a-fA-F0-9]{1,4}:){7}[a-fA-F0-9]{1,4}$/) != null);
- }
- }
+ 'ipmask': function()
+ {
+ return cbi_validators.ipmask4.apply(this) ||
+ cbi_validators.ipmask6.apply(this);
+ },
- return false;
+ 'ipmask4': function()
+ {
+ return cbi_validators.cidr4.apply(this) ||
+ cbi_validators.ipnet4.apply(this) ||
+ cbi_validators.ip4addr.apply(this);
+ },
+
+ 'ipmask6': function()
+ {
+ return cbi_validators.cidr6.apply(this) ||
+ cbi_validators.ipnet6.apply(this) ||
+ cbi_validators.ip6addr.apply(this);
},
'port': function()
{
return cbi_validators.hostname.apply(this) ||
((ipv4only != 1) && cbi_validators.ipaddr.apply(this)) ||
- ((ipv4only == 1) && cb_validators.ip4addr.apply(this));
+ ((ipv4only == 1) && cbi_validators.ip4addr.apply(this));
},
- 'hostname': function()
+ 'hostname': function(strict)
{
if (this.length <= 253)
- return (this.match(/^[a-zA-Z0-9]+$/) != null ||
+ return (this.match(/^[a-zA-Z0-9_]+$/) != null ||
(this.match(/^[a-zA-Z0-9_][a-zA-Z0-9_\-.]*[a-zA-Z0-9]$/) &&
- this.match(/[^0-9.]/)));
+ this.match(/[^0-9.]/))) &&
+ (!strict || !this.match(/^_/));
return false;
},
}
function cbi_d_checkvalue(target, ref) {
- var t = document.getElementById(target);
- var value;
-
- if (!t) {
- var tl = document.getElementsByName(target);
+ var value = null,
+ query = 'input[id="'+target+'"], input[name="'+target+'"], ' +
+ 'select[id="'+target+'"], select[name="'+target+'"]';
- if( tl.length > 0 && (tl[0].type == 'radio' || tl[0].type == 'checkbox'))
- for( var i = 0; i < tl.length; i++ )
- if( tl[i].checked ) {
- value = tl[i].value;
- break;
- }
-
- value = value ? value : "";
- } else if (!t.value) {
- value = "";
- } else {
- value = t.value;
-
- if (t.type == "checkbox") {
- value = t.checked ? value : "";
- }
- }
+ document.querySelectorAll(query).forEach(function(i) {
+ if (value === null && ((i.type !== 'radio' && i.type !== 'checkbox') || i.checked === true))
+ value = i.value;
+ });
- return (value == ref)
+ return (((value !== null) ? value : "") == ref);
}
function cbi_d_check(deps) {
istat = (istat && cbi_d_checkvalue(j, deps[i][j]))
}
}
- if (istat) {
- return !reverse;
+
+ if (istat ^ reverse) {
+ return true;
}
}
return def;
}
}
- nodes = document.querySelectorAll('[data-type]');
-
- for (var i = 0, node; (node = nodes[i]) !== undefined; i++) {
- cbi_validate_field(node, node.getAttribute('data-optional') === 'true',
- node.getAttribute('data-type'));
- }
-
nodes = document.querySelectorAll('[data-choices]');
for (var i = 0, node; (node = nodes[i]) !== undefined; i++) {
cbi_dynlist_init(node, choices[2], choices[3], options);
}
+ nodes = document.querySelectorAll('[data-type]');
+
+ for (var i = 0, node; (node = nodes[i]) !== undefined; i++) {
+ cbi_validate_field(node, node.getAttribute('data-optional') === 'true',
+ 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');
+ });
+
cbi_d_update();
}
var dt = obj.getAttribute('cbi_datatype');
var op = obj.getAttribute('cbi_optional');
- if (dt)
- cbi_validate_field(sel, op == 'true', dt);
-
if (!values[obj.value]) {
if (obj.value == "") {
var optdef = document.createElement("option");
obj.style.display = "none";
+ if (dt)
+ cbi_validate_field(sel, op == 'true', dt);
+
cbi_bind(sel, "change", function() {
if (sel.selectedIndex == sel.options.length - 1) {
obj.style.display = "inline";
browser.focus();
}
-function cbi_browser_init(id, defpath)
+function cbi_browser_init(id, resource, defpath)
{
function cbi_browser_btnclick(e) {
cbi_filebrowser(id, defpath);
var btn = document.createElement('img');
btn.className = 'cbi-image-button';
- btn.src = cbi_strings.path.resource + '/cbi/folder.gif';
+ btn.src = (resource || cbi_strings.path.resource) + '/cbi/folder.gif';
field.parentNode.insertBefore(btn, field.nextSibling);
cbi_bind(btn, 'click', cbi_browser_btnclick);
parent.appendChild(b);
if (datatype == 'file')
{
- cbi_browser_init(t.id, parent.getAttribute('data-browser-path'));
+ cbi_browser_init(t.id, null, parent.getAttribute('data-browser-path'));
}
parent.appendChild(document.createElement('br'));
function cbi_row_swap(elem, up, store)
{
- var tr = elem.parentNode;
- while (tr && tr.nodeName.toLowerCase() != 'tr')
- tr = tr.parentNode;
+ var tr = findParent(elem.parentNode, '.cbi-section-table-row');
if (!tr)
return false;
- var table = tr.parentNode;
- while (table && table.nodeName.toLowerCase() != 'table')
- table = table.parentNode;
+ tr.classList.remove('flash');
- if (!table)
- return false;
-
- var s = up ? 3 : 2;
- var e = up ? table.rows.length : table.rows.length - 1;
+ if (up) {
+ var prev = tr.previousElementSibling;
- for (var idx = s; idx < e; idx++)
- {
- if (table.rows[idx] == tr)
- {
- if (up)
- tr.parentNode.insertBefore(table.rows[idx], table.rows[idx-1]);
- else
- tr.parentNode.insertBefore(table.rows[idx+1], table.rows[idx]);
+ if (prev && prev.classList.contains('cbi-section-table-row'))
+ tr.parentNode.insertBefore(tr, prev);
+ else
+ return;
+ }
+ else {
+ var next = tr.nextElementSibling ? tr.nextElementSibling.nextElementSibling : null;
- break;
- }
+ if (next && next.classList.contains('cbi-section-table-row'))
+ tr.parentNode.insertBefore(tr, next);
+ else if (!next)
+ tr.parentNode.appendChild(tr);
+ else
+ return;
}
var ids = [ ];
- for (idx = 2; idx < table.rows.length; idx++)
- {
- table.rows[idx].className = table.rows[idx].className.replace(
- /cbi-rowstyle-[12]/, 'cbi-rowstyle-' + (1 + (idx % 2))
- );
- if (table.rows[idx].id && table.rows[idx].id.match(/-([^\-]+)$/) )
- ids.push(RegExp.$1);
+ for (var i = 0, n = 0; i < tr.parentNode.childNodes.length; i++) {
+ var node = tr.parentNode.childNodes[i];
+ if (node.classList && node.classList.contains('cbi-section-table-row')) {
+ node.classList.remove('cbi-rowstyle-1');
+ node.classList.remove('cbi-rowstyle-2');
+ node.classList.add((n++ % 2) ? 'cbi-rowstyle-2' : 'cbi-rowstyle-1');
+
+ if (/-([^\-]+)$/.test(node.id))
+ ids.push(RegExp.$1);
+ }
}
var input = document.getElementById(store);
if (input)
input.value = ids.join(' ');
+ window.scrollTo(0, tr.offsetTop);
+ window.setTimeout(function() { tr.classList.add('flash'); }, 1);
+
return false;
}
}
}
-String.prototype.serialize = function()
-{
- var o = this;
- switch(typeof(o))
- {
- case 'object':
- // null
- if( o == null )
- {
- return 'null';
- }
-
- // array
- else if( o.length )
- {
- var i, s = '';
-
- for( var i = 0; i < o.length; i++ )
- s += (s ? ', ' : '') + String.serialize(o[i]);
-
- return '[ ' + s + ' ]';
- }
-
- // object
- else
- {
- var k, s = '';
-
- for( k in o )
- s += (s ? ', ' : '') + k + ': ' + String.serialize(o[k]);
-
- return '{ ' + s + ' }';
- }
-
- break;
-
- case 'string':
- // complex string
- if( o.match(/[^a-zA-Z0-9_,.: -]/) )
- return 'decodeURIComponent("' + encodeURIComponent(o) + '")';
-
- // simple string
- else
- return '"' + o + '"';
-
- break;
-
- default:
- return o.toString();
- }
-}
-
String.prototype.format = function()
{
if (!RegExp)
subst = esc(param, quot_esc);
break;
- case 'j':
- subst = String.serialize(param);
- break;
-
case 't':
var td = 0;
var th = 0;
return this.replace(/[\s\n]+/g, ' ');
}
-String.serialize = function()
-{
- var a = [ ];
- for (var i = 1; i < arguments.length; i++)
- a.push(arguments[i]);
- return ''.serialize.apply(arguments[0], a);
-}
-
String.format = function()
{
var a = [ ];
a.push(arguments[i]);
return ''.nobr.apply(arguments[0], a);
}
+
+if (window.NodeList && !NodeList.prototype.forEach) {
+ NodeList.prototype.forEach = function (callback, thisArg) {
+ thisArg = thisArg || window;
+ for (var i = 0; i < this.length; i++) {
+ callback.call(thisArg, this[i], i, this);
+ }
+ };
+}
+
+
+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 findParent(node, selector)
+{
+ while (node)
+ if (node.msMatchesSelector && node.msMatchesSelector(selector))
+ return node;
+ else if (node.matches && node.matches(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)
+ 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;
+}
+
+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', {}));
+ });
+
+ ul.style.maxHeight = mh + 'px';
+ sb.setAttribute('open', '');
+
+ ul.scrollTop = sel ? Math.max(sel.offsetTop - sel.offsetHeight, 0) : 0;
+ ul.querySelectorAll('[selected] input[type="checkbox"]').forEach(function(c) {
+ c.checked = true;
+ });
+
+ ul.style.top = ul.style.bottom = '';
+ ul.style[((sb.getBoundingClientRect().top + eh) > window.innerHeight) ? 'bottom' : 'top'] = rect.height + 'px';
+ 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('[selected]'),
+ div = sb.lastElementChild;
+
+ while (div.lastElementChild)
+ div.removeChild(div.lastElementChild);
+
+ sel.forEach(function (s) {
+ div.appendChild(E('input', {
+ type: 'hidden',
+ name: s.hasAttribute('name') ? s.getAttribute('name') : (sb.getAttribute('name') || ''),
+ value: s.hasAttribute('value') ? s.getAttribute('value') : s.innerText
+ }));
+ });
+
+ cbi_d_update();
+ },
+
+ setFocus: function(sb, elem, scroll) {
+ if (sb && sb.hasAttribute && sb.hasAttribute('locked-in'))
+ return;
+
+ document.querySelectorAll('.focus').forEach(function(e) {
+ if (e.nodeName.toLowerCase() !== '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);
+
+ val.forEach(function(item) {
+ var new_item = null;
+
+ ul.childNodes.forEach(function(li) {
+ if (li.getAttribute && li.getAttribute('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 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', {}));
+ });
+ }
+};
+
+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 sbox = this,
+ ul = sb.querySelector('ul'),
+ items = ul.querySelectorAll('li'),
+ 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) {
+ for (var i = 0; i < items.length; i++) {
+ sbox.transformItem(sb, items[i]);
+
+ if (items[i].hasAttribute('selected') && ndisplay-- > 0)
+ items[i].setAttribute('display', n++);
+ }
+ }
+ else {
+ var 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--;
+
+ if (this.optional && !ul.querySelector('li[value=""]')) {
+ var placeholder = E('li', { placeholder: '' }, this.placeholder);
+ ul.firstChild ? ul.insertBefore(placeholder, ul.firstChild) : ul.appendChild(placeholder);
+ }
+ }
+
+ sbox.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', function(ev) {
+ if (!this.hasAttribute('open')) {
+ if (ev.target.nodeName.toLowerCase() !== 'input')
+ sbox.openDropdown(this);
+ }
+ else {
+ var li = findParent(ev.target, 'li');
+ if (li && li.parentNode.classList.contains('dropdown'))
+ sbox.toggleItem(this, li);
+ }
+
+ ev.preventDefault();
+ ev.stopPropagation();
+ });
+
+ sb.addEventListener('keydown', function(ev) {
+ if (ev.target.nodeName.toLowerCase() === 'input')
+ return;
+
+ if (!this.hasAttribute('open')) {
+ switch (ev.keyCode) {
+ case 37:
+ case 38:
+ case 39:
+ case 40:
+ sbox.openDropdown(this);
+ ev.preventDefault();
+ }
+ }
+ else
+ {
+ var active = findParent(document.activeElement, 'li');
+
+ switch (ev.keyCode) {
+ case 27:
+ sbox.closeDropdown(this);
+ break;
+
+ case 13:
+ if (active) {
+ if (!active.hasAttribute('selected'))
+ sbox.toggleItem(this, active);
+ sbox.closeDropdown(this);
+ ev.preventDefault();
+ }
+ break;
+
+ case 32:
+ if (active) {
+ sbox.toggleItem(this, active);
+ ev.preventDefault();
+ }
+ break;
+
+ case 38:
+ if (active && active.previousElementSibling) {
+ sbox.setFocus(this, active.previousElementSibling);
+ ev.preventDefault();
+ }
+ break;
+
+ case 40:
+ if (active && active.nextElementSibling) {
+ sbox.setFocus(this, active.nextElementSibling);
+ ev.preventDefault();
+ }
+ break;
+ }
+ }
+ });
+
+ sb.addEventListener('cbi-dropdown-close', function(ev) {
+ sbox.closeDropdown(this, true);
+ });
+
+ if ('ontouchstart' in window) {
+ sb.addEventListener('touchstart', function(ev) { ev.stopPropagation(); });
+ window.addEventListener('touchstart', sbox.closeAllDropdowns);
+ }
+ else {
+ sb.addEventListener('mouseover', function(ev) {
+ if (!this.hasAttribute('open'))
+ return;
+
+ var li = findParent(ev.target, 'li');
+ if (li) {
+ if (li.parentNode.classList.contains('dropdown'))
+ sbox.setFocus(this, li);
+
+ ev.stopPropagation();
+ }
+ });
+
+ sb.addEventListener('focus', function(ev) {
+ document.querySelectorAll('.cbi-dropdown[open]').forEach(function(s) {
+ if (s !== this || this.hasAttribute('open'))
+ s.dispatchEvent(new CustomEvent('cbi-dropdown-close', {}));
+ });
+ });
+
+ canary.addEventListener('focus', function(ev) {
+ sbox.closeDropdown(this.parentNode);
+ });
+
+ window.addEventListener('mouseover', sbox.setFocus);
+ window.addEventListener('click', sbox.closeAllDropdowns);
+ }
+
+ if (create) {
+ create.addEventListener('keydown', function(ev) {
+ switch (ev.keyCode) {
+ case 13:
+ sbox.createItems(sb, this.value);
+ ev.preventDefault();
+ this.value = '';
+ this.blur();
+ break;
+ }
+ });
+
+ create.addEventListener('focus', function(ev) {
+ var cbox = findParent(this, 'li').querySelector('input[type="checkbox"]');
+ if (cbox) cbox.checked = true;
+ sb.setAttribute('locked-in', '');
+ });
+
+ create.addEventListener('blur', function(ev) {
+ var cbox = findParent(this, 'li').querySelector('input[type="checkbox"]');
+ if (cbox) cbox.checked = false;
+ sb.removeAttribute('locked-in');
+ });
+
+ var li = findParent(create, 'li');
+
+ li.setAttribute('unselectable', '');
+ li.addEventListener('click', function(ev) {
+ this.querySelector(sbox.create).focus();
+ });
+ }
+}
+
+cbi_dropdown_init.prototype = CBIDropdown;
+
+function cbi_update_table(table, data, placeholder) {
+ 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 = '';
+ }
+ });
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+ document.querySelectorAll('.table').forEach(cbi_update_table);
+});
projects / oweals / luci.git / blobdiff