luci-base: cbi.js: untangle dropdown and dynlists from dependency update

In order to prepare the move of the dynlist and dropdown widgets into
the LuCI ui class, remove the direct calls to cbi_d_update() and replace
them with custom events instead.

Extend cbi_init() to handle these custom events and to invoke
cbi_d_update() when receiving them.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

1 files changed, 27 insertions, 9 deletions

diff --git a/modules/luci-base/htdocs/luci-static/resources/cbi.js b/modules/luci-base/htdocs/luci-static/resources/cbi.js
index 67ddc6af36..94686e13d2 100644
--- a/modules/luci-base/htdocs/luci-static/resources/cbi.js
+++ b/modules/luci-base/htdocs/luci-static/resources/cbi.js
@@ -799,6 +799,7 @@ function cbi_init() {
 		}
 
 		cbi_dynlist_init(node, choices[2], choices[3], options);
+		node.addEventListener('cbi-dynlist-change', cbi_d_update);
 	}
 
 	nodes = document.querySelectorAll('[data-type]');
@@ -808,7 +809,11 @@ function cbi_init() {
 		                   node.getAttribute('data-type'));
 	}
 
-	document.querySelectorAll('.cbi-dropdown').forEach(cbi_dropdown_init);
+	document.querySelectorAll('.cbi-dropdown').forEach(function(node) {
+		cbi_dropdown_init(node);
+		node.addEventListener('cbi-dropdown-change', cbi_d_update);
+	});
+
 	document.querySelectorAll('[data-browser]').forEach(cbi_browser_init);
 
 	document.querySelectorAll('.cbi-tooltip:not(:empty)').forEach(function(s) {
@@ -915,22 +920,37 @@ CBIDynamicList = {
 				exists = !!item.parentNode.insertBefore(new_item, item);
 		});
 
-		cbi_d_update();
+		dl.dispatchEvent(new CustomEvent('cbi-dynlist-change', {
+			bubbles: true,
+			detail: {
+				instance: this,
+				element: dl,
+				value: value,
+				add: true
+			}
+		}));
 	},
 
 	removeItem: function(dl, item) {
+		var value = item.querySelector('input[type="hidden"]').value;
 		var sb = dl.querySelector('.cbi-dropdown');
-		if (sb) {
-			var value = item.querySelector('input[type="hidden"]').value;
-
+		if (sb)
 			sb.querySelectorAll('ul > li').forEach(function(li) {
 				if (li.getAttribute('data-value') === value)
 					li.removeAttribute('unselectable');
 			});
-		}
 
 		item.parentNode.removeChild(item);
-		cbi_d_update();
+
+		dl.dispatchEvent(new CustomEvent('cbi-dynlist-change', {
+			bubbles: true,
+			detail: {
+				instance: this,
+				element: dl,
+				value: value,
+				remove: true
+			}
+		}));
 	},
 
 	handleClick: function(ev) {
@@ -1671,8 +1691,6 @@ CBIDropdown = {
 			bubbles: true,
 			detail: detail
 		}));
-
-		cbi_d_update();
 	},
 
 	setValues: function(sb, values) {