mirror of
https://github.com/kevinveenbirkenbach/computer-playbook.git
synced 2025-12-03 07:59:42 +00:00
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
This commit is contained in:
35
roles/web-app-littlejs/files/javascript.js
Normal file
35
roles/web-app-littlejs/files/javascript.js
Normal file
@@ -0,0 +1,35 @@
|
||||
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');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user