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