vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

FIX: context menu overflow on screen edges

Browse source
This commit is contained in:
Julien Maille 2025-12-23 12:53:56 +01:00
parent ed2d9425eb
commit 8ef6ecb9e3
1 changed files with 41 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
js/events.js
View file

@ -275,9 +275,7 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
contextTrack = trackDataStore.get(trackItem); contextTrack = trackDataStore.get(trackItem);
if (contextTrack) { if (contextTrack) {
const rect = menuBtn.getBoundingClientRect(); const rect = menuBtn.getBoundingClientRect();
contextMenu.style.top = `${rect.bottom + 5}px`; positionMenu(contextMenu, rect.left, rect.bottom + 5, rect);
contextMenu.style.left = `${rect.left}px`;
contextMenu.style.display = 'block';
} }
} }
return; return;
@ -307,9 +305,7 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
contextTrack = trackDataStore.get(trackItem); contextTrack = trackDataStore.get(trackItem);
if (contextTrack) { if (contextTrack) {
contextMenu.style.top = `${e.pageY}px`; positionMenu(contextMenu, e.pageX, e.pageY);
contextMenu.style.left = `${e.pageX}px`;
contextMenu.style.display = 'block';
} }
} }
}); });
@ -387,3 +383,42 @@ function formatTime(seconds) {
const s = Math.floor(seconds % 60); const s = Math.floor(seconds % 60);
return `${m}:${String(s).padStart(2, '0')}`; return `${m}:${String(s).padStart(2, '0')}`;
} }
function positionMenu(menu, x, y, anchorRect = null) {
// Temporarily show to measure dimensions
menu.style.visibility = 'hidden';
menu.style.display = 'block';
const menuWidth = menu.offsetWidth;
const menuHeight = menu.offsetHeight;
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
let left = x;
let top = y;
if (anchorRect) {
// Adjust horizontal position if it overflows right
if (left + menuWidth > windowWidth - 10) { // 10px buffer
left = anchorRect.right - menuWidth;
if (left < 10) left = 10;
}
// Adjust vertical position if it overflows bottom
if (top + menuHeight > windowHeight - 10) {
top = anchorRect.top - menuHeight - 5;
}
} else {
// Adjust horizontal position if it overflows right
if (left + menuWidth > windowWidth - 10) {
left = windowWidth - menuWidth - 10;
}
// Adjust vertical position if it overflows bottom
if (top + menuHeight > windowHeight - 10) {
top = y - menuHeight;
}
}
menu.style.top = `${top}px`;
menu.style.left = `${left}px`;
menu.style.visibility = 'visible';
}