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>

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 d65a16167..31997a1c0 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 63abc5773..14232e3d9 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 38c435d6a..7fcb83578 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 06c1414bf..000000000
--- 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 1a13df0c0..547a79332 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>