luci-theme-material: standardize menu and drop jquery
- Drop jquery lib - Move to the new menu.js implementation - Rework css to mimic old js transition - Rework footer and header to new implementation Signed-off-by: Ansuel Smith <ansuelsmth@gmail.com>
This commit is contained in:
Ansuel Smith
parent
ff24b78c80
commit
031424c0d3
6 changed files with 226 additions and 401 deletions
|
|
@ -293,11 +293,13 @@ small {
|
|||
position: fixed;
|
||||
z-index: 1000;
|
||||
top: 0;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
background-color: rgb(240, 240, 240);
|
||||
transition: visibility 400ms, opacity 400ms;
|
||||
}
|
||||
|
||||
.main > .loading > span {
|
||||
|
|
@ -347,6 +349,7 @@ small {
|
|||
height: calc(100% - 4rem);
|
||||
background-color: #fff;
|
||||
background-color: var(--menu-bg-color);
|
||||
transition: visibility 400ms, width 400ms;
|
||||
}
|
||||
|
||||
.main-right {
|
||||
|
|
@ -516,6 +519,10 @@ header > .fill > .container > .status > * {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.main > .main-left > .nav > .slide.active > ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.main > .main-left > .nav > .slide > .menu,
|
||||
.main > .main-left > .nav > li > [data-title="Logout"] {
|
||||
font-size: 1.15rem;
|
||||
|
|
@ -572,10 +579,6 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before
|
|||
background: none;
|
||||
}
|
||||
|
||||
.main > .main-left > .nav > .slide > .slide-menu > li {
|
||||
padding: .4rem 2rem;
|
||||
}
|
||||
|
||||
.main > .main-left > .nav > .slide > .slide-menu > .active {
|
||||
background-color: #09c;
|
||||
background-color: var(--submenu-bg-hover-active);
|
||||
|
|
@ -584,6 +587,7 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before
|
|||
.main > .main-left > .nav > .slide > .slide-menu > li > a {
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
padding: .4rem 2rem;
|
||||
}
|
||||
|
||||
.main > .main-left > .nav > .slide > .slide-menu > .active > a {
|
||||
|
|
@ -2136,11 +2140,13 @@ label[data-index][data-depends] {
|
|||
.darkMask {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background-color: rgba(0, 0, 0, .56);
|
||||
transition: opacity 400ms, visibility 400ms;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* diagnostics */
|
||||
|
|
@ -2635,7 +2641,7 @@ input[name="nslookup"] {
|
|||
.main-left {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
width: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.main-right {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,219 +0,0 @@
|
|||
/**
|
||||
* Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
|
||||
*
|
||||
* luci-theme-material
|
||||
* Copyright 2015 Lutty Yang <lutty@wcan.in>
|
||||
*
|
||||
* Have a bug? Please create an issue here on GitHub!
|
||||
* https://github.com/LuttyYang/luci-theme-material/issues
|
||||
*
|
||||
* luci-theme-bootstrap:
|
||||
* Copyright 2008 Steven Barth <steven@midlink.org>
|
||||
* Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
|
||||
* Copyright 2012 David Menting <david@nut-bolt.nl>
|
||||
*
|
||||
* MUI:
|
||||
* https://github.com/muicss/mui
|
||||
*
|
||||
* Licensed to the public under the Apache License 2.0
|
||||
*/
|
||||
|
||||
document.addEventListener('luci-loaded', function(ev) {
|
||||
(function ($) {
|
||||
$(".main > .loading").fadeOut();
|
||||
|
||||
/**
|
||||
* trim text, Remove spaces, wrap
|
||||
* @param text
|
||||
* @returns {string}
|
||||
*/
|
||||
function trimText(text) {
|
||||
return text.replace(/[ \t\n\r]+/g, " ");
|
||||
}
|
||||
|
||||
var lastNode = undefined;
|
||||
var mainNodeName = undefined;
|
||||
|
||||
var nodeUrl = "";
|
||||
(function(node){
|
||||
var luciLocation;
|
||||
if (node[0] == "admin"){
|
||||
luciLocation = [node[1], node[2]];
|
||||
}else{
|
||||
luciLocation = node;
|
||||
}
|
||||
|
||||
for(var i in luciLocation){
|
||||
nodeUrl += luciLocation[i];
|
||||
if (i != luciLocation.length - 1){
|
||||
nodeUrl += "/";
|
||||
}
|
||||
}
|
||||
})(luciLocation);
|
||||
|
||||
/**
|
||||
* get the current node by Burl (primary)
|
||||
* @returns {boolean} success?
|
||||
*/
|
||||
function getCurrentNodeByUrl() {
|
||||
var ret = false;
|
||||
if (!$('body').hasClass('logged-in')) {
|
||||
luciLocation = ["Main", "Login"];
|
||||
return true;
|
||||
}
|
||||
|
||||
$(".main > .main-left > .nav > .slide > .menu").each(function () {
|
||||
var ulNode = $(this);
|
||||
ulNode.next().find("a").each(function () {
|
||||
var that = $(this);
|
||||
var href = that.attr("href");
|
||||
|
||||
if (href.endsWith(nodeUrl) || href.indexOf('/' + nodeUrl + '/') != -1) {
|
||||
ulNode.click();
|
||||
ulNode.next(".slide-menu").stop(true, true);
|
||||
lastNode = that.parent();
|
||||
lastNode.addClass("active");
|
||||
ret = true;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
});
|
||||
return ret;
|
||||
}
|
||||
|
||||
/**
|
||||
* menu click
|
||||
*/
|
||||
$(".main > .main-left > .nav > .slide > .menu").click(function () {
|
||||
var ul = $(this).next(".slide-menu");
|
||||
var menu = $(this);
|
||||
if (!ul.is(":visible")) {
|
||||
menu.addClass("active");
|
||||
ul.addClass("active");
|
||||
ul.stop(true).slideDown("fast");
|
||||
} else {
|
||||
ul.stop(true).slideUp("fast", function () {
|
||||
menu.removeClass("active");
|
||||
ul.removeClass("active");
|
||||
});
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
/**
|
||||
* hook menu click and add the hash
|
||||
*/
|
||||
$(".main > .main-left > .nav > .slide > .slide-menu > li > a").click(function () {
|
||||
if (lastNode != undefined) lastNode.removeClass("active");
|
||||
$(this).parent().addClass("active");
|
||||
$(".main > .loading").fadeIn("fast");
|
||||
return true;
|
||||
});
|
||||
|
||||
/**
|
||||
* fix menu click
|
||||
*/
|
||||
$(".main > .main-left > .nav > .slide > .slide-menu > li").click(function () {
|
||||
if (lastNode != undefined) lastNode.removeClass("active");
|
||||
$(this).addClass("active");
|
||||
$(".main > .loading").fadeIn("fast");
|
||||
window.location = $($(this).find("a")[0]).attr("href");
|
||||
return false;
|
||||
});
|
||||
|
||||
/**
|
||||
* get current node and open it
|
||||
*/
|
||||
if (getCurrentNodeByUrl()) {
|
||||
mainNodeName = "node-" + luciLocation[0] + "-" + luciLocation[1];
|
||||
mainNodeName = mainNodeName.replace(/[ \t\n\r\/]+/g, "_").toLowerCase();
|
||||
$("body").addClass(mainNodeName);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sidebar expand
|
||||
*/
|
||||
var showSide = false;
|
||||
$(".showSide").click(function () {
|
||||
if (showSide) {
|
||||
$(".darkMask").stop(true).fadeOut("fast");
|
||||
$(".main-left").stop(true).animate({
|
||||
width: "0"
|
||||
}, "fast");
|
||||
$(".main-right").css("overflow-y", "visible");
|
||||
showSide = false;
|
||||
} else {
|
||||
$(".darkMask").stop(true).fadeIn("fast");
|
||||
$(".main-left").stop(true).animate({
|
||||
width: "15rem"
|
||||
}, "fast");
|
||||
$(".main-right").css("overflow-y", "hidden");
|
||||
showSide = true;
|
||||
}
|
||||
});
|
||||
|
||||
$(".darkMask").click(function () {
|
||||
if (showSide) {
|
||||
showSide = false;
|
||||
$(".darkMask").stop(true).fadeOut("fast");
|
||||
$(".main-left").stop(true).animate({
|
||||
width: "0"
|
||||
}, "fast");
|
||||
$(".main-right").css("overflow-y", "visible");
|
||||
}
|
||||
});
|
||||
|
||||
$(window).resize(function () {
|
||||
if ($(window).width() > 921) {
|
||||
$(".main-left").css("width", "");
|
||||
$(".darkMask").stop(true);
|
||||
$(".darkMask").css("display", "none");
|
||||
showSide = false;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* fix legend position
|
||||
*/
|
||||
$("legend").each(function () {
|
||||
var that = $(this);
|
||||
that.after("<span class='panel-title'>" + that.text() + "</span>");
|
||||
});
|
||||
|
||||
$(".cbi-section-table-titles, .cbi-section-table-descr, .cbi-section-descr").each(function () {
|
||||
var that = $(this);
|
||||
if (that.text().trim() == ""){
|
||||
that.css("display", "none");
|
||||
}
|
||||
});
|
||||
|
||||
$(".main-right").focus();
|
||||
$(".main-right").blur();
|
||||
$("input").attr("size", "0");
|
||||
$(".cbi-button-up").val("__");
|
||||
$(".cbi-button-down").val("__");
|
||||
$(".slide > a").removeAttr("href");
|
||||
|
||||
if (mainNodeName != undefined) {
|
||||
switch (mainNodeName) {
|
||||
case "node-status-system_log":
|
||||
case "node-status-kernel_log":
|
||||
$("#syslog").focus(function () {
|
||||
$("#syslog").blur();
|
||||
$(".main-right").focus();
|
||||
$(".main-right").blur();
|
||||
});
|
||||
break;
|
||||
case "node-status-firewall":
|
||||
var button = $(".node-status-firewall > .main fieldset li > a");
|
||||
button.addClass("cbi-button cbi-button-reset a-to-btn");
|
||||
break;
|
||||
case "node-system-reboot":
|
||||
var button = $(".node-system-reboot > .main > .main-right p > a");
|
||||
button.addClass("cbi-button cbi-input-reset a-to-btn");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
});
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
'use strict';
|
||||
'require baseclass';
|
||||
'require ui';
|
||||
|
||||
return baseclass.extend({
|
||||
__init__: function() {
|
||||
ui.menu.load().then(L.bind(this.render, this));
|
||||
},
|
||||
|
||||
render: function(tree) {
|
||||
var node = tree,
|
||||
url = '';
|
||||
|
||||
this.renderModeMenu(node);
|
||||
|
||||
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)
|
||||
this.renderTabMenu(node, url);
|
||||
}
|
||||
|
||||
document.querySelector('.showSide')
|
||||
.addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle'));
|
||||
|
||||
document.querySelector('.darkMask')
|
||||
.addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle'));
|
||||
|
||||
document.querySelector(".main > .loading").style.opacity = '0';
|
||||
document.querySelector(".main > .loading").style.visibility = 'hidden';
|
||||
|
||||
if (window.innerWidth <= 1152)
|
||||
document.querySelector('.main-left').style.width = '0';
|
||||
|
||||
window.addEventListener('resize', this.handleSidebarToggle, true);
|
||||
|
||||
},
|
||||
|
||||
handleMenuExpand: function(ev) {
|
||||
var a = ev.target, ul1 = a.parentNode, ul2 = a.nextElementSibling;
|
||||
|
||||
document.querySelectorAll('li.slide.active').forEach(function(li) {
|
||||
if (li !== a.parentNode || li == ul1) {
|
||||
li.classList.remove('active');
|
||||
li.childNodes[0].classList.remove('active');
|
||||
}
|
||||
|
||||
if (li == ul1)
|
||||
return;
|
||||
});
|
||||
|
||||
if (!ul2)
|
||||
return;
|
||||
|
||||
if (ul2.parentNode.offsetLeft + ul2.offsetWidth <= ul1.offsetLeft + ul1.offsetWidth)
|
||||
ul2.classList.add('align-left');
|
||||
|
||||
ul1.classList.add('active');
|
||||
a.classList.add('active');
|
||||
a.blur();
|
||||
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
},
|
||||
|
||||
renderMainMenu: function(tree, url, level) {
|
||||
var l = (level || 0) + 1,
|
||||
ul = E('ul', { 'class': level ? 'slide-menu' : 'nav' }),
|
||||
children = ui.menu.getChildren(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),
|
||||
submenu = this.renderMainMenu(children[i], url + '/' + children[i].name, l),
|
||||
hasChildren = submenu.children.length;
|
||||
|
||||
ul.appendChild(E('li', { 'class': (hasChildren ? 'slide' + (isActive ? ' active' : '') : (isActive ? ' active' : ''))}, [
|
||||
E('a', {
|
||||
'href': hasChildren ? '#' : L.url(url, children[i].name),
|
||||
'class': hasChildren ? 'menu' + (isActive ? ' active' : '') : null,
|
||||
'click': hasChildren ? ui.createHandlerFn(this, 'handleMenuExpand') : 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;
|
||||
},
|
||||
|
||||
renderModeMenu: function(tree) {
|
||||
var ul = document.querySelector('#modemenu'),
|
||||
children = ui.menu.getChildren(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)
|
||||
this.renderMainMenu(children[i], children[i].name);
|
||||
|
||||
if (i > 0 || i < children.length)
|
||||
ul.appendChild(E('li', {'class': 'divider'}, [E('span')]))
|
||||
}
|
||||
|
||||
if (ul.children.length > 1)
|
||||
ul.style.display = '';
|
||||
},
|
||||
|
||||
renderTabMenu: function(tree, url, level) {
|
||||
var container = document.querySelector('#tabmenu'),
|
||||
l = (level || 0) + 1,
|
||||
ul = E('ul', { 'class': 'tabs' }),
|
||||
children = ui.menu.getChildren(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(this.renderTabMenu(activeNode, url + '/' + activeNode.name, l));
|
||||
|
||||
return ul;
|
||||
},
|
||||
|
||||
handleSidebarToggle: function(ev) {
|
||||
var width = window.innerWidth,
|
||||
darkMask = document.querySelector('.darkMask'),
|
||||
mainRight = document.querySelector('.main-right'),
|
||||
mainLeft = document.querySelector('.main-left'),
|
||||
open = mainLeft.style.width == '';
|
||||
|
||||
if (width > 1152 || ev.type == 'resize')
|
||||
open = true;
|
||||
|
||||
darkMask.style.visibility = open ? '' : 'visible';
|
||||
darkMask.style.opacity = open ? '': 1;
|
||||
|
||||
if (width <= 1152)
|
||||
mainLeft.style.width = open ? '0' : '';
|
||||
else
|
||||
mainLeft.style.width = ''
|
||||
|
||||
mainLeft.style.visibility = open ? '' : 'visible';
|
||||
|
||||
mainRight.style['overflow-y'] = open ? 'visible' : 'hidden';
|
||||
}
|
||||
});
|
||||
|
|
@ -26,11 +26,8 @@
|
|||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// thanks for Jo-Philipp Wich <jow@openwrt.org>
|
||||
var luciLocation = <%= luci.http.write_json(luci.dispatcher.context.path) %>;
|
||||
</script>
|
||||
<script src="<%=media%>/js/jquery.min.js"></script>
|
||||
<script src="<%=media%>/js/script.js"></script>
|
||||
|
||||
<script type="text/javascript">L.require('menu-material')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -23,180 +23,48 @@
|
|||
local util = require "luci.util"
|
||||
local http = require "luci.http"
|
||||
local disp = require "luci.dispatcher"
|
||||
local ver = require "luci.version"
|
||||
|
||||
local boardinfo = util.ubus("system", "board")
|
||||
local boardinfo = util.ubus("system", "board") or { }
|
||||
|
||||
local node = disp.context.dispatched
|
||||
local path = table.concat(disp.context.path, "-")
|
||||
|
||||
-- send as HTML5
|
||||
http.prepare_content("text/html")
|
||||
http.prepare_content("text/html; charset=UTF-8")
|
||||
-%>
|
||||
<!DOCTYPE html>
|
||||
<html lang="<%=luci.i18n.context.lang%>">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title>
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="theme-color" content="#09c">
|
||||
<meta name="msapplication-tap-highlight" content="no">
|
||||
<meta name="msapplication-TileColor" content="#09c">
|
||||
<meta name="application-name" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
|
||||
<meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
|
||||
<link rel="stylesheet" href="<%=media%>/cascade.css">
|
||||
<link rel="shortcut icon" href="<%=media%>/favicon.ico">
|
||||
<% if node and node.css then %>
|
||||
<link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
|
||||
<% end -%>
|
||||
<% if css then %>
|
||||
<style title="text/css"><%= css %></style>
|
||||
<% end -%>
|
||||
<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.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>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="theme-color" content="#09c">
|
||||
<meta name="msapplication-tap-highlight" content="no">
|
||||
<meta name="msapplication-TileColor" content="#09c">
|
||||
<meta name="application-name" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
|
||||
<meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
|
||||
<link rel="stylesheet" href="<%=media%>/cascade.css">
|
||||
<link rel="shortcut icon" href="<%=media%>/favicon.ico">
|
||||
<% if node and node.css then %>
|
||||
<link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
|
||||
<% end -%>
|
||||
<script src="<%=url('admin/translations', luci.i18n.context.lang)%><%# ?v=PKG_VERSION %>"></script>
|
||||
<script src="<%=resource%>/cbi.js"></script>
|
||||
<title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title>
|
||||
<% if css then %><style title="text/css">
|
||||
<%= css %>
|
||||
</style>
|
||||
<% end -%>
|
||||
</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, "-")) %>">
|
||||
<body class="lang_<%=luci.i18n.context.lang%> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> <% if not (path == "") then %>node-<%= path %><% else %>node-main-login<% end %>" data-page="<%= pcdata(path) %>">
|
||||
<header>
|
||||
<div class="fill">
|
||||
<div class="container">
|
||||
<span class="showSide"></span>
|
||||
<a id="logo" href="<% if luci.dispatcher.context.authsession then %><%=url('admin/status/overview')%><% else %>#<% end %>"><img src="<%=media%>/brand.png" alt="OpenWrt"></a>
|
||||
<a class="brand" href="#"><%=striptags(boardinfo.hostname or "?")%></a>
|
||||
<div class="status" id="indicators">
|
||||
<span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()">
|
||||
<span class="label success" id="xhr_poll_status_on"><span class="mobile-hide"><%:Auto Refresh%></span> <%:on%></span>
|
||||
<span class="label" id="xhr_poll_status_off" style="display:none"><span class="mobile-hide"><%:Auto Refresh%></span> <%:off%></span>
|
||||
</span>
|
||||
</div>
|
||||
<span class="status" id="indicators"></span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -207,14 +75,7 @@
|
|||
<div class="darkMask"></div>
|
||||
<div id="maincontent">
|
||||
<div class="container">
|
||||
<%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%>
|
||||
<div class="alert-message warning">
|
||||
<h4><%:No password set!%></h4>
|
||||
<p><%:There is no password set on this router. Please configure a root password to protect the web interface.%></p>
|
||||
<% if disp.lookup("admin/system/admin") then %>
|
||||
<div class="right"><a class="btn" href="<%=url("admin/system/admin")%>"><%:Go to password configuration...%></a></div>
|
||||
<% end %>
|
||||
</div>
|
||||
<%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") and path ~= "admin-system-admin-password" then -%>
|
||||
<%- end -%>
|
||||
|
||||
<noscript>
|
||||
|
|
|
|||
Loading…
Reference in a new issue