libs/cbi: implement tabbing to split large sections and group options in tabs

5 files changed, 59 insertions, 4 deletions

diff --git a/libs/cbi/luasrc/view/cbi/nsection.htm b/libs/cbi/luasrc/view/cbi/nsection.htm
index d766464bd1..d096ac3a05 100644
--- a/libs/cbi/luasrc/view/cbi/nsection.htm
+++ b/libs/cbi/luasrc/view/cbi/nsection.htm
@@ -1,7 +1,7 @@
 <%#
 LuCI - Lua Configuration Interface
 Copyright 2008 Steven Barth <steven@midlink.org>
-Copyright 2008 Jo-Philipp Wich <xm@leipzig.freifunk.net>
+Copyright 2008-2009 Jo-Philipp Wich <xm@subsignal>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -26,6 +26,7 @@ $Id$
 				<input type="submit" name="cbi.rns.<%=self.config%>.<%=section%>" value="<%:cbi_del%>" />
 			</div>
 		<%- end %>
+		<%+cbi/tabmenu%>
 		<div class="cbi-section-node" id="cbi-<%=self.config%>-<%=section%>">
 			<%+cbi/ucisection%>
 		</div>
diff --git a/libs/cbi/luasrc/view/cbi/tabcontainer.htm b/libs/cbi/luasrc/view/cbi/tabcontainer.htm
new file mode 100644
index 0000000000..9b2c7980a8
--- /dev/null
+++ b/libs/cbi/luasrc/view/cbi/tabcontainer.htm
@@ -0,0 +1,21 @@
+<%#
+LuCI - Lua Configuration Interface
+Copyright 2009 Jo-Philipp Wich <xm@subsignal.org>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+	http://www.apache.org/licenses/LICENSE-2.0
+
+$Id$
+
+-%>
+
+<% for tab, data in pairs(self.tabs) do %>
+	<div 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 %>
+		<% self:render_tab(tab, section, scope or {}) %>
+	</div>
+	<script type="text/javascript">cbi_t_add('<%=self.config%>.<%=section%>', '<%=tab%>')</script>
+<% end %>
diff --git a/libs/cbi/luasrc/view/cbi/tabmenu.htm b/libs/cbi/luasrc/view/cbi/tabmenu.htm
new file mode 100644
index 0000000000..e9eb25dbf0
--- /dev/null
+++ b/libs/cbi/luasrc/view/cbi/tabmenu.htm
@@ -0,0 +1,26 @@
+<%#
+LuCI - Lua Configuration Interface
+Copyright 2009 Jo-Philipp Wich <xm@subsignal.org>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+	http://www.apache.org/licenses/LICENSE-2.0
+
+$Id$
+
+-%>
+
+<%- 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" name="tab.<%=self.config%>.<%=section%>" value="<%=tab%>" /><% end %>
+		</li>
+	<% end end -%>
+	</ul>
+<% end -%>
diff --git a/libs/cbi/luasrc/view/cbi/tsection.htm b/libs/cbi/luasrc/view/cbi/tsection.htm
index db723f92aa..7fdd7f4ffb 100644
--- a/libs/cbi/luasrc/view/cbi/tsection.htm
+++ b/libs/cbi/luasrc/view/cbi/tsection.htm
@@ -24,12 +24,15 @@ $Id$
 				<input type="submit" name="cbi.rts.<%=self.config%>.<%=k%>" value="<%:cbi_del%>" />
 			</div>
 		<%- end %>
-		<% section = k; isempty = false %>
+
+		<%- section = k; isempty = false -%>
 
 		<% if not self.anonymous then -%>
-			<h3><%=k:upper()%></h3>
+			<h3><%=section:upper()%></h3>
 		<%- end %>
 
+		<%+cbi/tabmenu%>
+
 		<fieldset class="cbi-section-node" id="cbi-<%=self.config%>-<%=section%>">
 			<%+cbi/ucisection%>
 		</fieldset>
diff --git a/libs/cbi/luasrc/view/cbi/ucisection.htm b/libs/cbi/luasrc/view/cbi/ucisection.htm
index 241681f265..a8b313d366 100644
--- a/libs/cbi/luasrc/view/cbi/ucisection.htm
+++ b/libs/cbi/luasrc/view/cbi/ucisection.htm
@@ -23,7 +23,11 @@ $Id$
 	end
 %>
 
-<% self:render_children(section, scope or {}) %>
+<% if self.tabs then %>
+	<%+cbi/tabcontainer%>
+<% else %>
+	<% self:render_children(section, scope or {}) %>
+<% end %>
 
 <% if self.error and self.error[section] then -%>
 	<div class="cbi-section-error">