summaryrefslogtreecommitdiffhomepage
path: root/modules/luci-base/luasrc/view
diff options
context:
space:
mode:
authorJo-Philipp Wich <jo@mein.io>2018-12-05 08:48:35 +0100
committerJo-Philipp Wich <jo@mein.io>2018-12-10 13:41:34 +0100
commit76e9c0305ed65480e0d1e3e86d831ac24de98bcd (patch)
treeb5059bb0b138d4acd48f54814205f43ea888d878 /modules/luci-base/luasrc/view
parent747e10bae6e9ec45e7d10f962c8c25ae804e97e7 (diff)
luci-base: rework ui tabbing code
- Instantiate tab menus on the client side - Simplify server side markup generation - Show error indicators in cbi tabs Signed-off-by: Jo-Philipp Wich <jo@mein.io>
Diffstat (limited to 'modules/luci-base/luasrc/view')
-rw-r--r--modules/luci-base/luasrc/view/cbi/map.htm34
-rw-r--r--modules/luci-base/luasrc/view/cbi/nsection.htm1
-rw-r--r--modules/luci-base/luasrc/view/cbi/tabcontainer.htm15
-rw-r--r--modules/luci-base/luasrc/view/cbi/tabmenu.htm12
-rw-r--r--modules/luci-base/luasrc/view/cbi/tsection.htm2
5 files changed, 28 insertions, 36 deletions
diff --git a/modules/luci-base/luasrc/view/cbi/map.htm b/modules/luci-base/luasrc/view/cbi/map.htm
index d65a161673..31997a1c00 100644
--- a/modules/luci-base/luasrc/view/cbi/map.htm
+++ b/modules/luci-base/luasrc/view/cbi/map.htm
@@ -3,25 +3,25 @@
<%- end end -%>
<div class="cbi-map" id="cbi-<%=self.config%>">
- <% if self.title and #self.title > 0 then %><h2 name="content"><%=self.title%></h2><% end %>
- <% if self.description and #self.description > 0 then %><div class="cbi-map-descr"><%=self.description%></div><% end %>
+ <% if self.title and #self.title > 0 then %>
+ <h2 name="content"><%=self.title%></h2>
+ <% end %>
+ <% if self.description and #self.description > 0 then %>
+ <div class="cbi-map-descr"><%=self.description%></div>
+ <% end %>
<% if self.tabbed then %>
- <ul class="cbi-tabmenu map">
- <%- self.selected_tab = luci.http.formvalue("tab.m-" .. self.config) %>
- <% for i, section in ipairs(self.children) do %>
- <%- if not self.selected_tab then self.selected_tab = section.sectiontype end %>
- <li id="tab.m-<%=self.config%>.<%=section.section or section.sectiontype%>" class="cbi-tab<%=(section.sectiontype == self.selected_tab) and '' or '-disabled'%>">
- <a onclick="this.blur(); return cbi_t_switch('m-<%=self.config%>', '<%=section.section or section.sectiontype%>')" href="<%=REQUEST_URI%>?tab.m-<%=self.config%>=<%=section.section or section.sectiontype%>"><%=section.title or section.section or section.sectiontype %></a>
- <% if section.sectiontype == self.selected_tab then %><input type="hidden" id="tab.m-<%=self.config%>" name="tab.m-<%=self.config%>" value="<%=section.section or section.sectiontype%>" /><% end %>
- </li>
+ <div>
+ <% for i, section in ipairs(self.children) do
+ tab = section.section or section.sectiontype %>
+ <div class="cbi-tabcontainer"<%=
+ attr("id", "container.m-%s.%s" %{ self.config, tab }) ..
+ attr("data-tab", tab) ..
+ attr("data-tab-title", section.title or tab))
+ %>>
+ <% section:render() %>
+ </div>
<% end %>
- </ul>
- <% for i, section in ipairs(self.children) do %>
- <div class="cbi-tabcontainer" id="container.m-<%=self.config%>.<%=section.section or section.sectiontype%>"<% if section.sectiontype ~= self.selected_tab then %> style="display:none"<% end %>>
- <% section:render() %>
- </div>
- <script type="text/javascript">cbi_t_add('m-<%=self.config%>', '<%=section.section or section.sectiontype%>')</script>
- <% end %>
+ </div>
<% if not self.save then -%>
<div class="cbi-section-error">
diff --git a/modules/luci-base/luasrc/view/cbi/nsection.htm b/modules/luci-base/luasrc/view/cbi/nsection.htm
index 63abc57734..14232e3d94 100644
--- a/modules/luci-base/luasrc/view/cbi/nsection.htm
+++ b/modules/luci-base/luasrc/view/cbi/nsection.htm
@@ -11,7 +11,6 @@
<input type="submit" class="cbi-button" name="cbi.rns.<%=self.config%>.<%=section%>" value="<%:Delete%>" />
</div>
<%- end %>
- <%+cbi/tabmenu%>
<div class="cbi-section-node<% if self.tabs then %> cbi-section-node-tabbed<% end %>" id="cbi-<%=self.config%>-<%=section%>">
<%+cbi/ucisection%>
</div>
diff --git a/modules/luci-base/luasrc/view/cbi/tabcontainer.htm b/modules/luci-base/luasrc/view/cbi/tabcontainer.htm
index 38c435d6a1..7fcb835783 100644
--- a/modules/luci-base/luasrc/view/cbi/tabcontainer.htm
+++ b/modules/luci-base/luasrc/view/cbi/tabcontainer.htm
@@ -1,7 +1,14 @@
-<% for tab, data in pairs(self.tabs) do %>
- <div class="cbi-tabcontainer" id="container.<%=self.config%>.<%=section%>.<%=tab%>"<% if tab ~= self.selected_tab then %> style="display:none"<% end %>>
- <% if data.description then %><div class="cbi-tab-descr"><%=data.description%></div><% end %>
+<% for _, tab in ipairs(self.tab_names) do data = self.tabs[tab] %>
+ <div class="cbi-tabcontainer"<%=
+ attr("id", "container.%s.%s.%s" %{ self.config, section, tab }) ..
+ attr("data-tab", tab) ..
+ attr("data-tab-title", data.title) ..
+ attr("data-tab-active", tostring(tab == self.selected_tab))
+ %>>
+ <% if data.description then %>
+ <div class="cbi-tab-descr"><%=data.description%></div>
+ <% end %>
+
<% self:render_tab(tab, section, scope or {}) %>
</div>
- <script type="text/javascript">cbi_t_add('<%=self.config%>.<%=section%>', '<%=tab%>')</script>
<% end %>
diff --git a/modules/luci-base/luasrc/view/cbi/tabmenu.htm b/modules/luci-base/luasrc/view/cbi/tabmenu.htm
deleted file mode 100644
index 06c1414bf3..0000000000
--- a/modules/luci-base/luasrc/view/cbi/tabmenu.htm
+++ /dev/null
@@ -1,12 +0,0 @@
-<%- if self.tabs then %>
- <ul class="cbi-tabmenu">
- <%- self.selected_tab = luci.http.formvalue("tab." .. self.config .. "." .. section) %>
- <%- for _, tab in ipairs(self.tab_names) do if #self.tabs[tab].childs > 0 then %>
- <%- if not self.selected_tab then self.selected_tab = tab end %>
- <li id="tab.<%=self.config%>.<%=section%>.<%=tab%>" class="cbi-tab<%=(tab == self.selected_tab) and '' or '-disabled'%>">
- <a onclick="this.blur(); return cbi_t_switch('<%=self.config%>.<%=section%>', '<%=tab%>')" href="<%=REQUEST_URI%>?tab.<%=self.config%>.<%=section%>=<%=tab%>"><%=self.tabs[tab].title%></a>
- <% if tab == self.selected_tab then %><input type="hidden" id="tab.<%=self.config%>.<%=section%>" name="tab.<%=self.config%>.<%=section%>" value="<%=tab%>" /><% end %>
- </li>
- <% end end -%>
- </ul>
-<% end -%>
diff --git a/modules/luci-base/luasrc/view/cbi/tsection.htm b/modules/luci-base/luasrc/view/cbi/tsection.htm
index 1a13df0c04..547a793329 100644
--- a/modules/luci-base/luasrc/view/cbi/tsection.htm
+++ b/modules/luci-base/luasrc/view/cbi/tsection.htm
@@ -18,8 +18,6 @@
<h3><%=section:upper()%></h3>
<%- end %>
- <%+cbi/tabmenu%>
-
<div class="cbi-section-node<% if self.tabs then %> cbi-section-node-tabbed<% end %>" id="cbi-<%=self.config%>-<%=section%>">
<%+cbi/ucisection%>
</div>