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(() => {
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;
console.log("click");
console.log("target:", e.target);
console.log(e.target instanceof HTMLDivElement);
if (contextMenu.value.show) {
if (e.button != 2 && contextMenu.value.show) {
console.log("context menu is shown, hiding");
removeContextMenu(contextMenu);
}

4
utils/showContextMenu.ts
View file

@ -6,6 +6,9 @@ export default (e: MouseEvent | PointerEvent, sections: ContextMenuSection[]) =>
e.preventDefault();
e.stopPropagation();
const contextMenu = useState<ContextMenuInterface>("contextMenu");
if (contextMenu.value.show) {
removeContextMenu(contextMenu);
} else {
console.log("Menu sections:", sections);
if (sections.length) {
console.log("Showing context menu");
@ -15,4 +18,5 @@ export default (e: MouseEvent | PointerEvent, sections: ContextMenuSection[]) =>
contextMenu.value.sections = sections;
console.log("Showed");
}
}
}