From 7c0ea176236eb4232303fbc60aabb2e0448a169f Mon Sep 17 00:00:00 2001 From: Jo-Philipp Wich Date: Sun, 16 Aug 2009 03:29:46 +0000 Subject: [PATCH] libs/cbi: implement tabbing to split large sections and group options in tabs --- libs/cbi/htdocs/luci-static/resources/cbi.js | 32 ++++++++++++++++- libs/cbi/luasrc/cbi.lua | 38 ++++++++++++++++++++ libs/cbi/luasrc/view/cbi/nsection.htm | 3 +- libs/cbi/luasrc/view/cbi/tabcontainer.htm | 21 +++++++++++ libs/cbi/luasrc/view/cbi/tabmenu.htm | 26 ++++++++++++++ libs/cbi/luasrc/view/cbi/tsection.htm | 7 ++-- libs/cbi/luasrc/view/cbi/ucisection.htm | 6 +++- 7 files changed, 128 insertions(+), 5 deletions(-) create mode 100644 libs/cbi/luasrc/view/cbi/tabcontainer.htm create mode 100644 libs/cbi/luasrc/view/cbi/tabmenu.htm diff --git a/libs/cbi/htdocs/luci-static/resources/cbi.js b/libs/cbi/htdocs/luci-static/resources/cbi.js index 77c59e511..24f929c9b 100644 --- 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 - Copyright 2008 Jo-Philipp Wich + Copyright 2008-2009 Jo-Philipp Wich 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 044993a6a..33b0c7cb4 100644 --- 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 d766464bd..d096ac3a0 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 -Copyright 2008 Jo-Philipp Wich +Copyright 2008-2009 Jo-Philipp Wich 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$ <%- end %> + <%+cbi/tabmenu%>
<%+cbi/ucisection%>
diff --git a/libs/cbi/luasrc/view/cbi/tabcontainer.htm b/libs/cbi/luasrc/view/cbi/tabcontainer.htm new file mode 100644 index 000000000..9b2c7980a --- /dev/null +++ b/libs/cbi/luasrc/view/cbi/tabcontainer.htm @@ -0,0 +1,21 @@ +<%# +LuCI - Lua Configuration Interface +Copyright 2009 Jo-Philipp Wich + +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 %> +
style="display:none"<% end %>> + <% if data.description then %>
<%=data.description%>
<% end %> + <% self:render_tab(tab, section, scope or {}) %> +
+ +<% end %> diff --git a/libs/cbi/luasrc/view/cbi/tabmenu.htm b/libs/cbi/luasrc/view/cbi/tabmenu.htm new file mode 100644 index 000000000..e9eb25dbf --- /dev/null +++ b/libs/cbi/luasrc/view/cbi/tabmenu.htm @@ -0,0 +1,26 @@ +<%# +LuCI - Lua Configuration Interface +Copyright 2009 Jo-Philipp Wich + +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 %> +
    + <%- 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 %> +
  • + <%=self.tabs[tab].title%> + <% if tab == self.selected_tab then %><% end %> +
    • + <% end end -%> +
+<% end -%> diff --git a/libs/cbi/luasrc/view/cbi/tsection.htm b/libs/cbi/luasrc/view/cbi/tsection.htm index db723f92a..7fdd7f4ff 100644 --- a/libs/cbi/luasrc/view/cbi/tsection.htm +++ b/libs/cbi/luasrc/view/cbi/tsection.htm @@ -24,12 +24,15 @@ $Id$ <%- end %> - <% section = k; isempty = false %> + + <%- section = k; isempty = false -%> <% if not self.anonymous then -%> -

<%=k:upper()%>

+

<%=section:upper()%>

<%- end %> + <%+cbi/tabmenu%> +
<%+cbi/ucisection%>
diff --git a/libs/cbi/luasrc/view/cbi/ucisection.htm b/libs/cbi/luasrc/view/cbi/ucisection.htm index 241681f26..a8b313d36 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 -%>
-- 2.25.1