diff options
3 files changed, 134 insertions, 147 deletions
diff --git a/themes/luci-theme-material/htdocs/luci-static/material/js/script.js b/themes/luci-theme-material/htdocs/luci-static/material/js/script.js index 755191f33..ae39d0075 100755 --- a/themes/luci-theme-material/htdocs/luci-static/material/js/script.js +++ b/themes/luci-theme-material/htdocs/luci-static/material/js/script.js @@ -18,6 +18,7 @@ * Licensed to the public under the Apache License 2.0 */ +document.addEventListener('luci-loaded', function(ev) { (function ($) { $(".main > .loading").fadeOut(); @@ -216,3 +217,4 @@ } })(jQuery); +}); diff --git a/themes/luci-theme-material/luasrc/view/themes/material/footer.htm b/themes/luci-theme-material/luasrc/view/themes/material/footer.htm index 544866dde..2f9f096bc 100644 --- a/themes/luci-theme-material/luasrc/view/themes/material/footer.htm +++ b/themes/luci-theme-material/luasrc/view/themes/material/footer.htm @@ -18,27 +18,11 @@ 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> diff --git a/themes/luci-theme-material/luasrc/view/themes/material/header.htm b/themes/luci-theme-material/luasrc/view/themes/material/header.htm index 76eeec05e..5595b14e4 100644 --- a/themes/luci-theme-material/luasrc/view/themes/material/header.htm +++ b/themes/luci-theme-material/luasrc/view/themes/material/header.htm @@ -26,135 +26,10 @@ 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%>"> @@ -180,6 +55,134 @@ <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="<%= table.concat(disp.context.requestpath, "-") %>"> <header> @@ -199,9 +202,7 @@ </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"> @@ -223,4 +224,4 @@ </div> </noscript> - <% if category then render_tabmenu(category, cattree) end %> + <div id="tabmenu" style="display:none"></div> |