Files
computer-playbook/roles/web-app-littlejs/files/javascript.js
Kevin Veen-Birkenbach 6fda85788a feat(web-app-littlejs): add JS submenu support, left-expand menus, improve headline & cleanup examples
This update introduces full JavaScript-based nested submenu handling for the
Apps menu, enabling reliable click-based toggling without interference from
Bootstrap’s native dropdown logic. Submenus now expand to the left via custom
CSS and no longer require dropstart or data-bs-toggle attributes.

Changes include:
- Add javascript feature flag and enable inline eval in CSP
- Add javascript.js implementing custom submenu toggle logic
- Add CSS rules for left-expanding nested dropdown menus
- Replace hardcoded headline with LITTLEJS_HEADLINE variable
- Modernize “Play” → “Start” labels in cards
- Remove unused/legacy examples from examples.yml (commented out, not deleted)
- Cleanup nav_top.html.j2 to remove conflicting Bootstrap attributes

Conversation reference:
https://chatgpt.com/share/6928b4c7-19ec-800f-a087-9af304ef4ed9
2025-11-27 21:30:15 +01:00

36 lines
1.1 KiB
JavaScript

document.addEventListener('DOMContentLoaded', function () {
// Toggle second-level menus on click
const submenuTriggers = document.querySelectorAll('.dropdown-submenu > a.dropdown-toggle');
submenuTriggers.forEach(function (trigger) {
trigger.addEventListener('click', function (e) {
e.preventDefault();
e.stopPropagation();
const submenu = this.nextElementSibling;
if (!submenu) return;
// Close other open submenus on the same level
const parentMenu = this.closest('.dropdown-menu');
if (parentMenu) {
parentMenu.querySelectorAll('.dropdown-menu.show').forEach(function (menu) {
if (menu !== submenu) {
menu.classList.remove('show');
}
});
}
submenu.classList.toggle('show');
});
});
// When the main Apps dropdown closes, close all submenus
document.querySelectorAll('.navbar .dropdown').forEach(function (dropdown) {
dropdown.addEventListener('hide.bs.dropdown', function () {
this.querySelectorAll('.dropdown-menu.show').forEach(function (menu) {
menu.classList.remove('show');
});
});
});
});