diff --git a/renderer/script.js b/renderer/script.js index e229bc0..d1bbd7f 100644 --- a/renderer/script.js +++ b/renderer/script.js @@ -226,6 +226,9 @@ function createTab(inputUrl) { } }); + // Ensure interacting with the webview closes any open menu popup + attachCloseMenuOnInteract(webview); + webviewsEl.appendChild(webview); tabs.push({ @@ -360,6 +363,9 @@ function convertHomeTabToWebview(tabId, inputUrl, resolvedUrl) { // Add webview to DOM webviewsEl.appendChild(webview); + // Ensure interacting with the webview closes any open menu popup + attachCloseMenuOnInteract(webview); + // Update tab properties tab.isHome = false; tab.webview = webview; @@ -622,20 +628,58 @@ function openSettings() { // Toggle menu dropdown const menuBtn = document.getElementById('menu-btn'); +const menuWrapper = document.querySelector('.menu-wrapper'); -menuBtn.addEventListener('click', () => { +// Open/close on button click; stop propagation so outside-click handler doesn't immediately close it +menuBtn.addEventListener('click', (e) => { + e.stopPropagation(); menuPopup.classList.toggle('hidden'); if (!menuPopup.classList.contains('hidden')) { updateZoomUI(); // ← refresh zoom % whenever menu opens } }); +// Prevent clicks inside the popup from bubbling to the document +if (menuPopup) { + menuPopup.addEventListener('click', (e) => e.stopPropagation()); +} + +// Close when clicking anywhere outside the menu wrapper +document.addEventListener('click', (e) => { + if (!menuPopup || menuPopup.classList.contains('hidden')) return; + if (menuWrapper && !menuWrapper.contains(e.target)) { + menuPopup.classList.add('hidden'); + } +}); + +// Close on Escape key +document.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && menuPopup && !menuPopup.classList.contains('hidden')) { + menuPopup.classList.add('hidden'); + } +}); + +// Also close when interacting with main content areas (covers webview clicks) +const homeContainerEl = document.getElementById('home-container'); +if (webviewsEl) { + webviewsEl.addEventListener('pointerdown', () => { + if (!menuPopup.classList.contains('hidden')) menuPopup.classList.add('hidden'); + }); +} +if (homeContainerEl) { + homeContainerEl.addEventListener('pointerdown', () => { + if (!menuPopup.classList.contains('hidden')) menuPopup.classList.add('hidden'); + }); +} + window.addEventListener('DOMContentLoaded', () => { // Initial boot createTab(); // Handle IPC messages from the static home webview (bookmarks navigation) const staticHome = document.getElementById('home-webview'); if (staticHome) { + // Close menu when interacting with the home webview + attachCloseMenuOnInteract(staticHome); staticHome.addEventListener('ipc-message', (e) => { if (e.channel === 'navigate' && e.args[0]) { urlBox.value = e.args[0]; @@ -757,6 +801,19 @@ function updateZoomUI() { function zoomIn() { ipcRenderer.invoke('zoom-in').then(updateZoomUI); } function zoomOut() { ipcRenderer.invoke('zoom-out').then(updateZoomUI); } +// Utility: close the menu when interacting with a given element (e.g., webview) +function attachCloseMenuOnInteract(el) { + if (!el) return; + const closeIfOpen = () => { + if (menuPopup && !menuPopup.classList.contains('hidden')) { + menuPopup.classList.add('hidden'); + } + }; + el.addEventListener('mousedown', closeIfOpen); + el.addEventListener('pointerdown', closeIfOpen); + el.addEventListener('focus', closeIfOpen, true); +} + // Attempt to load Node modules if available for context-menu actions let fs, remote; try {