gorb/frontend
4
0
Fork 0
Code Issues 14 Pull requests 3 Projects Releases Packages 1 Wiki Activity Actions

feat: make custom context menu imitate browser context menu behavior

Browse source
This commit is contained in:
SauceyRed 2025-08-16 15:46:54 +02:00
parent 99ed210d26
commit 839920f124
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7
2 changed files with 23 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

13
app.vue
View file

@ -17,12 +17,21 @@ const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show:
onMounted(() => { onMounted(() => {
loadPreferredThemes() loadPreferredThemes()
document.addEventListener("pointerdown", (e) => { document.addEventListener("contextmenu", (e) => {
if (contextMenu.value.show) {
e.preventDefault();
if (e.target instanceof Element && !e.target.classList.contains("context-menu-item")) {
removeContextMenu(contextMenu);
}
}
});
document.addEventListener("mousedown", (e) => {
if (e.target instanceof HTMLElement && e.target.classList.contains("context-menu-item")) return; if (e.target instanceof HTMLElement && e.target.classList.contains("context-menu-item")) return;
console.log("click"); console.log("click");
console.log("target:", e.target); console.log("target:", e.target);
console.log(e.target instanceof HTMLDivElement); console.log(e.target instanceof HTMLDivElement);
if (contextMenu.value.show) { if (e.button != 2 && contextMenu.value.show) {
console.log("context menu is shown, hiding"); console.log("context menu is shown, hiding");
removeContextMenu(contextMenu); removeContextMenu(contextMenu);
} }

20
utils/showContextMenu.ts
View file

@ -6,13 +6,17 @@ export default (e: MouseEvent | PointerEvent, sections: ContextMenuSection[]) =>
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
const contextMenu = useState<ContextMenuInterface>("contextMenu"); const contextMenu = useState<ContextMenuInterface>("contextMenu");
console.log("Menu sections:", sections); if (contextMenu.value.show) {
if (sections.length) { removeContextMenu(contextMenu);
console.log("Showing context menu"); } else {
contextMenu.value.show = true; console.log("Menu sections:", sections);
contextMenu.value.pointerX = e.clientX; if (sections.length) {
contextMenu.value.pointerY = e.clientY; console.log("Showing context menu");
contextMenu.value.sections = sections; contextMenu.value.show = true;
console.log("Showed"); contextMenu.value.pointerX = e.clientX;
contextMenu.value.pointerY = e.clientY;
contextMenu.value.sections = sections;
console.log("Showed");
}
} }
} }