Mediusa/FlockRadar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): organize desktop controls into single-row primary bar with categorized tools dropdown (v21)

Browse Source
This commit is contained in:
Mediusa
2026-09-12 11:41:19 -07:00
parent b21a306790
commit c1228a8908
4 changed files with 305 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/radar.js
+32 -3
View File
@@ -216,14 +216,16 @@
btnAdminClearAllPlaced: document.getElementById('btn-admin-clear-all-placed'),
btnAdminManagePins: document.getElementById('btn-admin-manage-pins'),
// Mobile Driving Controls & Drawer
// Mobile & Desktop Driving Controls & Drawer
driverHud: document.getElementById('driver-hud'),
btnToggleTools: document.getElementById('btn-toggle-tools'),
btnToggleHudDetails: document.getElementById('btn-toggle-hud-details'),
hudDetailsArrow: document.getElementById('hud-details-arrow'),
mapTopControls: document.getElementById('map-top-controls'),
btnCloseTools: document.getElementById('btn-close-tools'),
toolsOverlay: document.getElementById('tools-overlay')
toolsOverlay: document.getElementById('tools-overlay'),
btnDesktopToolsMenu: document.getElementById('btn-desktop-tools-menu'),
controlsToolsMenu: document.getElementById('controls-tools-menu')
};
// --- INITIALIZATION ---
@@ -2487,11 +2489,38 @@
if (el.btnCloseTools) el.btnCloseTools.addEventListener('click', closeToolsDrawer);
if (el.toolsOverlay) el.toolsOverlay.addEventListener('click', closeToolsDrawer);
// Desktop Tools Dropdown Toggle
if (el.btnDesktopToolsMenu && el.controlsToolsMenu) {
el.btnDesktopToolsMenu.addEventListener('click', (e) => {
e.stopPropagation();
const isOpen = el.controlsToolsMenu.classList.toggle('is-open');
el.btnDesktopToolsMenu.classList.toggle('active', isOpen);
});
// Close desktop dropdown on outside click
document.addEventListener('click', (e) => {
if (!el.controlsToolsMenu.contains(e.target) && !el.btnDesktopToolsMenu.contains(e.target)) {
el.controlsToolsMenu.classList.remove('is-open');
el.btnDesktopToolsMenu.classList.remove('active');
}
});
// Auto-close desktop dropdown when any tool item is clicked
el.controlsToolsMenu.querySelectorAll('.btn-tool-item').forEach(btn => {
btn.addEventListener('click', () => {
if (window.innerWidth > 900) {
el.controlsToolsMenu.classList.remove('is-open');
el.btnDesktopToolsMenu.classList.remove('active');
}
});
});
}
// Auto-close tools drawer on mobile when clicking any action button
if (el.mapTopControls) {
el.mapTopControls.querySelectorAll('.btn-hud-action').forEach(btn => {
btn.addEventListener('click', () => {
if (window.innerWidth <= 768) {
if (window.innerWidth <= 900 && btn !== el.btnDesktopToolsMenu) {
closeToolsDrawer();
}
});