OpenWrt
/
luci
mirror of https://git.openwrt.org/project/luci.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

luci-theme-*: ES6 refactor 

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
No known key found for this signature in database
GPG Key ID: 3FC4A933962871D2
4 changed files with 199 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
themes/luci-theme-bootstrap/htdocs/luci-static/resources/menu-bootstrap.js
View File

@ -3,13 +3,13 @@
'require ui';
return baseclass.extend({
__init__: function() {
__init__() {
ui.menu.load().then(L.bind(this.render, this));
},
render: function(tree) {
var node = tree,
url = '';
render(tree) {
let node = tree;
let url = '';
this.renderModeMenu(tree);
@ -24,23 +24,23 @@ return baseclass.extend({
}
},
renderTabMenu: function(tree, url, level) {
var container = document.querySelector('#tabmenu'),
ul = E('ul', { 'class': 'tabs' }),
children = ui.menu.getChildren(tree),
activeNode = null;
renderTabMenu(tree, url, level) {
const container = document.querySelector('#tabmenu');
const ul = E('ul', { 'class': 'tabs' });
const children = ui.menu.getChildren(tree);
let 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);
children.forEach(child => {
const isActive = (L.env.dispatchpath[3 + (level || 0)] == child.name);
const activeClass = isActive ? ' active' : '';
const className = 'tabmenu-item-%s %s'.format(child.name, activeClass);
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)
activeNode = children[i];
}
activeNode = child;
});
if (ul.children.length == 0)
return E([]);
@ -54,46 +54,50 @@ return baseclass.extend({
return ul;
},
renderMainMenu: function(tree, url, level) {
var ul = level ? E('ul', { 'class': 'dropdown-menu' }) : document.querySelector('#topmenu'),
children = ui.menu.getChildren(tree);
renderMainMenu(tree, url, level) {
const ul = level ? E('ul', { 'class': 'dropdown-menu' }) : document.querySelector('#topmenu');
const children = ui.menu.getChildren(tree);
if (children.length == 0 || level > 1)
return E([]);
for (var i = 0; i < children.length; i++) {
var submenu = this.renderMainMenu(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);
children.forEach(child => {
const submenu = this.renderMainMenu(child, url + '/' + child.name, (level || 0) + 1);
const subclass = (!level && submenu.firstElementChild) ? 'dropdown' : '';
const linkclass = (!level && submenu.firstElementChild) ? 'menu' : '';
const linkurl = submenu.firstElementChild ? '#' : L.url(url, child.name);
var li = E('li', { 'class': subclass }, [
E('a', { 'class': linkclass, 'href': linkurl }, [ _(children[i].title) ]),
const li = E('li', { 'class': subclass }, [
E('a', { 'class': linkclass, 'href': linkurl }, [
_(child.title),
]),
submenu
]);
ul.appendChild(li);
}
});
ul.style.display = '';
return ul;
},
renderModeMenu: function(tree) {
var ul = document.querySelector('#modemenu'),
children = ui.menu.getChildren(tree);
renderModeMenu(tree) {
const ul = document.querySelector('#modemenu');
const 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);
children.forEach((child, index) => {
const isActive = L.env.requestpath.length
? child.name === L.env.requestpath[0]
: index === 0;
ul.appendChild(E('li', { 'class': isActive ? 'active' : null }, [
E('a', { 'href': L.url(children[i].name) }, [ _(children[i].title) ])
ul.appendChild(E('li', { 'class': isActive ? 'active' : '' }, [
E('a', { 'href': L.url(child.name) }, [ _(child.title) ])
]));
if (isActive)
this.renderMainMenu(children[i], children[i].name);
}
this.renderMainMenu(child, child.name);
});
if (ul.children.length > 1)
ul.style.display = '';

108
themes/luci-theme-material/htdocs/luci-static/resources/menu-material.js
View File

@ -3,13 +3,13 @@
'require ui';
return baseclass.extend({
__init__: function() {
__init__() {
ui.menu.load().then(L.bind(this.render, this));
},
render: function(tree) {
var node = tree,
url = '';
render(tree) {
let node = tree;
let url = '';
this.renderModeMenu(node);
@ -39,8 +39,10 @@ return baseclass.extend({
},
handleMenuExpand: function(ev) {
var a = ev.target, ul1 = a.parentNode, ul2 = a.nextElementSibling;
handleMenuExpand(ev) {
const a = ev.target;
const ul1 = a.parentNode;
const ul2 = a.nextElementSibling;
document.querySelectorAll('li.slide.active').forEach(function(li) {
if (li !== a.parentNode || li == ul1) {
@ -66,29 +68,31 @@ return baseclass.extend({
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);
renderMainMenu(tree, url, level) {
const l = (level || 0) + 1;
const ul = E('ul', { 'class': level ? 'slide-menu' : 'nav' });
const 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;
children.forEach(child => {
const submenu = this.renderMainMenu(child, url + '/' + child.name, l);
const isActive = (L.env.dispatchpath[l] == child.name);
const 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) ]),
'href': hasChildren ? '#' : L.url(url, child.name),
'class': hasChildren ? 'menu' + (isActive ? ' active' : '') : '',
'click': hasChildren ? ui.createHandlerFn(this, 'handleMenuExpand') : '',
'data-title': hasChildren ? '' : _(child.title),
}, [
_(child.title)
]),
submenu
]));
}
});
if (l == 1) {
var container = document.querySelector('#mainmenu');
@ -100,53 +104,57 @@ return baseclass.extend({
return ul;
},
renderModeMenu: function(tree) {
var ul = document.querySelector('#modemenu'),
children = ui.menu.getChildren(tree);
renderModeMenu(tree) {
const ul = document.querySelector('#modemenu');
const 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);
children.forEach((child, index) => {
const isActive = L.env.requestpath.length
? child.name === L.env.requestpath[0]
: index === 0;
ul.appendChild(E('li', {}, [
E('a', {
'href': L.url(children[i].name),
'class': isActive ? 'active' : null
}, [ _(children[i].title) ])
'href': L.url(child.name),
'class': isActive ? 'active' : ''
}, [ _(child.title) ])
]));
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')]))
}
});
if (children.length > 1)
ul.parentElement.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;
renderTabMenu(tree, url, level) {
const container = document.querySelector('#tabmenu');
const l = (level || 0) + 1;
const ul = E('ul', { 'class': 'tabs' });
const children = ui.menu.getChildren(tree);
let 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);
children.forEach(child => {
const isActive = (L.env.dispatchpath[l + 2] == child.name);
const activeClass = isActive ? ' active' : '';
const className = 'tabmenu-item-%s %s'.format(child.name, activeClass);
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)
activeNode = children[i];
}
activeNode = child;
})
container.appendChild(ul);
container.style.display = '';
@ -157,12 +165,12 @@ return baseclass.extend({
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 == '';
handleSidebarToggle(ev) {
const width = window.innerWidth;
const darkMask = document.querySelector('.darkMask');
const mainRight = document.querySelector('.main-right');
const mainLeft = document.querySelector('.main-left');
let open = mainLeft.style.width == '';
if (width > 1152 || ev.type == 'resize')
open = true;

101
themes/luci-theme-openwrt-2020/htdocs/luci-static/resources/menu-openwrt2020.js
View File

@ -3,13 +3,13 @@
'require ui';
return baseclass.extend({
__init__: function() {
__init__() {
ui.menu.load().then(L.bind(this.render, this));
},
render: function(tree) {
var node = tree,
url = '';
render(tree) {
let node = tree;
let url = '';
this.renderModeMenu(node);
@ -27,10 +27,12 @@ return baseclass.extend({
.addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle'));
},
handleMenuExpand: function(ev) {
var a = ev.target, ul1 = a.parentNode.parentNode, ul2 = a.nextElementSibling;
handleMenuExpand(ev) {
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)
li.classList.remove('active');
});
@ -49,27 +51,28 @@ return baseclass.extend({
ev.stopPropagation();
},
renderMainMenu: function(tree, url, level) {
var l = (level || 0) + 1,
ul = E('ul', { 'class': 'mainmenu l%d'.format(l) }),
children = ui.menu.getChildren(tree);
renderMainMenu(tree, url, level) {
const l = (level || 0) + 1;
const ul = E('ul', { 'class': 'mainmenu l%d'.format(l) });
const 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),
isReadonly = children[i].readonly,
activeClass = 'mainmenu-item-%s%s'.format(children[i].name, isActive ? ' selected' : '');
children.forEach(child => {
const isActive = (L.env.dispatchpath[l] == child.name);
const activeClass = 'mainmenu-item-%s%s'.format(child.name, isActive ? ' selected' : '');
ul.appendChild(E('li', { 'class': activeClass }, [
E('a', {
'href': L.url(url, children[i].name),
'click': (l == 1) ? ui.createHandlerFn(this, 'handleMenuExpand') : null
}, [ _(children[i].title) ]),
this.renderMainMenu(children[i], url + '/' + children[i].name, l)
'href': L.url(url, child.name),
'click': (l == 1) ? ui.createHandlerFn(this, 'handleMenuExpand') : ''
}, [
_(child.title)
]),
this.renderMainMenu(child, url + '/' + child.name, l)
]));
}
});
if (l == 1)
document.querySelector('#mainmenu').appendChild(E('div', [ ul ]));
@ -77,50 +80,56 @@ return baseclass.extend({
return ul;
},
renderModeMenu: function(tree) {
var menu = document.querySelector('#modemenu'),
children = ui.menu.getChildren(tree);
renderModeMenu(tree) {
const menu = document.querySelector('#modemenu');
const 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);
children.forEach((child, index) => {
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('div', { 'class': isActive ? 'active' : null }, [
E('a', { 'href': L.url(children[i].name) }, [ _(children[i].title) ])
menu.appendChild(E('div', { 'class': isActive ? 'active' : '' }, [
E('a', { href: L.url(child.name) }, [
_(child.title)
])
]));
if (isActive)
this.renderMainMenu(children[i], children[i].name);
}
this.renderMainMenu(child, child.name);
});
if (menu.children.length > 1)
menu.style.display = '';
},
renderTabMenu: function(tree, url, level) {
var container = document.querySelector('#tabmenu'),
l = (level || 0) + 1,
ul = E('ul', { 'class': 'cbi-tabmenu' }),
children = ui.menu.getChildren(tree),
activeNode = null;
renderTabMenu(tree, url, level) {
const container = document.querySelector('#tabmenu');
const l = (level || 0) + 1;
const ul = E('ul', { 'class': 'cbi-tabmenu' });
const children = ui.menu.getChildren(tree);
let 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);
children.forEach(child => {
const isActive = (L.env.dispatchpath[l + 2] == child.name);
const activeClass = isActive ? ' cbi-tab' : '';
const className = 'tabmenu-item-%s %s'.format(child.name, activeClass);
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)
activeNode = children[i];
}
activeNode = child;
});
container.appendChild(ul);
container.style.display = '';
@ -131,9 +140,9 @@ return baseclass.extend({
return ul;
},
handleSidebarToggle: function(ev) {
var btn = ev.currentTarget,
bar = document.querySelector('#mainmenu');
handleSidebarToggle(ev) {
const btn = ev.currentTarget;
const bar = document.querySelector('#mainmenu');
if (btn.classList.contains('active')) {
btn.classList.remove('active');

85
themes/luci-theme-openwrt/htdocs/luci-static/resources/menu-openwrt.js
View File

@ -3,13 +3,13 @@
'require ui';
return baseclass.extend({
__init__: function() {
__init__() {
ui.menu.load().then(L.bind(this.render, this));
},
render: function(tree) {
var node = tree,
url = '';
render(tree) {
let node = tree;
let url = '';
this.renderModeMenu(tree);
@ -24,8 +24,10 @@ return baseclass.extend({
}
},
handleMenuExpand: function(ev) {
var a = ev.target, ul1 = a.parentNode.parentNode, ul2 = a.nextElementSibling;
handleMenuExpand(ev) {
const a = ev.target;
const ul1 = a.parentNode.parentNode
const ul2 = a.nextElementSibling;
document.querySelectorAll('ul.mainmenu.l1 > li.active').forEach(function(li) {
if (li !== a.parentNode)
@ -46,26 +48,29 @@ return baseclass.extend({
ev.stopPropagation();
},
renderMainMenu: function(tree, url, level) {
var l = (level || 0) + 1,
ul = E('ul', { 'class': 'mainmenu l%d'.format(l) }),
children = ui.menu.getChildren(tree);
renderMainMenu(tree, url, level) {
const l = (level || 0) + 1;
const ul = E('ul', { 'class': 'mainmenu l%d'.format(l) });
const 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),
activeClass = 'mainmenu-item-%s%s'.format(children[i].name, isActive ? ' selected' : '');
children.forEach(child => {
const isActive = (L.env.dispatchpath[l] == child.name);
const activeClass = 'mainmenu-item-%s%s'.format(child.name, isActive ? ' selected' : '');
const isReadonly = child.readonly;
ul.appendChild(E('li', { 'class': activeClass }, [
E('a', {
'href': L.url(url, children[i].name),
'click': (l == 1) ? this.handleMenuExpand : null,
}, [ _(children[i].title) ]),
this.renderMainMenu(children[i], url + '/' + children[i].name, l)
'href': L.url(url, child.name),
'click': (l == 1) ? this.handleMenuExpand : '',
}, [
_(child.title)
]),
this.renderMainMenu(child, url + '/' + child.name, l)
]));
}
});
if (l == 1) {
var container = document.querySelector('#mainmenu');
@ -78,49 +83,51 @@ return baseclass.extend({
},
renderModeMenu: function(tree) {
var ul = document.querySelector('#modemenu'),
children = ui.menu.getChildren(tree);
const ul = document.querySelector('#modemenu');
const 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);
children.forEach((child, index)=> {
const isActive = L.env.requestpath.length
? child.name === L.env.requestpath[0]
: index === 0;
ul.appendChild(E('li', {}, [
E('a', {
'href': L.url(children[i].name),
'class': isActive ? 'active' : null
}, [ _(children[i].title) ])
'href': L.url(child.name),
'class': isActive ? 'active' : ''
}, [ _(child.title) ])
]));
if (isActive)
this.renderMainMenu(children[i], children[i].name);
}
this.renderMainMenu(child, child.name);
});
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': 'cbi-tabmenu' }),
children = ui.menu.getChildren(tree),
activeNode = null;
const container = document.querySelector('#tabmenu');
const l = (level || 0) + 1;
const ul = E('ul', { 'class': 'cbi-tabmenu' });
const children = ui.menu.getChildren(tree);
let 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);
children.forEach(child => {
const isActive = (L.env.dispatchpath[l + 2] == child.name);
const activeClass = isActive ? ' cbi-tab' : '';
const className = 'tabmenu-item-%s %s'.format(child.name, activeClass);
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)
activeNode = children[i];
}
activeNode = child;
});
container.appendChild(ul);
container.style.display = '';