Cleanup unused queue-track-menu
This commit is contained in:
parent
f3b57497d9
commit
e6cd218df4
3 changed files with 5 additions and 91 deletions
|
|
@ -55,11 +55,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="queue-track-menu" id="queue-track-menu">
|
||||
<ul>
|
||||
<li data-action="remove">Remove from Queue</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="sidebar-overlay"></div>
|
||||
|
||||
<div class="app-container">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
18
styles.css
18
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);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue