Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

luci-base: ui.js: various tweaks

Browse source 
- emit checkbox markup suitable for CSS styling
 - use .btn CSS class where appropriate
 - dispatch events when updating uci change indicator
 - use correct target node when handling events in createHandlerFn()

Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
Jo-Philipp Wich 2020-03-23 21:36:59 +01:00
parent 63d357123f
commit 993b4f7950
1 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
modules/luci-base/htdocs/luci-static/resources/ui.js
View file

@ -218,6 +218,7 @@ var UICheckbox = UIElement.extend({
}, },
render: function() { render: function() {
var id = 'cb%08x'.format(Math.random() * 0xffffffff);
var frameEl = E('div', { var frameEl = E('div', {
'id': this.options.id, 'id': this.options.id,
'class': 'cbi-checkbox' 'class': 'cbi-checkbox'
@ -231,21 +232,23 @@ var UICheckbox = UIElement.extend({
})); }));
frameEl.appendChild(E('input', { frameEl.appendChild(E('input', {
'id': this.options.id ? 'widget.' + this.options.id : null, 'id': id,
'name': this.options.name, 'name': this.options.name,
'type': 'checkbox', 'type': 'checkbox',
'value': this.options.value_enabled, 'value': this.options.value_enabled,
'checked': (this.value == this.options.value_enabled) ? '' : null 'checked': (this.value == this.options.value_enabled) ? '' : null
})); }));
frameEl.appendChild(E('label', { 'for': id }));
return this.bind(frameEl); return this.bind(frameEl);
}, },
bind: function(frameEl) { bind: function(frameEl) {
this.node = frameEl; this.node = frameEl;
this.setUpdateEvents(frameEl.lastElementChild, 'click', 'blur'); this.setUpdateEvents(frameEl.lastElementChild.previousElementSibling, 'click', 'blur');
this.setChangeEvents(frameEl.lastElementChild, 'change'); this.setChangeEvents(frameEl.lastElementChild.previousElementSibling, 'change');
L.dom.bindClassInstance(frameEl, this); L.dom.bindClassInstance(frameEl, this);
@ -253,7 +256,7 @@ var UICheckbox = UIElement.extend({
}, },
isChecked: function() { isChecked: function() {
return this.node.lastElementChild.checked; return this.node.lastElementChild.previousElementSibling.checked;
}, },
getValue: function() { getValue: function() {
@ -263,7 +266,7 @@ var UICheckbox = UIElement.extend({
}, },
setValue: function(value) { setValue: function(value) {
this.node.lastElementChild.checked = (value == this.options.value_enabled); this.node.lastElementChild.previousElementSibling.checked = (value == this.options.value_enabled);
} }
}); });
@ -1342,7 +1345,7 @@ var UIDynamicList = UIElement.extend({
}); });
dl.lastElementChild.appendChild(inputEl); dl.lastElementChild.appendChild(inputEl);
dl.lastElementChild.appendChild(E('div', { 'class': 'cbi-button cbi-button-add' }, '+')); dl.lastElementChild.appendChild(E('div', { 'class': 'btn cbi-button cbi-button-add' }, '+'));
if (this.options.datatype || this.options.validate) if (this.options.datatype || this.options.validate)
L.ui.addValidator(inputEl, this.options.datatype || 'string', L.ui.addValidator(inputEl, this.options.datatype || 'string',
@ -2536,10 +2539,12 @@ return L.Class.extend({
L.dom.content(i, [ _('Unsaved Changes'), ': ', n ]); L.dom.content(i, [ _('Unsaved Changes'), ': ', n ]);
i.classList.add('flash'); i.classList.add('flash');
i.style.display = ''; i.style.display = '';
document.dispatchEvent(new CustomEvent('uci-new-changes'));
} }
else { else {
i.classList.remove('flash'); i.classList.remove('flash');
i.style.display = 'none'; i.style.display = 'none';
document.dispatchEvent(new CustomEvent('uci-clear-changes'));
} }
}, },
@ -2869,7 +2874,7 @@ return L.Class.extend({
var arg_offset = arguments.length - 2; var arg_offset = arguments.length - 2;
return Function.prototype.bind.apply(function() { return Function.prototype.bind.apply(function() {
var t = arguments[arg_offset].target; var t = arguments[arg_offset].currentTarget;
t.classList.add('spinning'); t.classList.add('spinning');
t.disabled = true; t.disabled = true;