luci-theme-material: render menu on client side
authorJo-Philipp Wich <jo@mein.io>
Sun, 1 Dec 2019 20:13:14 +0000 (21:13 +0100)
committerJo-Philipp Wich <jo@mein.io>
Thu, 7 May 2020 17:40:49 +0000 (19:40 +0200)
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
(cherry picked from commit 92eecedc8a52b0ba814daddb5167449a2ebb7f26)

themes/luci-theme-material/htdocs/luci-static/material/js/script.js
themes/luci-theme-material/luasrc/view/themes/material/footer.htm
themes/luci-theme-material/luasrc/view/themes/material/header.htm

index 755191f3352d8e83674cbe0bbc28c0e421723015..ae39d0075140fdbe2b8d8836d592aa56b2458f6b 100755 (executable)
@@ -18,6 +18,7 @@
  *     Licensed to the public under the Apache License 2.0
  */
 
+document.addEventListener('luci-loaded', function(ev) {
 (function ($) {
        $(".main > .loading").fadeOut();
 
        }
 
 })(jQuery);
+});
index 544866ddee12d0c99543fa61019dc5c29c6b599e..2f9f096bc17fccfe6c657de9ab67c0dc177ab340 100644 (file)
        Licensed to the public under the Apache License 2.0
 -%>
 
-<%
-       local ver = require "luci.version"
-       local disp = require "luci.dispatcher"
-       local request  = disp.context.path
-       local category = request[1]
-       local tree = disp.node()
-       local categories = disp.node_childs(tree)
-%>
+<% local ver = require "luci.version" %>
        </div>
        <footer class="mobile-hide">
        <a href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> / <%= ver.distversion %>
-       <% if #categories > 1 then %>
-               <ul class="breadcrumb pull-right" id="modemenu">
-               <% for i, r in ipairs(categories) do %>
-               <li<% if request[1] == r then %> class="active"<%end%>>
-                       <a href="<%=controller%>/<%=r%>/"><%=striptags(translate(tree.nodes[r].title))%></a>
-                       <span class="divider">|</span>
-               </li>
-               <% end %>
-               </ul>
-       <% end %>
+       <ul class="breadcrumb pull-right" id="modemenu" style="display:none"></ul>
        </footer>
        </div>
 </div>
index e6cec4ad139b29e1c069ae2185f6939e3f6422d7..7e222b57567b228e8a850edf872079984b0e8c98 100644 (file)
 
        local boardinfo = util.ubus("system", "board")
 
-       local request  = disp.context.path
-       local request2 = disp.context.request
-
-       local category = request[1]
-       local cattree  = category and disp.node(category)
-
-       local leaf = request2[#request2]
-
-       local tree = disp.node()
        local node = disp.context.dispatched
 
-       local categories = disp.node_childs(tree)
-
-       local c = tree
-       local i, r
-
-       -- tag all nodes leading to this page
-       for i, r in ipairs(request) do
-               if c.nodes and c.nodes[r] then
-                       c = c.nodes[r]
-                       c._menu_selected = true
-               end
-       end
-
        -- send as HTML5
        http.prepare_content("text/html")
-
-       local function nodeurl(prefix, name, query)
-               local u = url(prefix, name)
-               if query then
-                       u = u .. http.build_querystring(query)
-               end
-               return pcdata(u)
-       end
-
-       local function render_tabmenu(prefix, node, level)
-               if not level then
-                       level = 1
-               end
-
-               local childs = disp.node_childs(node)
-               if #childs > 0 then
-                       if level > 2 then
-                               write('<ul class="tabs">')
-                       end
-
-                       local selected_node
-                       local selected_name
-                       local i, v
-
-                       for i, v in ipairs(childs) do
-                               local nnode = node.nodes[v]
-                               if nnode._menu_selected then
-                                       selected_node = nnode
-                                       selected_name = v
-                               end
-
-                               if level > 2 then
-                                       write('<li class="tabmenu-item-%s %s"><a href="%s">%s</a></li>' %{
-                                               v, (nnode._menu_selected or (node.leaf and v == leaf)) and 'active' or '',
-                                               nodeurl(prefix, v, nnode.query),
-                                               striptags(translate(nnode.title))
-                                       })
-                               end
-                       end
-
-                       if level > 2 then
-                               write('</ul>')
-                       end
-
-                       if selected_node then
-                               render_tabmenu(prefix .. "/" .. selected_name, selected_node, level + 1)
-                       end
-               end
-       end
-
-       local function render_submenu(prefix, node)
-               local childs = disp.node_childs(node)
-               if #childs > 0 then
-                       write('<ul class="slide-menu">')
-
-                       for i, r in ipairs(childs) do
-                               local nnode = node.nodes[r]
-                               local title = striptags(translate(nnode.title))
-
-                               write('<li><a data-title="%s" href="%s">%s</a></li>' %{
-                                       title,
-                                       nodeurl(prefix, r, nnode.query),
-                                       title
-                               })
-                       end
-
-                       write('</ul>')
-               end
-       end
-
-       local function render_topmenu()
-               local childs = disp.node_childs(cattree)
-               if #childs > 0 then
-                       write('<ul class="nav">')
-
-                       for i, r in ipairs(childs) do
-                               local nnode = cattree.nodes[r]
-                               local grandchildren = disp.node_childs(nnode)
-
-                               if #grandchildren > 0 then
-                                       local title = striptags(translate(nnode.title))
-
-                                       write('<li class="slide"><a class="menu" data-title="%s" href="#">%s</a>' %{
-                                               title,
-                                               title
-                                       })
-
-                                       render_submenu(category .. "/" .. r, nnode)
-                                       write('</li>')
-                               else
-                                       local title = striptags(translate(nnode.title))
-
-                                       write('<li><a data-title="%s" href="%s">%s</a></li>' %{
-                                               title,
-                                               nodeurl(category, r, nnode.query),
-                                               title
-                                       })
-                               end
-                       end
-
-                       write('</ul>')
-               end
-       end
 -%>
 <!DOCTYPE html>
 <html lang="<%=luci.i18n.context.lang%>">
        <script src="<%=url('admin/translations', luci.i18n.context.lang)%><%# ?v=PKG_VERSION %>"></script>
        <script src="<%=resource%>/cbi.js"></script>
        <script src="<%=resource%>/xhr.js"></script>
+       <script type="text/javascript">//<![CDATA[
+               (function() {
+                       function get_children(node) {
+                               var children = [];
+
+                               for (var k in node.children) {
+                                       if (!node.children.hasOwnProperty(k))
+                                               continue;
+
+                                       if (!node.children[k].satisfied)
+                                               continue;
+
+                                       if (!node.children[k].hasOwnProperty('title'))
+                                               continue;
+
+                                       children.push(Object.assign(node.children[k], { name: k }));
+                               }
+
+                               return children.sort(function(a, b) {
+                                       return ((a.order || 1000) - (b.order || 1000));
+                               });
+                       }
+
+                       function render_mainmenu(tree, url, level) {
+                               var l = (level || 0) + 1,
+                                   ul = E('ul', { 'class': level ? 'slide-menu' : 'nav' }),
+                                   children = get_children(tree);
+
+                               if (children.length == 0 || l > 2)
+                                       return E([]);
+
+                               for (var i = 0; i < children.length; i++) {
+                                       var submenu = render_mainmenu(children[i], url + '/' + children[i].name, l),
+                                           hasChildren = submenu.children.length;
+
+                                       ul.appendChild(E('li', { 'class': hasChildren ? 'slide' : null }, [
+                                               E('a', {
+                                                       'href': hasChildren ? '#' : L.url(url, children[i].name),
+                                                       'class': hasChildren ? 'menu' : null,
+                                                       'data-title': hasChildren ? null : _(children[i].title),
+                                               }, [ _(children[i].title) ]),
+                                               submenu
+                                       ]));
+                               }
+
+                               if (l == 1) {
+                                       var container = document.querySelector('#mainmenu');
+
+                                       container.appendChild(ul);
+                                       container.style.display = '';
+                               }
+
+                               return ul;
+                       }
+
+                       function render_modemenu(tree) {
+                               var ul = document.querySelector('#modemenu'),
+                                   children = get_children(tree);
+
+                               for (var i = 0; i < children.length; i++) {
+                                       var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0);
+
+                                       ul.appendChild(E('li', {}, [
+                                               E('a', {
+                                                       'href': L.url(children[i].name),
+                                                       'class': isActive ? 'active' : null
+                                               }, [ _(children[i].title) ])
+                                       ]));
+
+                                       if (isActive)
+                                               render_mainmenu(children[i], children[i].name);
+                               }
+
+                               if (ul.children.length > 1)
+                                       ul.style.display = '';
+                       }
+
+                       function render_tabmenu(tree, url, level) {
+                               var container = document.querySelector('#tabmenu'),
+                                   l = (level || 0) + 1,
+                                   ul = E('ul', { 'class': 'tabs' }),
+                                   children = get_children(tree),
+                                   activeNode = null;
+
+                               if (children.length == 0)
+                                       return E([]);
+
+                               for (var i = 0; i < children.length; i++) {
+                                       var isActive = (L.env.dispatchpath[l + 2] == children[i].name),
+                                           activeClass = isActive ? ' active' : '',
+                                           className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass);
+
+                                       ul.appendChild(E('li', { 'class': className }, [
+                                               E('a', { 'href': L.url(url, children[i].name) }, [ _(children[i].title) ] )
+                                       ]));
+
+                                       if (isActive)
+                                               activeNode = children[i];
+                               }
+
+                               container.appendChild(ul);
+                               container.style.display = '';
+
+                               if (activeNode)
+                                       container.appendChild(render_tabmenu(activeNode, url + '/' + activeNode.name, l));
+
+                               return ul;
+                       }
+
+                       document.addEventListener('luci-loaded', function(ev) {
+                               var tree = <%= luci.http.write_json(luci.dispatcher.context.authsession and luci.dispatcher.menu_json() or {}) %>,
+                                   node = tree,
+                                   url = '';
+
+                               render_modemenu(tree);
+
+                               if (L.env.dispatchpath.length >= 3) {
+                                       for (var i = 0; i < 3 && node; i++) {
+                                               node = node.children[L.env.dispatchpath[i]];
+                                               url = url + (url ? '/' : '') + L.env.dispatchpath[i];
+                                       }
+
+                                       if (node)
+                                               render_tabmenu(node, url);
+                               }
+                       });
+               })();
+       //]]></script>
 </head>
 <body class="lang_<%=luci.i18n.context.lang%> <% if node then %><%= striptags( node.title ) %><% end %> <% if luci.dispatcher.context.authsession then %>logged-in<% end %>" data-page="<%= pcdata(table.concat(disp.context.requestpath, "-")) %>">
 <header>
 </header>
 <div class="main">
        <div style="" class="loading"><span><div class="loading-img"></div><%:Collecting data...%></span></div>
-       <div class="main-left">
-               <% render_topmenu() %>
-       </div>
+       <div class="main-left" id="mainmenu" style="display:none"></div>
        <div class="main-right">
                <div class="darkMask"></div>
                <div id="maincontent">
                                        </div>
                                </noscript>
 
-                               <% if category then render_tabmenu(category, cattree) end %>
+                               <div id="tabmenu" style="display:none"></div>