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