openwrt-mirror/luci
1
0
Fork 0
mirror of https://github.com/openwrt/luci.git synced 2026-06-17 17:03:20 +04:00
Code Issues Packages Projects Releases Wiki Activity

luci-theme-*: ES6 refactor

Browse Source 
Signed-off-by: Paul Donald <newtwen+github@gmail.com>
This commit is contained in:
Paul Donald
2025-04-23 14:21:40 +02:00
parent 9157254059
commit 9180f2a762
4 changed files with 199 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/luci-theme-bootstrap/htdocs/luci-static/resources/menu-bootstrap.js
+40 -36
View File
@@ -3,13 +3,13 @@
'require ui'; 'require ui';
return baseclass.extend({ return baseclass.extend({
__init__: function() { __init__() {
ui.menu.load().then(L.bind(this.render, this)); ui.menu.load().then(L.bind(this.render, this));
}, },
render: function(tree) { render(tree) {
var node = tree, let node = tree;
url = ''; let url = '';
this.renderModeMenu(tree); this.renderModeMenu(tree);
@@ -24,23 +24,23 @@ return baseclass.extend({
} }
}, },
renderTabMenu: function(tree, url, level) { renderTabMenu(tree, url, level) {
var container = document.querySelector('#tabmenu'), const container = document.querySelector('#tabmenu');
ul = E('ul', { 'class': 'tabs' }), const ul = E('ul', { 'class': 'tabs' });
children = ui.menu.getChildren(tree), const children = ui.menu.getChildren(tree);
activeNode = null; let activeNode = null;
for (var i = 0; i < children.length; i++) { children.forEach(child => {
var isActive = (L.env.dispatchpath[3 + (level || 0)] == children[i].name), const isActive = (L.env.dispatchpath[3 + (level || 0)] == child.name);
activeClass = isActive ? ' active' : '', const activeClass = isActive ? ' active' : '';
className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass); const className = 'tabmenu-item-%s %s'.format(child.name, activeClass);
ul.appendChild(E('li', { 'class': className }, [ ul.appendChild(E('li', { 'class': className }, [
E('a', { 'href': L.url(url, children[i].name) }, [ _(children[i].title) ] )])); E('a', { 'href': L.url(url, child.name) }, [ _(child.title) ] )]));
if (isActive) if (isActive)
activeNode = children[i]; activeNode = child;
} });
if (ul.children.length == 0) if (ul.children.length == 0)
return E([]); return E([]);
@@ -54,46 +54,50 @@ return baseclass.extend({
return ul; return ul;
}, },
renderMainMenu: function(tree, url, level) { renderMainMenu(tree, url, level) {
var ul = level ? E('ul', { 'class': 'dropdown-menu' }) : document.querySelector('#topmenu'), const ul = level ? E('ul', { 'class': 'dropdown-menu' }) : document.querySelector('#topmenu');
children = ui.menu.getChildren(tree); const children = ui.menu.getChildren(tree);
if (children.length == 0 || level > 1) if (children.length == 0 || level > 1)
return E([]); return E([]);
for (var i = 0; i < children.length; i++) { children.forEach(child => {
var submenu = this.renderMainMenu(children[i], url + '/' + children[i].name, (level || 0) + 1), const submenu = this.renderMainMenu(child, url + '/' + child.name, (level || 0) + 1);
subclass = (!level && submenu.firstElementChild) ? 'dropdown' : null, const subclass = (!level && submenu.firstElementChild) ? 'dropdown' : '';
linkclass = (!level && submenu.firstElementChild) ? 'menu' : null, const linkclass = (!level && submenu.firstElementChild) ? 'menu' : '';
linkurl = submenu.firstElementChild ? '#' : L.url(url, children[i].name); const linkurl = submenu.firstElementChild ? '#' : L.url(url, child.name);
var li = E('li', { 'class': subclass }, [ const li = E('li', { 'class': subclass }, [
E('a', { 'class': linkclass, 'href': linkurl }, [ _(children[i].title) ]), E('a', { 'class': linkclass, 'href': linkurl }, [
_(child.title),
]),
submenu submenu
]); ]);
ul.appendChild(li); ul.appendChild(li);
} });
ul.style.display = ''; ul.style.display = '';
return ul; return ul;
}, },
renderModeMenu: function(tree) { renderModeMenu(tree) {
var ul = document.querySelector('#modemenu'), const ul = document.querySelector('#modemenu');
children = ui.menu.getChildren(tree); const children = ui.menu.getChildren(tree);
for (var i = 0; i < children.length; i++) { children.forEach((child, index) => {
var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0); const isActive = L.env.requestpath.length
? child.name === L.env.requestpath[0]
: index === 0;
ul.appendChild(E('li', { 'class': isActive ? 'active' : null }, [ ul.appendChild(E('li', { 'class': isActive ? 'active' : '' }, [
E('a', { 'href': L.url(children[i].name) }, [ _(children[i].title) ]) E('a', { 'href': L.url(child.name) }, [ _(child.title) ])
])); ]));
if (isActive) if (isActive)
this.renderMainMenu(children[i], children[i].name); this.renderMainMenu(child, child.name);
} });
if (ul.children.length > 1) if (ul.children.length > 1)
ul.style.display = ''; ul.style.display = '';
themes/luci-theme-material/htdocs/luci-static/resources/menu-material.js
+58 -50
View File
@@ -3,13 +3,13 @@
'require ui'; 'require ui';
return baseclass.extend({ return baseclass.extend({
__init__: function() { __init__() {
ui.menu.load().then(L.bind(this.render, this)); ui.menu.load().then(L.bind(this.render, this));
}, },
render: function(tree) { render(tree) {
var node = tree, let node = tree;
url = ''; let url = '';
this.renderModeMenu(node); this.renderModeMenu(node);
@@ -39,8 +39,10 @@ return baseclass.extend({
}, },
handleMenuExpand: function(ev) { handleMenuExpand(ev) {
var a = ev.target, ul1 = a.parentNode, ul2 = a.nextElementSibling; const a = ev.target;
const ul1 = a.parentNode;
const ul2 = a.nextElementSibling;
document.querySelectorAll('li.slide.active').forEach(function(li) { document.querySelectorAll('li.slide.active').forEach(function(li) {
if (li !== a.parentNode || li == ul1) { if (li !== a.parentNode || li == ul1) {
@@ -66,29 +68,31 @@ return baseclass.extend({
ev.stopPropagation(); ev.stopPropagation();
}, },
renderMainMenu: function(tree, url, level) { renderMainMenu(tree, url, level) {
var l = (level || 0) + 1, const l = (level || 0) + 1;
ul = E('ul', { 'class': level ? 'slide-menu' : 'nav' }), const ul = E('ul', { 'class': level ? 'slide-menu' : 'nav' });
children = ui.menu.getChildren(tree); const children = ui.menu.getChildren(tree);
if (children.length == 0 || l > 2) if (children.length == 0 || l > 2)
return E([]); return E([]);
for (var i = 0; i < children.length; i++) { children.forEach(child => {
var isActive = (L.env.dispatchpath[l] == children[i].name), const submenu = this.renderMainMenu(child, url + '/' + child.name, l);
submenu = this.renderMainMenu(children[i], url + '/' + children[i].name, l), const isActive = (L.env.dispatchpath[l] == child.name);
hasChildren = submenu.children.length; const hasChildren = submenu.children.length;
ul.appendChild(E('li', { 'class': (hasChildren ? 'slide' + (isActive ? ' active' : '') : (isActive ? ' active' : ''))}, [ ul.appendChild(E('li', { 'class': (hasChildren ? 'slide' + (isActive ? ' active' : '') : (isActive ? ' active' : ''))}, [
E('a', { E('a', {
'href': hasChildren ? '#' : L.url(url, children[i].name), 'href': hasChildren ? '#' : L.url(url, child.name),
'class': hasChildren ? 'menu' + (isActive ? ' active' : '') : null, 'class': hasChildren ? 'menu' + (isActive ? ' active' : '') : '',
'click': hasChildren ? ui.createHandlerFn(this, 'handleMenuExpand') : null, 'click': hasChildren ? ui.createHandlerFn(this, 'handleMenuExpand') : '',
'data-title': hasChildren ? null : _(children[i].title), 'data-title': hasChildren ? '' : _(child.title),
}, [ _(children[i].title) ]), }, [
_(child.title)
]),
submenu submenu
])); ]));
} });
if (l == 1) { if (l == 1) {
var container = document.querySelector('#mainmenu'); var container = document.querySelector('#mainmenu');
@@ -100,53 +104,57 @@ return baseclass.extend({
return ul; return ul;
}, },
renderModeMenu: function(tree) { renderModeMenu(tree) {
var ul = document.querySelector('#modemenu'), const ul = document.querySelector('#modemenu');
children = ui.menu.getChildren(tree); const children = ui.menu.getChildren(tree);
for (var i = 0; i < children.length; i++) { children.forEach((child, index) => {
var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0); const isActive = L.env.requestpath.length
? child.name === L.env.requestpath[0]
: index === 0;
ul.appendChild(E('li', {}, [ ul.appendChild(E('li', {}, [
E('a', { E('a', {
'href': L.url(children[i].name), 'href': L.url(child.name),
'class': isActive ? 'active' : null 'class': isActive ? 'active' : ''
}, [ _(children[i].title) ]) }, [ _(child.title) ])
])); ]));
if (isActive) if (isActive)
this.renderMainMenu(children[i], children[i].name); this.renderMainMenu(child, child.name);
if (i > 0 && i < children.length) if (index > 0 && index < children.length)
ul.appendChild(E('li', {'class': 'divider'}, [E('span')])) ul.appendChild(E('li', {'class': 'divider'}, [E('span')]))
} });
if (children.length > 1) if (children.length > 1)
ul.parentElement.style.display = ''; ul.parentElement.style.display = '';
}, },
renderTabMenu: function(tree, url, level) { renderTabMenu(tree, url, level) {
var container = document.querySelector('#tabmenu'), const container = document.querySelector('#tabmenu');
l = (level || 0) + 1, const l = (level || 0) + 1;
ul = E('ul', { 'class': 'tabs' }), const ul = E('ul', { 'class': 'tabs' });
children = ui.menu.getChildren(tree), const children = ui.menu.getChildren(tree);
activeNode = null; let activeNode = null;
if (children.length == 0) if (children.length == 0)
return E([]); return E([]);
for (var i = 0; i < children.length; i++) { children.forEach(child => {
var isActive = (L.env.dispatchpath[l + 2] == children[i].name), const isActive = (L.env.dispatchpath[l + 2] == child.name);
activeClass = isActive ? ' active' : '', const activeClass = isActive ? ' active' : '';
className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass); const className = 'tabmenu-item-%s %s'.format(child.name, activeClass);
ul.appendChild(E('li', { 'class': className }, [ ul.appendChild(E('li', { 'class': className }, [
E('a', { 'href': L.url(url, children[i].name) }, [ _(children[i].title) ] ) E('a', { 'href': L.url(url, child.name) }, [
_(child.title)
])
])); ]));
if (isActive) if (isActive)
activeNode = children[i]; activeNode = child;
} })
container.appendChild(ul); container.appendChild(ul);
container.style.display = ''; container.style.display = '';
@@ -157,12 +165,12 @@ return baseclass.extend({
return ul; return ul;
}, },
handleSidebarToggle: function(ev) { handleSidebarToggle(ev) {
var width = window.innerWidth, const width = window.innerWidth;
darkMask = document.querySelector('.darkMask'), const darkMask = document.querySelector('.darkMask');
mainRight = document.querySelector('.main-right'), const mainRight = document.querySelector('.main-right');
mainLeft = document.querySelector('.main-left'), const mainLeft = document.querySelector('.main-left');
open = mainLeft.style.width == ''; let open = mainLeft.style.width == '';
if (width > 1152 || ev.type == 'resize') if (width > 1152 || ev.type == 'resize')
open = true; open = true;
themes/luci-theme-openwrt-2020/htdocs/luci-static/resources/menu-openwrt2020.js
+55 -46
View File
@@ -3,13 +3,13 @@
'require ui'; 'require ui';
return baseclass.extend({ return baseclass.extend({
__init__: function() { __init__() {
ui.menu.load().then(L.bind(this.render, this)); ui.menu.load().then(L.bind(this.render, this));
}, },
render: function(tree) { render(tree) {
var node = tree, let node = tree;
url = ''; let url = '';
this.renderModeMenu(node); this.renderModeMenu(node);
@@ -27,10 +27,12 @@ return baseclass.extend({
.addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle')); .addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle'));
}, },
handleMenuExpand: function(ev) { handleMenuExpand(ev) {
var a = ev.target, ul1 = a.parentNode.parentNode, ul2 = a.nextElementSibling; const a = ev.target;
const ul1 = a.parentNode.parentNode;
const ul2 = a.nextElementSibling;
document.querySelectorAll('ul.mainmenu.l1 > li.active').forEach(function(li) { document.querySelectorAll('ul.mainmenu.l1 > li.active').forEach(li => {
if (li !== a.parentNode) if (li !== a.parentNode)
li.classList.remove('active'); li.classList.remove('active');
}); });
@@ -49,27 +51,28 @@ return baseclass.extend({
ev.stopPropagation(); ev.stopPropagation();
}, },
renderMainMenu: function(tree, url, level) { renderMainMenu(tree, url, level) {
var l = (level || 0) + 1, const l = (level || 0) + 1;
ul = E('ul', { 'class': 'mainmenu l%d'.format(l) }), const ul = E('ul', { 'class': 'mainmenu l%d'.format(l) });
children = ui.menu.getChildren(tree); const children = ui.menu.getChildren(tree);
if (children.length == 0 || l > 2) if (children.length == 0 || l > 2)
return E([]); return E([]);
for (var i = 0; i < children.length; i++) { children.forEach(child => {
var isActive = (L.env.dispatchpath[l] == children[i].name), const isActive = (L.env.dispatchpath[l] == child.name);
isReadonly = children[i].readonly, const activeClass = 'mainmenu-item-%s%s'.format(child.name, isActive ? ' selected' : '');
activeClass = 'mainmenu-item-%s%s'.format(children[i].name, isActive ? ' selected' : '');
ul.appendChild(E('li', { 'class': activeClass }, [ ul.appendChild(E('li', { 'class': activeClass }, [
E('a', { E('a', {
'href': L.url(url, children[i].name), 'href': L.url(url, child.name),
'click': (l == 1) ? ui.createHandlerFn(this, 'handleMenuExpand') : null 'click': (l == 1) ? ui.createHandlerFn(this, 'handleMenuExpand') : ''
}, [ _(children[i].title) ]), }, [
this.renderMainMenu(children[i], url + '/' + children[i].name, l) _(child.title)
]),
this.renderMainMenu(child, url + '/' + child.name, l)
])); ]));
} });
if (l == 1) if (l == 1)
document.querySelector('#mainmenu').appendChild(E('div', [ ul ])); document.querySelector('#mainmenu').appendChild(E('div', [ ul ]));
@@ -77,50 +80,56 @@ return baseclass.extend({
return ul; return ul;
}, },
renderModeMenu: function(tree) { renderModeMenu(tree) {
var menu = document.querySelector('#modemenu'), const menu = document.querySelector('#modemenu');
children = ui.menu.getChildren(tree); const children = ui.menu.getChildren(tree);
for (var i = 0; i < children.length; i++) { children.forEach((child, index) => {
var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0); const isActive = L.env.requestpath.length
? child.name === L.env.requestpath[0]
: index === 0;
if (i > 0) if (index > 0)
menu.appendChild(E([], ['\u00a0|\u00a0'])); menu.appendChild(E([], ['\u00a0|\u00a0']));
menu.appendChild(E('div', { 'class': isActive ? 'active' : null }, [ menu.appendChild(E('div', { 'class': isActive ? 'active' : '' }, [
E('a', { 'href': L.url(children[i].name) }, [ _(children[i].title) ]) E('a', { href: L.url(child.name) }, [
_(child.title)
])
])); ]));
if (isActive) if (isActive)
this.renderMainMenu(children[i], children[i].name); this.renderMainMenu(child, child.name);
} });
if (menu.children.length > 1) if (menu.children.length > 1)
menu.style.display = ''; menu.style.display = '';
}, },
renderTabMenu: function(tree, url, level) { renderTabMenu(tree, url, level) {
var container = document.querySelector('#tabmenu'), const container = document.querySelector('#tabmenu');
l = (level || 0) + 1, const l = (level || 0) + 1;
ul = E('ul', { 'class': 'cbi-tabmenu' }), const ul = E('ul', { 'class': 'cbi-tabmenu' });
children = ui.menu.getChildren(tree), const children = ui.menu.getChildren(tree);
activeNode = null; let activeNode = null;
if (children.length == 0) if (children.length == 0)
return E([]); return E([]);
for (var i = 0; i < children.length; i++) { children.forEach(child => {
var isActive = (L.env.dispatchpath[l + 2] == children[i].name), const isActive = (L.env.dispatchpath[l + 2] == child.name);
activeClass = isActive ? ' cbi-tab' : '', const activeClass = isActive ? ' cbi-tab' : '';
className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass); const className = 'tabmenu-item-%s %s'.format(child.name, activeClass);
ul.appendChild(E('li', { 'class': className }, [ ul.appendChild(E('li', { 'class': className }, [
E('a', { 'href': L.url(url, children[i].name) }, [ _(children[i].title) ] ) E('a', { 'href': L.url(url, child.name) }, [
_(child.title)
])
])); ]));
if (isActive) if (isActive)
activeNode = children[i]; activeNode = child;
} });
container.appendChild(ul); container.appendChild(ul);
container.style.display = ''; container.style.display = '';
@@ -131,9 +140,9 @@ return baseclass.extend({
return ul; return ul;
}, },
handleSidebarToggle: function(ev) { handleSidebarToggle(ev) {
var btn = ev.currentTarget, const btn = ev.currentTarget;
bar = document.querySelector('#mainmenu'); const bar = document.querySelector('#mainmenu');
if (btn.classList.contains('active')) { if (btn.classList.contains('active')) {
btn.classList.remove('active'); btn.classList.remove('active');
themes/luci-theme-openwrt/htdocs/luci-static/resources/menu-openwrt.js
+46 -39
View File
@@ -3,13 +3,13 @@
'require ui'; 'require ui';
return baseclass.extend({ return baseclass.extend({
__init__: function() { __init__() {
ui.menu.load().then(L.bind(this.render, this)); ui.menu.load().then(L.bind(this.render, this));
}, },
render: function(tree) { render(tree) {
var node = tree, let node = tree;
url = ''; let url = '';
this.renderModeMenu(tree); this.renderModeMenu(tree);
@@ -24,8 +24,10 @@ return baseclass.extend({
} }
}, },
handleMenuExpand: function(ev) { handleMenuExpand(ev) {
var a = ev.target, ul1 = a.parentNode.parentNode, ul2 = a.nextElementSibling; const a = ev.target;
const ul1 = a.parentNode.parentNode
const ul2 = a.nextElementSibling;
document.querySelectorAll('ul.mainmenu.l1 > li.active').forEach(function(li) { document.querySelectorAll('ul.mainmenu.l1 > li.active').forEach(function(li) {
if (li !== a.parentNode) if (li !== a.parentNode)
@@ -46,26 +48,29 @@ return baseclass.extend({
ev.stopPropagation(); ev.stopPropagation();
}, },
renderMainMenu: function(tree, url, level) { renderMainMenu(tree, url, level) {
var l = (level || 0) + 1, const l = (level || 0) + 1;
ul = E('ul', { 'class': 'mainmenu l%d'.format(l) }), const ul = E('ul', { 'class': 'mainmenu l%d'.format(l) });
children = ui.menu.getChildren(tree); const children = ui.menu.getChildren(tree);
if (children.length == 0 || l > 2) if (children.length == 0 || l > 2)
return E([]); return E([]);
for (var i = 0; i < children.length; i++) { children.forEach(child => {
var isActive = (L.env.dispatchpath[l] == children[i].name), const isActive = (L.env.dispatchpath[l] == child.name);
activeClass = 'mainmenu-item-%s%s'.format(children[i].name, isActive ? ' selected' : ''); const activeClass = 'mainmenu-item-%s%s'.format(child.name, isActive ? ' selected' : '');
const isReadonly = child.readonly;
ul.appendChild(E('li', { 'class': activeClass }, [ ul.appendChild(E('li', { 'class': activeClass }, [
E('a', { E('a', {
'href': L.url(url, children[i].name), 'href': L.url(url, child.name),
'click': (l == 1) ? this.handleMenuExpand : null, 'click': (l == 1) ? this.handleMenuExpand : '',
}, [ _(children[i].title) ]), }, [
this.renderMainMenu(children[i], url + '/' + children[i].name, l) _(child.title)
]),
this.renderMainMenu(child, url + '/' + child.name, l)
])); ]));
} });
if (l == 1) { if (l == 1) {
var container = document.querySelector('#mainmenu'); var container = document.querySelector('#mainmenu');
@@ -78,49 +83,51 @@ return baseclass.extend({
}, },
renderModeMenu: function(tree) { renderModeMenu: function(tree) {
var ul = document.querySelector('#modemenu'), const ul = document.querySelector('#modemenu');
children = ui.menu.getChildren(tree); const children = ui.menu.getChildren(tree);
for (var i = 0; i < children.length; i++) { children.forEach((child, index)=> {
var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0); const isActive = L.env.requestpath.length
? child.name === L.env.requestpath[0]
: index === 0;
ul.appendChild(E('li', {}, [ ul.appendChild(E('li', {}, [
E('a', { E('a', {
'href': L.url(children[i].name), 'href': L.url(child.name),
'class': isActive ? 'active' : null 'class': isActive ? 'active' : ''
}, [ _(children[i].title) ]) }, [ _(child.title) ])
])); ]));
if (isActive) if (isActive)
this.renderMainMenu(children[i], children[i].name); this.renderMainMenu(child, child.name);
} });
if (ul.children.length > 1) if (ul.children.length > 1)
ul.style.display = ''; ul.style.display = '';
}, },
renderTabMenu: function(tree, url, level) { renderTabMenu: function(tree, url, level) {
var container = document.querySelector('#tabmenu'), const container = document.querySelector('#tabmenu');
l = (level || 0) + 1, const l = (level || 0) + 1;
ul = E('ul', { 'class': 'cbi-tabmenu' }), const ul = E('ul', { 'class': 'cbi-tabmenu' });
children = ui.menu.getChildren(tree), const children = ui.menu.getChildren(tree);
activeNode = null; let activeNode = null;
if (children.length == 0) if (children.length == 0)
return E([]); return E([]);
for (var i = 0; i < children.length; i++) { children.forEach(child => {
var isActive = (L.env.dispatchpath[l + 2] == children[i].name), const isActive = (L.env.dispatchpath[l + 2] == child.name);
activeClass = isActive ? ' cbi-tab' : '', const activeClass = isActive ? ' cbi-tab' : '';
className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass); const className = 'tabmenu-item-%s %s'.format(child.name, activeClass);
ul.appendChild(E('li', { 'class': className }, [ ul.appendChild(E('li', { 'class': className }, [
E('a', { 'href': L.url(url, children[i].name) }, [ _(children[i].title) ] ) E('a', { 'href': L.url(url, child.name) }, [ _(child.title) ] )
])); ]));
if (isActive) if (isActive)
activeNode = children[i]; activeNode = child;
} });
container.appendChild(ul); container.appendChild(ul);
container.style.display = ''; container.style.display = '';