luci-base: cbi: refactor event handling js

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

diff --git a/modules/luci-base/htdocs/luci-static/resources/cbi.js b/modules/luci-base/htdocs/luci-static/resources/cbi.js
index 8bf94a6..fcf87ad 100644 (file)
--- a/modules/luci-base/htdocs/luci-static/resources/cbi.js
+++ b/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();
 }
 

diff --git a/modules/luci-base/luasrc/view/cbi/dynlist.htm b/modules/luci-base/luasrc/view/cbi/dynlist.htm
index e936c0c..80cbee8 100644 (file)
--- a/modules/luci-base/luasrc/view/cbi/dynlist.htm
+++ b/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 />

diff --git a/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm b/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm
index 7973437..b3b4540 100644 (file)
--- a/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm
+++ b/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" />

diff --git a/modules/luci-base/luasrc/view/cbi/fvalue.htm b/modules/luci-base/luasrc/view/cbi/fvalue.htm
index a1e0808..5eddcf2 100644 (file)
--- a/modules/luci-base/luasrc/view/cbi/fvalue.htm
+++ b/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")
        %> />

diff --git a/modules/luci-base/luasrc/view/cbi/lvalue.htm b/modules/luci-base/luasrc/view/cbi/lvalue.htm
index 9210ae5..ac63e9e 100644 (file)
--- a/modules/luci-base/luasrc/view/cbi/lvalue.htm
+++ b/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 %>

diff --git a/modules/luci-base/luasrc/view/cbi/mvalue.htm b/modules/luci-base/luasrc/view/cbi/mvalue.htm
index 9118a22..79950ce 100644 (file)
--- a/modules/luci-base/luasrc/view/cbi/mvalue.htm
+++ b/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 %>

diff --git a/modules/luci-base/luasrc/view/cbi/network_ifacelist.htm b/modules/luci-base/luasrc/view/cbi/network_ifacelist.htm
index 643d849..db61129 100644 (file)
--- a/modules/luci-base/luasrc/view/cbi/network_ifacelist.htm
+++ b/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) ..

diff --git a/modules/luci-base/luasrc/view/cbi/network_netlist.htm b/modules/luci-base/luasrc/view/cbi/network_netlist.htm
index 4f186ca..f8a2b72 100644 (file)
--- a/modules/luci-base/luasrc/view/cbi/network_netlist.htm
+++ b/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) ..

diff --git a/modules/luci-base/luasrc/view/cbi/tblsection.htm b/modules/luci-base/luasrc/view/cbi/tblsection.htm
index d928791..fcf2161 100644 (file)
--- a/modules/luci-base/luasrc/view/cbi/tblsection.htm
+++ b/modules/luci-base/luasrc/view/cbi/tblsection.htm
@@ -99,7 +99,7 @@ end
                                                        %> onclick="location.href='<%=self.extedit:format(section)%>'"
                                                        <%- elseif type(self.extedit) == "function" then
                                                        %> onclick="location.href='<%=self:extedit(section)%>'"
-                                                       <%- end 
+                                                       <%- end
                                                        %> alt="<%:Edit%>" title="<%:Edit%>" />
                                                <%- end; if self.addremove then %>
                                                        <input class="cbi-button cbi-button-remove" type="submit" value="<%:Delete%>"  onclick="this.form.cbi_state='del-section'; return true" name="cbi.rts.<%=self.config%>.<%=k%>" alt="<%:Delete%>" title="<%:Delete%>" />

diff --git a/modules/luci-base/luasrc/view/cbi/tvalue.htm b/modules/luci-base/luasrc/view/cbi/tvalue.htm
index 4841c37..d1e9e66 100644 (file)
--- a/modules/luci-base/luasrc/view/cbi/tvalue.htm
+++ b/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%>

diff --git a/modules/luci-base/luasrc/view/cbi/upload.htm b/modules/luci-base/luasrc/view/cbi/upload.htm
index 157f3b3..4fb5201 100644 (file)
--- a/modules/luci-base/luasrc/view/cbi/upload.htm
+++ b/modules/luci-base/luasrc/view/cbi/upload.htm
@@ -15,10 +15,10 @@
         <% if not self.unsafeupload then %>
                <input type="hidden"<%= attr("value", v) .. attr("name", "cbi.rlf." .. section .. "." .. self.option) .. attr("id", "cbi.rlf." .. section .. "." .. self.option) %> />
        <% end %>
-               
+
        <% 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%>

diff --git a/modules/luci-base/luasrc/view/cbi/value.htm b/modules/luci-base/luasrc/view/cbi/value.htm
index c43dab5..9bb4f3b 100644 (file)
--- a/modules/luci-base/luasrc/view/cbi/value.htm
+++ b/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)"<%=
-               attr("name", cbid) .. attr("id", cbid) .. attr("value", self:cfgvalue(section) or self.default) ..
-               ifattr(self.size, "size") .. ifattr(self.placeholder, "placeholder") ..
-               ifattr(self.readonly, "readonly") .. ifattr(self.maxlength, "maxlength")
+       <input data-update="change"<%=
+               attr("id", cbid) ..
+               attr("name", cbid) ..
+               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 -%>