diff options
Diffstat (limited to 'themes')
9 files changed, 404 insertions, 425 deletions
diff --git a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/footer.htm b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/footer.htm index e0a41e1bca..ec6895f06d 100644 --- a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/footer.htm +++ b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/footer.htm @@ -5,25 +5,12 @@ 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" %> + <footer> <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> </body> </html> diff --git a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm index de1fd73f0e..56a1b230e4 100644 --- a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm +++ b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm @@ -13,123 +13,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="dropdown-menu">') - - for i, r in ipairs(childs) do - local nnode = node.nodes[r] - write('<li><a href="%s">%s</a></li>' %{ - nodeurl(prefix, r, nnode.query), - striptags(translate(nnode.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 - write('<li class="dropdown"><a class="menu" href="#">%s</a>' % striptags(translate(nnode.title))) - render_submenu(category .. "/" .. r, nnode) - write('</li>') - else - write('<li><a href="%s">%s</a></li>' %{ - nodeurl(category, r, nnode.query), - striptags(translate(nnode.title)) - }) - end - end - - write('</ul>') - end - end -%> <!DOCTYPE html> <html lang="<%=luci.i18n.context.lang%>"> @@ -149,6 +36,8 @@ <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> + + <% include("themes/bootstrap/json-menu") %> </head> <body class="lang_<%=luci.i18n.context.lang%> <% if node then %><%= striptags( node.title ) %><%- end %>" data-page="<%= table.concat(disp.context.requestpath, "-") %>"> @@ -156,7 +45,7 @@ <div class="fill"> <div class="container"> <a class="brand" href="#"><%=boardinfo.hostname or "?"%></a> - <% render_topmenu() %> + <ul class="nav" id="topmenu" style="display:none"></ul> <div class="pull-right"> <span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()"> <span class="label success" id="xhr_poll_status_on"><%:Auto Refresh%> <%:on%></span> @@ -185,4 +74,4 @@ </div> </noscript> - <% if category then render_tabmenu(category, cattree) end %> + <div id="tabmenu" style="display:none"></div> diff --git a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/json-menu.htm b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/json-menu.htm new file mode 100644 index 0000000000..b38406f65a --- /dev/null +++ b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/json-menu.htm @@ -0,0 +1,119 @@ +<script type="text/javascript"> + (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_tabmenu(tree, url, level) { + var container = document.querySelector('#tabmenu'), + ul = E('ul', { 'class': 'tabs' }), + children = get_children(tree), + activeNode = null; + + for (var i = 0; i < children.length; i++) { + var isActive = (L.env.dispatchpath[3 + (level || 0)] == 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]; + } + + if (ul.children.length == 0) + return E([]); + + container.appendChild(ul); + container.style.display = ''; + + if (activeNode) + render_tabmenu(activeNode, url + '/' + activeNode.name, (level || 0) + 1); + + return ul; + } + + function render_mainmenu(tree, url, level) { + var ul = level ? E('ul', { 'class': 'dropdown-menu' }) : document.querySelector('#topmenu'), + children = get_children(tree); + + if (children.length == 0 || level > 1) + return E([]); + + for (var i = 0; i < children.length; i++) { + var submenu = render_mainmenu(children[i], url + '/' + children[i].name, (level || 0) + 1), + subclass = (!level && submenu.firstElementChild) ? 'dropdown' : null, + linkclass = (!level && submenu.firstElementChild) ? 'menu' : null, + linkurl = submenu.firstElementChild ? '#' : L.url(url, children[i].name); + + var li = E('li', { 'class': subclass }, [ + E('a', { 'class': linkclass, 'href': linkurl }, [ _(children[i].title) ]), + submenu + ]); + + ul.appendChild(li); + } + + ul.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', { 'class': isActive ? 'active' : null }, [ + E('a', { 'href': L.url(children[i].name) }, [ _(children[i].title) ]), + ' ', + E('span', { 'class': 'divider' }, [ '|' ]) + ])); + + if (isActive) + render_mainmenu(children[i], children[i].name); + } + + if (ul.children.length > 1) + ul.style.display = ''; + } + + 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> 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 755191f335..ae39d00751 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 544866ddee..2f9f096bc1 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 76eeec05eb..5595b14e49 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> diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css index f59958494d..a1b85f658e 100644 --- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css +++ b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css @@ -1016,6 +1016,10 @@ ul.cbi-tabmenu { border-bottom: 1px solid #bbb; } +#tabmenu > ul.cbi-tabmenu { + margin: 0 !important; +} + ul.cbi-tabmenu li { display: inline-flex; margin: 0 5px -1px 0; diff --git a/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm b/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm index fbe030d18c..9754e8b612 100644 --- a/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm +++ b/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm @@ -15,116 +15,9 @@ local loadinfo = sysinfo.load or { 0, 0, 0 } local boardinfo = util.ubus("system", "board") or { } - 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 - http.prepare_content("application/xhtml+xml") - - 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_menu(prefix, node, level) - if not level then - level = 1 - end - - local childs = disp.node_childs(node) - if #childs > 0 then - write('<ul class="mainmenu l%d">' % level) - - local i, v - for i, v in ipairs(childs) do - local nnode = node.nodes[v] - - write('<li class="mainmenu-item-%s %s"><a href="%s">%s</a>' %{ - v, (nnode._menu_selected or (node.leaf and v == leaf)) and 'selected' or '', - nodeurl(prefix, v, nnode.query), - striptags(translate(nnode.title)) - }) - - if level < 2 then - render_menu(prefix .. "/" .. v, nnode, level + 1) - end - - write('</li>') - end - - write('</ul>') - end - 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 - if level == 3 then - write('<div id="tabmenu">') - end - write('<ul class="cbi-tabmenu">') - 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 'cbi-tab' or '', - nodeurl(prefix, v, nnode.query), - striptags(translate(nnode.title)) - }) - end - end - - if level > 2 then - write('</ul>') - if level == 3 then - write('</div>') - end - end - - if selected_node then - render_tabmenu(prefix .. "/" .. selected_name, selected_node, level + 1) - end - end - end -%> <?xml version="1.0" encoding="utf-8"?> @@ -145,45 +38,153 @@ <script type="text/javascript" src="<%=resource%>/cbi.js"></script> <script type="text/javascript" src="<%=resource%>/xhr.js"></script> <script type="text/javascript">//<![CDATA[ - document.addEventListener('DOMContentLoaded', function() { - var event = ('ontouchstart' in window) ? 'touchstart' : 'click'; + (function() { + function get_children(node) { + var children = []; - document.querySelectorAll('ul.mainmenu.l1 > li > a').forEach(function(a) { - a.addEventListener(event, function(ev) { - var a = ev.target, ul1 = a.parentNode.parentNode, ul2 = a.nextElementSibling; + for (var k in node.children) { + if (!node.children.hasOwnProperty(k)) + continue; - document.querySelectorAll('ul.mainmenu.l1 > li.active').forEach(function(li) { - if (li !== a.parentNode) - li.classList.remove('active'); - }); + if (!node.children[k].satisfied) + continue; - if (!ul2) - return; + if (!node.children[k].hasOwnProperty('title')) + continue; - if (ul2.parentNode.offsetLeft + ul2.offsetWidth <= ul1.offsetLeft + ul1.offsetWidth) - ul2.classList.add('align-left'); + children.push(Object.assign(node.children[k], { name: k })); + } - ul1.classList.add('active'); - a.parentNode.classList.add('active'); - a.blur(); + return children.sort(function(a, b) { + return ((a.order || 1000) - (b.order || 1000)); + }); + } + + function handle_mainmenu_expand(ev) { + var a = ev.target, ul1 = a.parentNode.parentNode, ul2 = a.nextElementSibling; - ev.preventDefault(); - ev.stopPropagation(); + document.querySelectorAll('ul.mainmenu.l1 > li.active').forEach(function(li) { + if (li !== a.parentNode) + li.classList.remove('active'); }); - }); - document.addEventListener(event, function(ev) { - var t = ev.target; + if (!ul2) + return; + + if (ul2.parentNode.offsetLeft + ul2.offsetWidth <= ul1.offsetLeft + ul1.offsetWidth) + ul2.classList.add('align-left'); - while (t && t.id != 'mainmenu') - t = t.parentNode; + ul1.classList.add('active'); + a.parentNode.classList.add('active'); + a.blur(); - if (!t) - document.querySelectorAll('ul.mainmenu > li.active').forEach(function(li) { - li.classList.remove('active'); - }); + ev.preventDefault(); + ev.stopPropagation(); + } + + function render_mainmenu(tree, url, level) { + var l = (level || 0) + 1, + ul = E('ul', { 'class': 'mainmenu l%d'.format(l) }), + children = get_children(tree); + + if (children.length == 0 || l > 2) + return E([]); + + for (var i = 0; i < children.length; i++) { + var isActive = (L.env.dispatchpath[l] == children[i].name), + activeClass = 'mainmenu-item-%s%s'.format(children[i].name, isActive ? ' selected' : ''); + + ul.appendChild(E('li', { 'class': activeClass }, [ + E('a', { + 'href': L.url(url, children[i].name), + 'click': (l == 1) ? handle_mainmenu_expand : null, + }, [ _(children[i].title) ]), + render_mainmenu(children[i], url + '/' + children[i].name, l) + ])); + } + + 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': 'cbi-tabmenu' }), + 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 ? ' cbi-tab' : '', + 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> <title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title> </head> @@ -207,24 +208,16 @@ </span> </div> -<% if #categories > 1 then %> - <ul id="modemenu"> - <% for i, r in ipairs(categories) do %> - <li><a<% if request[1] == r then %> class="active"<%end%> href="<%=controller%>/<%=r%>/"><%=striptags(translate(tree.nodes[r].title))%></a></li> - <% end %> - </ul> -<% end %> +<ul id="modemenu" style="display:none"></ul> <div class="clear"></div> </div> <div id="maincontainer"> - <div id="mainmenu"> - <% if category then render_menu(category, cattree) end %> - </div> + <div id="mainmenu" style="display:none"></div> <div id="maincontent"> - <% if category then render_tabmenu(category, cattree) end %> + <div id="tabmenu" style="display:none"></div> <noscript> <div class="alert-message warning"> diff --git a/themes/luci-theme-rosy/Makefile b/themes/luci-theme-rosy/Makefile index def973da74..a6e9f99ca9 100755 --- a/themes/luci-theme-rosy/Makefile +++ b/themes/luci-theme-rosy/Makefile @@ -7,7 +7,7 @@ include $(TOPDIR)/rules.mk LUCI_TITLE:=Rosy Theme -LUCI_DEPENDS:= +LUCI_DEPENDS:=@BROKEN include ../../luci.mk |