Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

luci-base: fix cbi dropdown quirks with MS Edge

Browse source 
On MS Edge, the behaviour of "value" attributes on "li" elements is
unreliable, so use the "data-" prefix to circumvent the problem.

Ref: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/19320991/
Fixes: #2224
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
Jo-Philipp Wich 2018-10-17 07:43:54 +02:00
parent 703cd24868
commit 9e6949849d
5 changed files with 18 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
modules/luci-base/htdocs/luci-static/resources/cbi.js
View file

@ -1774,7 +1774,7 @@ CBIDropdown = {
div.appendChild(E('input', {
type: 'hidden',
name: s.hasAttribute('name') ? s.getAttribute('name') : (sb.getAttribute('name') || ''),
value: s.hasAttribute('value') ? s.getAttribute('value') : s.innerText
value: s.hasAttribute('data-value') ? s.getAttribute('data-value') : s.innerText
}));
});
@ -1813,7 +1813,7 @@ CBIDropdown = {
var new_item = null;
ul.childNodes.forEach(function(li) {
if (li.getAttribute && li.getAttribute('value') === item)
if (li.getAttribute && li.getAttribute('data-value') === item)
new_item = li;
});
@ -1824,7 +1824,7 @@ CBIDropdown = {
if (tpl)
markup = (tpl.textContent || tpl.innerHTML || tpl.firstChild.data).replace(/^<!--|-->$/, '').trim();
else
markup = '<li value="{{value}}">{{value}}</li>';
markup = '<li data-value="{{value}}">{{value}}</li>';
new_item = E(markup.replace(/{{value}}/g, item));
@ -1899,7 +1899,7 @@ function cbi_dropdown_init(sb) {
ndisplay--;
if (this.optional && !ul.querySelector('li[value=""]')) {
if (this.optional && !ul.querySelector('li[data-value=""]')) {
var placeholder = E('li', { placeholder: '' }, this.placeholder);
ul.firstChild ? ul.insertBefore(placeholder, ul.firstChild) : ul.appendChild(placeholder);
}

2
modules/luci-base/luasrc/view/cbi/dropdown.htm
View file

@ -30,7 +30,7 @@
<li<%=
attr("data-index", i) ..
attr("data-depends", self:deplist2json(section, self.deplist[i])) ..
attr("value", key) ..
attr("data-value", key) ..
ifattr(selected[key], "selected", "selected")
%>>
<%=pcdata(self.vallist[i])%>

12
modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm
View file

@ -30,7 +30,7 @@
ifattr(self.rmempty or self.optional, "optional", "optional")
%>>
<script type="item-template"><!--
<li value="{{value}}">
<li data-value="{{value}}">
<span class="zonebadge" style="background:repeating-linear-gradient(45deg,rgba(204,204,204,0.5),rgba(204,204,204,0.5) 5px,rgba(255,255,255,0.5) 5px,rgba(255,255,255,0.5) 10px)">
<strong>{{value}}:</strong><em>(<%:create%>)</em>
</span>
@ -38,7 +38,7 @@
--></script>
<ul>
<% if self.allowlocal then %>
<li value=""<%=ifattr(checked[""], "selected", "selected")%>>
<li data-value=""<%=ifattr(checked[""], "selected", "selected")%>>
<span style="background-color:<%=fwm.zone.get_color()%>" class="zonebadge">
<strong><%:Device%></strong>
<% if self.allowany and self.allowlocal then -%>
@ -48,14 +48,14 @@
</span>
</li>
<% elseif self.widget ~= "checkbox" and (self.rmempty or self.optional) then %>
<li value=""<%=ifattr(checked[""], "selected", "selected")%>>
<li data-value=""<%=ifattr(checked[""], "selected", "selected")%>>
<span class="zonebadge">
<em><%:unspecified%></em>
</span>
</li>
<% end %>
<% if self.allowany then %>
<li value="*"<%=ifattr(checked["*"], "selected", "selected")%>>
<li data-value="*"<%=ifattr(checked["*"], "selected", "selected")%>>
<span style="background-color:<%=fwm.zone.get_color()%>" class="zonebadge">
<strong><%:Any zone%></strong>
<% if self.allowany and self.allowlocal then %>(<%:forward%>)<% end %>
@ -67,7 +67,7 @@
if zone:name() ~= self.exclude then
selected = selected or (value == zone:name())
%>
<li<%=attr("value", zone:name()) .. ifattr(checked[zone:name()], "selected", "selected")%>>
<li<%=attr("data-value", zone:name()) .. ifattr(checked[zone:name()], "selected", "selected")%>>
<span style="background-color:<%=zone:get_color()%>" class="zonebadge">
<strong><%=zone:name()%>:</strong>
<%-
@ -94,7 +94,7 @@
<% end end %>
<% if self.widget ~= "checkbox" and not self.nocreate then %>
<li value="-">
<li data-value="-">
<span class="zonebadge">
<em><%:create%>:</em>
<input type="password" style="display:none" />

6
modules/luci-base/luasrc/view/cbi/network_ifacelist.htm
View file

@ -47,7 +47,7 @@
ifattr(self.widget == "checkbox", "optional", "optional")
%>>
<script type="item-template"><!--
<li value="{{value}}">
<li data-value="{{value}}">
<img title="<%:Custom Interface%>: &quot;{{value}}&quot;" src="<%=resource%>/icons/ethernet_disabled.png" />
<span class="hide-open">{{value}}</span>
<span class="hide-close"><%:Custom Interface%>: "{{value}}"</span>
@ -61,7 +61,7 @@
iface:name() ~= self.exclude
then %>
<li<%=
attr("value", iface:name()) ..
attr("data-value", iface:name()) ..
ifattr(checked[iface:name()], "selected", "selected")
%>>
<img<%=attr("title", iface:get_i18n())%> src="<%=resource%>/icons/<%=iface:type()%><%=iface:is_up() and "" or "_disabled"%>.png" />
@ -78,7 +78,7 @@
</li>
<% end end %>
<% if not self.nocreate then %>
<li value="">
<li data-value="">
<img title="<%:Custom Interface%>" src="<%=resource%>/icons/ethernet_disabled.png" />
<span><%:Custom Interface%>:</span>
<input type="password" style="display:none" />

8
modules/luci-base/luasrc/view/cbi/network_netlist.htm
View file

@ -26,7 +26,7 @@
ifattr(self.widget == "checkbox", "optional", "optional")
%>>
<script type="item-template"><!--
<li value="{{value}}">
<li data-value="{{value}}">
<span class="ifacebadge" style="background:repeating-linear-gradient(45deg,rgba(204,204,204,0.5),rgba(204,204,204,0.5) 5px,rgba(255,255,255,0.5) 5px,rgba(255,255,255,0.5) 10px)">
{{value}}: <em>(<%:create%>)</em>
</span>
@ -34,7 +34,7 @@
--></script>
<ul>
<% if self.widget ~= "checkbox" then %>
<li value=""<%= ifattr(not value, "selected", "selected") %>>
<li data-value=""<%= ifattr(not value, "selected", "selected") %>>
<em><%:unspecified%></em>
</li>
<% end %>
@ -44,7 +44,7 @@
(net:name() ~= self.exclude) and
(not self.novirtual or not net:is_virtual())
then %>
<li<%= attr("value", net:name()) .. ifattr(checked[net:name()], "selected", "selected") %>>
<li<%= attr("data-value", net:name()) .. ifattr(checked[net:name()], "selected", "selected") %>>
<span class="ifacebadge"><%=net:name()%>:
<%
local empty = true
@ -63,7 +63,7 @@
<% end end %>
<% if not self.nocreate then %>
<li value="-"<%= ifattr(not value and self.widget ~= "checkbox", "selected", "selected") %>>
<li data-value="-"<%= ifattr(not value and self.widget ~= "checkbox", "selected", "selected") %>>
<em>
<%- if self.widget == "checkbox" then -%>
<%:create:%>