luci-base: cbi: refactor event handling js

Signed-off-by: Jo-Philipp Wich <jow@openwrt.org>

modules/luci-base/htdocs/luci-static/resources/cbi.js

@@ -515,6 +515,15 @@ function cbi_init() {
 		}
 	}
 
+	nodes = document.querySelectorAll('[data-change]');
+
+	for (var i = 0, node; (node = nodes[i]) !== undefined; i++) {
+		var events = node.getAttribute('data-change').split(' ');
+		for (var j = 0, event; (event = events[j]) !== undefined; j++) {
+			cbi_bind(node, event, cbi_d_update);
+		}
+	}
+
 	cbi_d_update();
 }
 

modules/luci-base/luasrc/view/cbi/dynlist.htm

@@ -6,7 +6,7 @@
 		local val = vals[i]
 		if (val and #val > 0) or (i == 1) then
 %>
-	<input class="cbi-input-text" value="<%=pcdata(val)%>" onchange="cbi_d_update(this.id)" type="text"<%=
+	<input class="cbi-input-text" value="<%=pcdata(val)%>" data-update="change" type="text"<%=
 		attr("id", cbid .. "." .. i) .. attr("name", cbid) .. ifattr(self.size, "size") ..
 		ifattr(i == 1 and self.placeholder, "placeholder", self.placeholder)
 	%> /><br />

modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm

@@ -27,7 +27,7 @@
 <ul style="margin:0; list-style-type:none; text-align:left">
 	<% if self.allowlocal then %>
 	<li style="padding:0.5em">
-		<input class="cbi-input-radio" onclick="cbi_d_update(this.id)" onchange="cbi_d_update(this.id)"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "_empty") .. attr("name", cbid) .. attr("value", "") .. ifattr(checked[""], "checked", "checked")%> /> &#160;
+		<input class="cbi-input-radio" data-update="click change"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "_empty") .. attr("name", cbid) .. attr("value", "") .. ifattr(checked[""], "checked", "checked")%> /> &#160;
 		<label<%=attr("for", cbid .. "_empty")%> style="background-color:<%=fwm.zone.get_color()%>" class="zonebadge">
 			<strong><%:Device%></strong>
 			<% if self.allowany and self.allowlocal then %>(<%:input%>)<% end %>
@@ -36,7 +36,7 @@
 	<% end %>
 	<% if self.allowany then %>
 	<li style="padding:0.5em">
-		<input class="cbi-input-radio" onclick="cbi_d_update(this.id)" onchange="cbi_d_update(this.id)"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "_any") .. attr("name", cbid) .. attr("value", "*") .. ifattr(checked["*"], "checked", "checked")%> /> &#160;
+		<input class="cbi-input-radio" data-update="click change"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "_any") .. attr("name", cbid) .. attr("value", "*") .. ifattr(checked["*"], "checked", "checked")%> /> &#160;
 		<label<%=attr("for", cbid .. "_any")%> style="background-color:<%=fwm.zone.get_color()%>" class="zonebadge">
 			<strong><%:Any zone%></strong>
 			<% if self.allowany and self.allowlocal then %>(<%:forward%>)<% end %>
@@ -49,7 +49,7 @@
 				selected = selected or (value == zone:name())
  	%>
 	<li style="padding:0.5em">
-		<input class="cbi-input-radio" onclick="cbi_d_update(this.id)" onchange="cbi_d_update(this.id)"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "." .. zone:name()) .. attr("name", cbid) .. attr("value", zone:name()) .. ifattr(checked[zone:name()], "checked", "checked")%> /> &#160;
+		<input class="cbi-input-radio" data-update="click change"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "." .. zone:name()) .. attr("name", cbid) .. attr("value", zone:name()) .. ifattr(checked[zone:name()], "checked", "checked")%> /> &#160;
 		<label<%=attr("for", cbid .. "." .. zone:name())%> style="background-color:<%=zone:get_color()%>" class="zonebadge">
 			<strong><%=zone:name()%>:</strong>
 			<%
@@ -77,7 +77,7 @@
 
 	<% if self.widget ~= "checkbox" and not self.nocreate then %>
 	<li style="padding:0.5em">
-		<input class="cbi-input-radio" onclick="cbi_d_update(this.id)" onchange="cbi_d_update(this.id)" type="radio"<%=attr("id", cbid .. "_new") .. attr("name", cbid) .. attr("value", "-") .. ifattr(not selected, "checked", "checked")%> /> &#160;
+		<input class="cbi-input-radio" data-update="click change" type="radio"<%=attr("id", cbid .. "_new") .. attr("name", cbid) .. attr("value", "-") .. ifattr(not selected, "checked", "checked")%> /> &#160;
 		<div onclick="document.getElementById('<%=cbid%>_new').checked=true" class="zonebadge" style="background-color:<%=fwm.zone.get_color()%>">
 			<em><%:unspecified -or- create:%>&#160;</em>
 			<input type="text"<%=attr("name", cbid .. ".newzone") .. ifattr(not selected, "value", luci.http.formvalue(cbid .. ".newzone") or self.default)%> onfocus="document.getElementById('<%=cbid%>_new').checked=true" />

modules/luci-base/luasrc/view/cbi/fvalue.htm

@@ -2,7 +2,7 @@
 	<input type="hidden" value="1"<%=
 		attr("name", "cbi.cbe." .. self.config .. "." .. section .. "." .. self.option)
 	%> />
-	<input class="cbi-input-checkbox" onclick="cbi_d_update(this.id)" onchange="cbi_d_update(this.id)" type="checkbox"<%=
+	<input class="cbi-input-checkbox" data-update="click change" type="checkbox"<%=
 		attr("id", cbid) .. attr("name", cbid) .. attr("value", self.enabled or 1) ..
 		ifattr((self:cfgvalue(section) or self.default) == self.enabled, "checked", "checked")
 	%> />

modules/luci-base/luasrc/view/cbi/lvalue.htm

@@ -1,6 +1,6 @@
 <%+cbi/valueheader%>
 <% if self.widget == "select" then %>
-	<select class="cbi-input-select" onchange="cbi_d_update(this.id)"<%= attr("id", cbid) .. attr("name", cbid) .. ifattr(self.size, "size") %>>
+	<select class="cbi-input-select" data-update="change"<%= attr("id", cbid) .. attr("name", cbid) .. ifattr(self.size, "size") %>>
 	<% for i, key in pairs(self.keylist) do -%>
 		<option id="cbi-<%=self.config.."-"..section.."-"..self.option.."-"..key%>"<%= attr("value", key) .. ifattr(tostring(self:cfgvalue(section) or self.default) == key, "selected", "selected") .. attr("data-index", i) .. attr("data-depends", self:deplist2json(section, self.deplist[i])) %>><%=striptags(self.vallist[i])%></option>
 	<%- end %>
@@ -10,7 +10,7 @@
 	for i, key in pairs(self.keylist) do
 	c = c + 1
 %>
-	<input class="cbi-input-radio" onclick="cbi_d_update(this.id)" onchange="cbi_d_update(this.id)" type="radio"<%= attr("id", cbid.."-"..key) .. attr("name", cbid) .. attr("value", key) .. ifattr((self:cfgvalue(section) or self.default) == key, "checked", "checked") .. attr("data-index", i) .. attr("data-depends", self:deplist2json(section, self.deplist[i])) %> />
+	<input class="cbi-input-radio" data-update="click change" type="radio"<%= attr("id", cbid.."-"..key) .. attr("name", cbid) .. attr("value", key) .. ifattr((self:cfgvalue(section) or self.default) == key, "checked", "checked") .. attr("data-index", i) .. attr("data-depends", self:deplist2json(section, self.deplist[i])) %> />
 	<label<%= attr("for", cbid.."-"..key) %>><%=self.vallist[i]%></label>
 <% if c == self.size then c = 0 %><% if self.orientation == "horizontal" then %>&#160;<% else %><br /><% end %>
 <% end end %>

modules/luci-base/luasrc/view/cbi/mvalue.htm

@@ -1,7 +1,7 @@
 <% local v = self:valuelist(section) or {} -%>
 <%+cbi/valueheader%>
 <% if self.widget == "select" then %>
-	<select class="cbi-input-select" multiple="multiple" onclick="cbi_d_update(this.id)" onchange="cbi_d_update(this.id)"<%= attr("name", cbid) .. ifattr(self.size, "size") %>>
+	<select class="cbi-input-select" multiple="multiple" data-update="click change"<%= attr("name", cbid) .. ifattr(self.size, "size") %>>
 	<% for i, key in pairs(self.keylist) do -%>
 		<option<%= attr("id", cbid.."-"..key) .. attr("value", key) .. ifattr(luci.util.contains(v, key), "selected", "selected") .. attr("data-index", i) .. attr("data-depends", self:deplist2json(section, self.deplist[i])) %>><%=striptags(self.vallist[i])%></option>
 	<%- end %>
@@ -11,7 +11,7 @@
 	for i, key in pairs(self.keylist) do
 	c = c + 1
 %>
-	<input class="cbi-input-checkbox" type="checkbox" onclick="cbi_d_update(this.id)" onchange="cbi_d_update(this.id)"<%= attr("id", cbid.."-"..key) .. attr("name", cbid) .. attr("value", key) .. ifattr(luci.util.contains(v, key), "checked", "checked") .. attr("data-index", i) .. attr("data-depends", self:deplist2json(section, self.deplist[i])) %> />
+	<input class="cbi-input-checkbox" type="checkbox" data-update="click change"<%= attr("id", cbid.."-"..key) .. attr("name", cbid) .. attr("value", key) .. ifattr(luci.util.contains(v, key), "checked", "checked") .. attr("data-index", i) .. attr("data-depends", self:deplist2json(section, self.deplist[i])) %> />
 	<label<%= attr("for", cbid.."-"..key) %>><%=self.vallist[i]%></label><br />
 <% if c == self.size then c = 0 %><br />
 <% end end %>

modules/luci-base/luasrc/view/cbi/network_ifacelist.htm

@@ -41,7 +41,7 @@
 		    iface:name() ~= self.exclude
 		 then %>
 	<li>
-		<input class="cbi-input-<%=self.widget or "radio"%>" onclick="cbi_d_update(this.id)" onchange="cbi_d_update(this.id)"<%=
+		<input class="cbi-input-<%=self.widget or "radio"%>" data-update="click change"<%=
 			attr("type", self.widget or "radio") ..
 			attr("id", cbid .. "." .. iface:name()) ..
 			attr("name", cbid) .. attr("value", iface:name()) ..
@@ -63,7 +63,7 @@
 	<% end end %>
 	<% if not self.nocreate then %>
 	<li>
-		<input class="cbi-input-<%=self.widget or "radio"%>" onclick="cbi_d_update(this.id)" onchange="cbi_d_update(this.id)"<%=
+		<input class="cbi-input-<%=self.widget or "radio"%>" data-update="click change"<%=
 			attr("type", self.widget or "radio") ..
 			attr("id", cbid .. "_custom") ..
 			attr("name", cbid) ..

modules/luci-base/luasrc/view/cbi/network_netlist.htm

@@ -27,7 +27,7 @@
 		      (not self.novirtual or not net:is_virtual())
 		   then %>
 	<li style="padding:0.25em 0">
-		<input class="cbi-input-<%=self.widget or "radio"%>" onclick="cbi_d_update(this.id)" onchange="cbi_d_update(this.id)"<%=
+		<input class="cbi-input-<%=self.widget or "radio"%>" data-update="click change"<%=
 			attr("type", self.widget or "radio") ..
 			attr("id", cbid .. "." .. net:name()) ..
 			attr("name", cbid) .. attr("value", net:name()) ..
@@ -51,7 +51,7 @@
 
 	<% if not self.nocreate then %>
 	<li style="padding:0.25em 0">
-		<input class="cbi-input-<%=self.widget or "radio"%>" onclick="cbi_d_update(this.id)" onchange="cbi_d_update(this.id)"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "_new") .. attr("name", cbid) .. attr("value", "-") .. ifattr(not value and self.widget ~= "checkbox", "checked", "checked")%> /> &#160;
+		<input class="cbi-input-<%=self.widget or "radio"%>" data-update="click change"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "_new") .. attr("name", cbid) .. attr("value", "-") .. ifattr(not value and self.widget ~= "checkbox", "checked", "checked")%> /> &#160;
 		<div style="padding:0.5em; display:inline">
 			<label<%=attr("for", cbid .. "_new")%>><em>
 				<%- if self.widget == "checkbox" then -%>
@@ -65,7 +65,7 @@
 	</li>
 	<% elseif self.widget ~= "checkbox" and self.unspecified then %>
 	<li style="padding:0.25em 0">
-		<input class="cbi-input-<%=self.widget or "radio"%>" onclick="cbi_d_update(this.id)" onchange="cbi_d_update(this.id)"<%=
+		<input class="cbi-input-<%=self.widget or "radio"%>" data-update="click change"<%=
 			attr("type", self.widget or "radio") ..
 			attr("id", cbid .. "_uns") ..
 			attr("name", cbid) ..

modules/luci-base/luasrc/view/cbi/tvalue.htm

@@ -1,5 +1,5 @@
 <%+cbi/valueheader%>
-	<textarea class="cbi-input-textarea" <% if not self.size then %> style="width: 100%"<% else %> cols="<%=self.size%>"<% end %> onchange="cbi_d_update(this.id)"<%= attr("name", cbid) .. attr("id", cbid) .. ifattr(self.rows, "rows") .. ifattr(self.wrap, "wrap")  .. ifattr(self.readonly, "readonly") %>>
+	<textarea class="cbi-input-textarea" <% if not self.size then %> style="width: 100%"<% else %> cols="<%=self.size%>"<% end %> data-update="change"<%= attr("name", cbid) .. attr("id", cbid) .. ifattr(self.rows, "rows") .. ifattr(self.wrap, "wrap")  .. ifattr(self.readonly, "readonly") %>>
 	<%-=pcdata(self:cfgvalue(section))-%>
 	</textarea>
 <%+cbi/valuefooter%>

modules/luci-base/luasrc/view/cbi/upload.htm

@@ -19,6 +19,6 @@
 	<% if (not s) or (s and not self.unsafeupload) then %>
 		<input class="cbi-input-file" type="file"<%= attr("name", cbid) .. attr("id", cbid) %> />
 	<% end %>
-	<input type="text" class="cbi-input-text" onchange="cbi_d_update(this.id)"<%=
+	<input type="text" class="cbi-input-text" data-update="change"<%=
 		attr("name", cbid .. ".textbox") .. attr("id", cbid .. ".textbox") .. attr("value", luci.cbi.AbstractValue.cfgvalue(self, section) or self.default) .. ifattr(self.size, "size") .. ifattr(self.placeholder, "placeholder") .. ifattr(self.readonly, "readonly") .. ifattr(self.maxlength, "maxlength") %> />
 <%+cbi/valuefooter%>

modules/luci-base/luasrc/view/cbi/value.htm

@@ -1,8 +1,14 @@
 <%+cbi/valueheader%>
-	<input type="<%=self.password and 'password" class="cbi-input-password' or 'text" class="cbi-input-text' %>" onchange="cbi_d_update(this.id)"<%=
+	<input data-update="change"<%=
-		attr("name", cbid) .. attr("id", cbid) .. attr("value", self:cfgvalue(section) or self.default) ..
+		attr("id", cbid) ..
-		ifattr(self.size, "size") .. ifattr(self.placeholder, "placeholder") ..
+		attr("name", cbid) ..
-		ifattr(self.readonly, "readonly") .. ifattr(self.maxlength, "maxlength")
+		attr("type", self.password and "password" or "text") ..
+		attr("class", self.password and "cbi-input-password" or "cbi-input-text") ..
+		attr("value", self:cfgvalue(section) or self.default) ..
+		ifattr(self.size, "size") ..
+		ifattr(self.placeholder, "placeholder") ..
+		ifattr(self.readonly, "readonly") ..
+		ifattr(self.maxlength, "maxlength")
 	%> />
 	<% if self.password then %><img src="<%=resource%>/cbi/reload.gif" style="vertical-align:middle" title="<%:Reveal/hide password%>" onclick="var e = document.getElementById('<%=cbid%>'); e.type = (e.type=='password') ? 'text' : 'password';" /><% end %>
 	<% if #self.keylist > 0 or self.datatype then -%>