luci-base: ui.js: various tweaks

 - 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>

diff --git a/modules/luci-base/htdocs/luci-static/resources/ui.js b/modules/luci-base/htdocs/luci-static/resources/ui.js
index 44585736013caf167dcc8bcbbdaf45b33aac42bf..b78a109bf93a43a0647f63d19facafde16b00f83 100644 (file)
--- a/modules/luci-base/htdocs/luci-static/resources/ui.js
+++ b/modules/luci-base/htdocs/luci-static/resources/ui.js
@@ -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;