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>

1 files changed, 12 insertions, 7 deletions

diff --git a/modules/luci-base/htdocs/luci-static/resources/ui.js b/modules/luci-base/htdocs/luci-static/resources/ui.js
index 4458573601..b78a109bf9 100644
--- 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;