🎄 Sync 2026-05-06 19:35:12

luci-theme-material3/htdocs/luci-static/resources/menu-material3.js

@@ -6,6 +6,7 @@ return baseclass.extend({
 	__init__() {
 		ui.menu.load().then((tree) => this.render(tree));
 		this.initNavigationShell();
+		this.initDashboardTables();
 	},
 
 	createRipple(ev, target) {
@@ -64,11 +65,16 @@ return baseclass.extend({
 		const sidebar = document.querySelector('.sidebar');
 		const overlay = document.querySelector('.sidebar-overlay');
 		const header = document.querySelector('header');
+		const collapsedQuery = window.matchMedia('(max-width: 854px), (max-device-width: 854px)');
 
 		if (header) {
-			window.addEventListener('scroll', () => {
-				header.classList.toggle('with-shadow', window.scrollY > 8);
-			});
+			const updateHeaderShadow = () => {
+				header.classList.toggle('with-shadow', collapsedQuery.matches && window.scrollY > 8);
+			};
+
+			updateHeaderShadow();
+			window.addEventListener('scroll', updateHeaderShadow, { passive: true });
+			collapsedQuery.addEventListener('change', updateHeaderShadow);
 		}
 
 		if (!button || !sidebar || !overlay)
@@ -78,6 +84,7 @@ return baseclass.extend({
 			sidebar.classList.remove('active');
 			overlay.classList.remove('active');
 			button.classList.remove('active');
+			document.body.classList.remove('sidebar-open');
 			document.body.style.overflow = '';
 			button.setAttribute('aria-expanded', 'false');
 		};
@@ -88,6 +95,7 @@ return baseclass.extend({
 			const isOpen = sidebar.classList.contains('active');
 
 			button.classList.toggle('active', isOpen);
+			document.body.classList.toggle('sidebar-open', isOpen);
 			document.body.style.overflow = isOpen ? 'hidden' : '';
 			button.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
 		});
@@ -117,7 +125,87 @@ return baseclass.extend({
 			if (target)
 				this.createRipple(ev, target);
 		});
-		},
+
+		sidebar.addEventListener('mouseover', ev => {
+			const link = ev.target.closest('.nav a');
+			const title = link ? link.querySelector('.nav-menu-title') : null;
+
+			if (title && title.scrollWidth > title.clientWidth)
+				title.scrollTo({ left: title.scrollWidth - title.clientWidth, behavior: 'smooth' });
+		});
+
+		sidebar.addEventListener('mouseout', ev => {
+			const link = ev.target.closest('.nav a');
+			const title = link ? link.querySelector('.nav-menu-title') : null;
+
+			if (title && !link.contains(ev.relatedTarget))
+				title.scrollTo({ left: 0, behavior: 'smooth' });
+		});
+	},
+
+	isDashboardPage() {
+		const path = (L.env.requestpath || []).join('/');
+
+		return path == '' || path == 'admin' || path == 'admin/dashboard';
+	},
+
+	initDashboardTables() {
+		if (!this.isDashboardPage())
+			return;
+
+		const sync = () => this.updateDashboardTables();
+
+		if (document.readyState == 'loading')
+			document.addEventListener('DOMContentLoaded', sync, { once: true });
+		else
+			sync();
+
+		const target = document.querySelector('#maincontent') || document.body;
+		let queued = false;
+		const observer = new MutationObserver(() => {
+			if (queued)
+				return;
+
+			queued = true;
+			window.setTimeout(() => {
+				queued = false;
+				sync();
+			}, 100);
+		});
+
+		if (target)
+			observer.observe(target, { childList: true, subtree: true });
+	},
+
+	updateDashboardTables() {
+		document.querySelectorAll('.Dashboard, .dashboard-bg.box-s1').forEach(scope => {
+			scope.querySelectorAll('.table').forEach(table => {
+				const rows = Array.prototype.filter.call(table.children, child => child.classList && child.classList.contains('tr'));
+				const headerRow = rows.find(row => row.querySelector('.th'));
+
+				if (!headerRow)
+					return;
+
+				const titles = Array.prototype.map.call(headerRow.children, cell =>
+					cell.classList && cell.classList.contains('th') ? cell.textContent.trim() : '');
+
+				headerRow.classList.add('dashboard-table-titles');
+
+				rows.forEach(row => {
+					if (row === headerRow)
+						return;
+
+					Array.prototype.forEach.call(row.children, (cell, index) => {
+						if (!cell.classList || !cell.classList.contains('td') || !titles[index])
+							return;
+
+						if (!cell.getAttribute('data-title'))
+							cell.setAttribute('data-title', titles[index]);
+					});
+				});
+			});
+		});
+	},
 
 	render(tree) {
 		let node = tree;
@@ -148,7 +236,7 @@ return baseclass.extend({
 			const className = 'tabmenu-item-%s %s'.format(child.name, activeClass);
 
 			ul.appendChild(E('li', { 'class': className }, [
-				E('a', { 'href': L.url(url, child.name) }, [ _(child.title) ] )]));
+				E('a', { 'href': L.url(url, child.name) }, [_(child.title)])]));
 
 			if (isActive)
 				activeNode = child;
@@ -204,7 +292,7 @@ return baseclass.extend({
 
 			const li = E('li', attrs, [
 				E('a', linkAttrs, [
-					_(child.title),
+					E('span', { 'class': 'nav-menu-title' }, [_(child.title)]),
 				]),
 				submenu
 			]);
@@ -230,7 +318,7 @@ return baseclass.extend({
 				: index === 0;
 
 			ul.appendChild(E('li', { 'class': isActive ? 'active' : '' }, [
-				E('a', { 'href': L.url(child.name) }, [ _(child.title) ])
+				E('a', { 'href': L.url(child.name) }, [_(child.title)])
 			]));
 
 			if (isActive)