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

diff --git a/libs/cbi/htdocs/luci-static/resources/cbi.js b/libs/cbi/htdocs/luci-static/resources/cbi.js
index 77c59e511ee7d26f99474cddcf07f2913ce9b19c..24f929c9bc48ff000f1b4eb2dbac9363439e495a 100644 (file)
--- a/libs/cbi/htdocs/luci-static/resources/cbi.js
+++ b/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
+}

diff --git a/libs/cbi/luasrc/cbi.lua b/libs/cbi/luasrc/cbi.lua
index 044993a6aab2b2c65d796c4ac15e5e95d2994139..33b0c7cb474914c2066d91143d7ff02d5a73e36a 100644 (file)
--- a/libs/cbi/luasrc/cbi.lua
+++ b/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

diff --git a/libs/cbi/luasrc/view/cbi/nsection.htm b/libs/cbi/luasrc/view/cbi/nsection.htm
index d766464bd17d10e67c8312e63de988cf51dd4ef1..d096ac3a050d65cbaf01bc895dfc8010652529a4 100644 (file)
--- 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 (file)
index 0000000..9b2c798
--- /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 (file)
index 0000000..e9eb25d
--- /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 db723f92aad5224eeb028e2d982a04d5860875aa..7fdd7f4ffbf0a3df455c3201d559c2635b2c7154 100644 (file)
--- 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 241681f265ac728eaedf82dc4b181db1ad6866fd..a8b313d366fbf11e53b295500572a1d0b1268366 100644 (file)
--- 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">