diff --git a/index.html b/index.html index 894a637..e1d58d1 100644 --- a/index.html +++ b/index.html @@ -55,11 +55,7 @@ -
- -
+
diff --git a/js/ui-interactions.js b/js/ui-interactions.js index 88d235c..851286a 100644 --- a/js/ui-interactions.js +++ b/js/ui-interactions.js @@ -126,78 +126,6 @@ export function initializeUIInteractions(player, api) { }); }); - queueList.querySelectorAll('.track-menu-btn').forEach(btn => { - btn.addEventListener('click', (e) => { - e.stopPropagation(); - const index = parseInt(btn.dataset.trackIndex); - showQueueTrackMenu(e, index); - }); - }); - } - - function showQueueTrackMenu(e, trackIndex) { - const menu = document.getElementById('queue-track-menu'); - menu.style.top = `${e.pageY}px`; - menu.style.left = `${e.pageX}px`; - menu.classList.add('show'); - menu.dataset.trackIndex = trackIndex; - positionContextMenu(menu, e.pageX, e.pageY, true); - document.addEventListener('click', hideQueueTrackMenu); - } - - function hideQueueTrackMenu() { - const menu = document.getElementById('queue-track-menu'); - menu.classList.remove('show'); - document.removeEventListener('click', hideQueueTrackMenu); - } - - document.getElementById('queue-track-menu').addEventListener('click', (e) => { - e.stopPropagation(); - const action = e.target.dataset.action; - const menu = document.getElementById('queue-track-menu'); - const trackIndex = parseInt(menu.dataset.trackIndex); - - if (action === 'remove') { - player.removeFromQueue(trackIndex); - renderQueue(); - } - - hideQueueTrackMenu(); - }); - - function positionContextMenu(menu, x, y, preferLeft = false) { - menu.style.display = 'block'; - menu.style.visibility = 'hidden'; - - const menuRect = menu.getBoundingClientRect(); - const viewportWidth = window.innerWidth; - const viewportHeight = window.innerHeight; - - let finalX = x; - let finalY = y; - - if (preferLeft || (x + menuRect.width > viewportWidth)) { - finalX = x - menuRect.width; - if (finalX < 0) { - finalX = Math.min(x, viewportWidth - menuRect.width - 10); - } - } - - if (finalX < 10) finalX = 10; - if (finalX + menuRect.width > viewportWidth - 10) { - finalX = viewportWidth - menuRect.width - 10; - } - if (y + menuRect.height > viewportHeight) { - finalY = Math.max(10, y - menuRect.height); - } - if (finalY + menuRect.height > viewportHeight - 10) { - finalY = viewportHeight - menuRect.height - 10; - } - if (finalY < 10) finalY = 10; - - menu.style.left = `${finalX}px`; - menu.style.top = `${finalY}px`; - menu.style.visibility = 'visible'; } // Make renderQueue available globally for other modules diff --git a/styles.css b/styles.css index 3cda4b7..c176aa8 100644 --- a/styles.css +++ b/styles.css @@ -1243,8 +1243,7 @@ input:checked + .slider::before { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } -#context-menu, -.queue-track-menu { +#context-menu { display: none; position: fixed; background-color: var(--card); @@ -1256,19 +1255,11 @@ input:checked + .slider::before { min-width: 160px; } -.queue-track-menu.show { - display: block; - z-index: 1001; - min-width: 120px; -} - -#context-menu ul, -.queue-track-menu ul { +#context-menu ul { list-style: none; } -#context-menu li, -.queue-track-menu li { +#context-menu li { padding: 0.5rem 0.75rem; cursor: pointer; border-radius: 4px; @@ -1276,8 +1267,7 @@ input:checked + .slider::before { font-size: 0.9rem; } -#context-menu li:hover, -.queue-track-menu li:hover { +#context-menu li:hover { background-color: var(--secondary); }