fish
/
luci-theme-alpha
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add icon

This commit is contained in:
deri sahertian 2023-03-01 17:50:31 +07:00 committed by GitHub
parent 571eeaeb7f
commit 98ecb715dd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 177 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

357
js/menu-alpha.js
View File

@ -1,182 +1,179 @@
'use strict'; "use strict";
'require baseclass'; "require baseclass";
'require ui'; "require ui";
return baseclass.extend({ return baseclass.extend({
__init__: function() { __init__: function () {
ui.menu.load().then(L.bind(this.render, this)); ui.menu.load().then(L.bind(this.render, this));
}, },
render: function (tree) {
render: function(tree) { var node = tree,
var node = tree, url = "";
url = ''; this.renderModeMenu(node);
if (L.env.dispatchpath.length >= 3) {
this.renderModeMenu(node); for (var i = 0; i < 3 && node; i++) {
node = node.children[L.env.dispatchpath[i]];
if (L.env.dispatchpath.length >= 3) { url = url + (url ? "/" : "") + L.env.dispatchpath[i];
for (var i = 0; i < 3 && node; i++) { }
node = node.children[L.env.dispatchpath[i]]; if (node) this.renderTabMenu(node, url);
url = url + (url ? '/' : '') + L.env.dispatchpath[i]; }
} document
.querySelector(".showSide")
if (node) .addEventListener(
this.renderTabMenu(node, url); "click",
} ui.createHandlerFn(this, "handleSidebarToggle")
);
document.querySelector('.showSide') document
.addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle')); .querySelector(".darkMask")
.addEventListener(
document.querySelector('.darkMask') "click",
.addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle')); ui.createHandlerFn(this, "handleSidebarToggle")
);
document.querySelector(".main > .loading").style.opacity = '0'; document.querySelector(".main > .loading").style.opacity = "0";
document.querySelector(".main > .loading").style.visibility = 'hidden'; document.querySelector(".main > .loading").style.visibility = "hidden";
if (window.innerWidth <= 1152)
if (window.innerWidth <= 1152) document.querySelector(".main-left").style.width = "0";
document.querySelector('.main-left').style.width = '0'; window.addEventListener("resize", this.handleSidebarToggle, true);
},
window.addEventListener('resize', this.handleSidebarToggle, true); handleMenuExpand: function (ev) {
var a = ev.target,
}, ul1 = a.parentNode,
ul2 = a.nextElementSibling;
handleMenuExpand: function(ev) { document.querySelectorAll("li.slide.active").forEach(function (li) {
var a = ev.target, ul1 = a.parentNode, ul2 = a.nextElementSibling; if (li !== a.parentNode || li == ul1) {
li.classList.remove("active");
document.querySelectorAll('li.slide.active').forEach(function(li) { li.childNodes[0].classList.remove("active");
if (li !== a.parentNode || li == ul1) { }
li.classList.remove('active'); if (li == ul1) return;
li.childNodes[0].classList.remove('active'); });
} if (!ul2) return;
if (
if (li == ul1) ul2.parentNode.offsetLeft + ul2.offsetWidth <=
return; ul1.offsetLeft + ul1.offsetWidth
}); )
ul2.classList.add("align-left");
if (!ul2) ul1.classList.add("active");
return; a.classList.add("active");
a.blur();
if (ul2.parentNode.offsetLeft + ul2.offsetWidth <= ul1.offsetLeft + ul1.offsetWidth) ev.preventDefault();
ul2.classList.add('align-left'); ev.stopPropagation();
},
ul1.classList.add('active'); renderMainMenu: function (tree, url, level) {
a.classList.add('active'); var l = (level || 0) + 1,
a.blur(); ul = E("ul", { class: level ? "slide-menu" : "nav" }),
children = ui.menu.getChildren(tree);
ev.preventDefault(); if (children.length == 0 || l > 2) return E([]);
ev.stopPropagation(); for (var i = 0; i < children.length; i++) {
}, var isActive = L.env.dispatchpath[l] == children[i].name,
submenu = this.renderMainMenu(
renderMainMenu: function(tree, url, level) { children[i],
var l = (level || 0) + 1, url + "/" + children[i].name,
ul = E('ul', { 'class': level ? 'slide-menu' : 'nav' }), l
children = ui.menu.getChildren(tree); ),
hasChildren = submenu.children.length;
if (children.length == 0 || l > 2) ul.appendChild(
return E([]); E(
"li",
for (var i = 0; i < children.length; i++) { {
var isActive = (L.env.dispatchpath[l] == children[i].name), class: hasChildren
submenu = this.renderMainMenu(children[i], url + '/' + children[i].name, l), ? "slide" + (isActive ? " active" : "")
hasChildren = submenu.children.length; : isActive
? " active"
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, E(
'click': hasChildren ? ui.createHandlerFn(this, 'handleMenuExpand') : null, "a",
'data-title': hasChildren ? null : _(children[i].title), {
}, [ _(children[i].title) ]), href: hasChildren ? "#" : L.url(url, children[i].name),
submenu class: hasChildren
])); ? "menu" + (isActive ? " active" : "")
} : null,
click: hasChildren
if (l == 1) { ? ui.createHandlerFn(this, "handleMenuExpand")
var container = document.querySelector('#mainmenu'); : null,
"data-title": hasChildren
container.appendChild(ul); ? children[i].title
container.style.display = ''; : _(children[i].title),
} },
[_(children[i].title)]
return ul; ),
}, submenu,
]
renderModeMenu: function(tree) { )
var ul = document.querySelector('#modemenu'), );
children = ui.menu.getChildren(tree); }
if (l == 1) {
for (var i = 0; i < children.length; i++) { var container = document.querySelector("#mainmenu");
var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0); container.appendChild(ul);
container.style.display = "";
ul.appendChild(E('li', {}, [ }
E('a', { return ul;
'href': L.url(children[i].name), },
'class': isActive ? 'active' : null renderModeMenu: function (tree) {
}, [ _(children[i].title) ]) var ul = document.querySelector("#modemenu"),
])); children = ui.menu.getChildren(tree);
for (var i = 0; i < children.length; i++) {
if (isActive) var isActive = L.env.requestpath.length
this.renderMainMenu(children[i], children[i].name); ? children[i].name == L.env.requestpath[0]
: i == 0;
if (i > 0 && i < children.length) ul.appendChild(
ul.appendChild(E('li', {'class': 'divider'}, [E('span')])) E("li", {}, [
} E(
"a",
if (children.length > 1) {
ul.parentElement.style.display = ''; href: L.url(children[i].name),
}, class: isActive ? "active" : null,
},
renderTabMenu: function(tree, url, level) { [_(children[i].title)]
var container = document.querySelector('#tabmenu'), ),
l = (level || 0) + 1, ])
ul = E('ul', { 'class': 'tabs' }), );
children = ui.menu.getChildren(tree), if (isActive) this.renderMainMenu(children[i], children[i].name);
activeNode = null; if (i > 0 && i < children.length)
ul.appendChild(E("li", { class: "divider" }, [E("span")]));
if (children.length == 0) }
return E([]); if (children.length > 1) ul.parentElement.style.display = "";
},
for (var i = 0; i < children.length; i++) { renderTabMenu: function (tree, url, level) {
var isActive = (L.env.dispatchpath[l + 2] == children[i].name), var container = document.querySelector("#tabmenu"),
activeClass = isActive ? ' active' : '', l = (level || 0) + 1,
className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass); ul = E("ul", { class: "tabs" }),
children = ui.menu.getChildren(tree),
ul.appendChild(E('li', { 'class': className }, [ activeNode = null;
E('a', { 'href': L.url(url, children[i].name) }, [ _(children[i].title) ] ) if (children.length == 0) return E([]);
])); for (var i = 0; i < children.length; i++) {
var isActive = L.env.dispatchpath[l + 2] == children[i].name,
if (isActive) activeClass = isActive ? " active" : "",
activeNode = children[i]; className = "tabmenu-item-%s %s".format(children[i].name, activeClass);
} ul.appendChild(
E("li", { class: className }, [
container.appendChild(ul); E("a", { href: L.url(url, children[i].name) }, [
container.style.display = ''; _(children[i].title),
]),
if (activeNode) ])
container.appendChild(this.renderTabMenu(activeNode, url + '/' + activeNode.name, l)); );
if (isActive) activeNode = children[i];
return ul; }
}, container.appendChild(ul);
container.style.display = "";
handleSidebarToggle: function(ev) { if (activeNode)
var width = window.innerWidth, container.appendChild(
darkMask = document.querySelector('.darkMask'), this.renderTabMenu(activeNode, url + "/" + activeNode.name, l)
mainRight = document.querySelector('.main-right'), );
mainLeft = document.querySelector('.main-left'), return ul;
open = mainLeft.style.width == ''; },
handleSidebarToggle: function (ev) {
if (width > 1152 || ev.type == 'resize') var width = window.innerWidth,
open = true; darkMask = document.querySelector(".darkMask"),
mainRight = document.querySelector(".main-right"),
darkMask.style.visibility = open ? '' : 'visible'; mainLeft = document.querySelector(".main-left"),
darkMask.style.opacity = open ? '': 1; open = mainLeft.style.width == "";
if (width > 1152 || ev.type == "resize") open = true;
if (width <= 1152) darkMask.style.visibility = open ? "" : "visible";
mainLeft.style.width = open ? '0' : ''; darkMask.style.opacity = open ? "" : 1;
else if (width <= 1152) mainLeft.style.width = open ? "0" : "";
mainLeft.style.width = '' else mainLeft.style.width = "";
mainLeft.style.visibility = open ? "" : "visible";
mainLeft.style.visibility = open ? '' : 'visible'; mainRight.style["overflow-y"] = open ? "visible" : "hidden";
},
mainRight.style['overflow-y'] = open ? 'visible' : 'hidden';
}
}); });