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

libs/cbi/htdocs/luci-static/resources/cbi.js

@@ -2,7 +2,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.org>
 
 	Licensed under the Apache License, Version 2.0 (the "License");
 	you may not use this file except in compliance with the License.
@@ -14,6 +14,7 @@
 */
 
 var cbi_d = [];
+var cbi_t = [];
 
 function cbi_d_add(field, dep, next) {
 	var obj = document.getElementById(field);
@@ -219,3 +220,32 @@ function cbi_hijack_forms(layer, win, fail, load) {
 		});
 	}
 }
+
+
+function cbi_t_add(section, tab) {
+	var t = document.getElementById('tab.' + section + '.' + tab);
+	var c = document.getElementById('container.' + section + '.' + tab);
+
+	if( t && c ) {
+		cbi_t[section] = (cbi_t[section] || [ ]);
+		cbi_t[section][tab] = { 'tab': t, 'container': c };
+	}
+}
+
+function cbi_t_switch(section, tab) {
+	if( cbi_t[section] && cbi_t[section][tab] ) {
+		var o = cbi_t[section][tab];
+		for( var tid in cbi_t[section] ) {
+			var o2 = cbi_t[section][tid];
+			if( o.tab.id != o2.tab.id ) {
+				o2.tab.className = o2.tab.className.replace(/(^| )cbi-tab( |$)/, " cbi-tab-disabled ");
+				o2.container.style.display = 'none';
+			}
+			else {
+				o2.tab.className = o2.tab.className.replace(/(^| )cbi-tab-disabled( |$)/, " cbi-tab ");
+				o2.container.style.display = 'block';
+			}
+		}
+	}
+	return false
+}

libs/cbi/luasrc/cbi.lua

@@ -781,6 +781,19 @@ function AbstractSection.__init__(self, map, sectiontype, ...)
 	self.dynamic = false
 end
 
+-- Define a tab for the section
+function AbstractSection.tab(self, tab, title, desc)
+	self.tabs      = self.tabs      or { }
+	self.tab_names = self.tab_names or { }
+
+	self.tab_names[#self.tab_names+1] = tab
+	self.tabs[tab] = {
+		title       = title,
+		description = desc,
+		childs      = { }
+	}
+end
+
 -- Appends a new option
 function AbstractSection.option(self, class, option, ...)
 	-- Autodetect from UVL
@@ -812,6 +825,31 @@ function AbstractSection.option(self, class, option, ...)
 	end
 end
 
+-- Appends a new tabbed option
+function AbstractSection.taboption(self, tab, ...)
+
+	assert(tab and self.tabs and self.tabs[tab],
+		"Cannot assign option to not existing tab %q" % tostring(tab))
+
+	local l = self.tabs[tab].childs
+	local o = AbstractSection.option(self, ...)
+
+	if o then l[#l+1] = o end
+
+	return o
+end
+
+-- Render a single tab
+function AbstractSection.render_tab(self, tab, ...)
+
+	assert(tab and self.tabs and self.tabs[tab],
+		"Cannot render not existing tab %q" % tostring(tab))
+
+	for _, node in ipairs(self.tabs[tab].childs) do
+		node:render(...)
+	end
+end
+
 -- Parse optional options
 function AbstractSection.parse_optionals(self, section)
 	if not self.optional then

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>

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 %>

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 -%>

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>

libs/cbi/luasrc/view/cbi/ucisection.htm

@@ -23,7 +23,11 @@ $Id$
 	end
 %>
 
+<% 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">