From b7f1756f48af9e0c9d02c7096d4363458f58be69 Mon Sep 17 00:00:00 2001 From: Paul Donald Date: Wed, 23 Apr 2025 14:21:40 +0200 Subject: [PATCH] luci-theme-*: ES6 refactor Signed-off-by: Paul Donald (cherry picked from commit 9180f2a76219d44ea11bc37574627144d3ced167) --- .../luci-static/resources/menu-bootstrap.js | 76 ++++++------ .../luci-static/resources/menu-material.js | 108 ++++++++++-------- .../luci-static/resources/menu-openwrt2020.js | 101 ++++++++-------- .../luci-static/resources/menu-openwrt.js | 85 +++++++------- 4 files changed, 199 insertions(+), 171 deletions(-) diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/resources/menu-bootstrap.js b/themes/luci-theme-bootstrap/htdocs/luci-static/resources/menu-bootstrap.js index 32922f3842..94dcfa816e 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/resources/menu-bootstrap.js +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/resources/menu-bootstrap.js @@ -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 = ''; diff --git a/themes/luci-theme-material/htdocs/luci-static/resources/menu-material.js b/themes/luci-theme-material/htdocs/luci-static/resources/menu-material.js index a994c4f463..bf39705cd6 100644 --- a/themes/luci-theme-material/htdocs/luci-static/resources/menu-material.js +++ b/themes/luci-theme-material/htdocs/luci-static/resources/menu-material.js @@ -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; diff --git a/themes/luci-theme-openwrt-2020/htdocs/luci-static/resources/menu-openwrt2020.js b/themes/luci-theme-openwrt-2020/htdocs/luci-static/resources/menu-openwrt2020.js index b6fbfd4c2f..e1e9a40680 100644 --- a/themes/luci-theme-openwrt-2020/htdocs/luci-static/resources/menu-openwrt2020.js +++ b/themes/luci-theme-openwrt-2020/htdocs/luci-static/resources/menu-openwrt2020.js @@ -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'); diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/resources/menu-openwrt.js b/themes/luci-theme-openwrt/htdocs/luci-static/resources/menu-openwrt.js index ca97838d3a..e3352a599c 100644 --- a/themes/luci-theme-openwrt/htdocs/luci-static/resources/menu-openwrt.js +++ b/themes/luci-theme-openwrt/htdocs/luci-static/resources/menu-openwrt.js @@ -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 = ''; -- 2.30.2