feat: improve context menu handling in app.vue

This commit is contained in:
SauceyRed 2025-07-11 00:05:20 +02:00
parent 64b10b48aa
commit 069d3392d2
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7

29
app.vue
View file

@ -6,7 +6,7 @@
</template>
<script lang="ts" setup>
import { ContextMenu } from '#components';
import ContextMenu from '~/components/ContextMenu.vue';
import { render } from 'vue';
const banner = useState("banner", () => false);
@ -17,34 +17,23 @@ onMounted(() => {
contextMenuHandler(e);
});
document.addEventListener("mousedown", (e) => {
if (e.target instanceof HTMLDivElement && e.target.closest("#context-menu")) return;
console.log("click");
console.log("target:", e.target);
console.log(e.target instanceof HTMLDivElement);
if (e.target instanceof HTMLDivElement) {
const classes = e.target.classList;
console.log(classes);
if (classes.contains("message-data") || classes.contains("message-metadata") || classes.contains("message-text")) {
const closest = e.target.closest("div.message") as HTMLDivElement;
console.log("message ID:", closest.dataset.messageId);
}
}
const contextMenu = document.getElementById("context-menu");
if (contextMenu) {
contextMenu.remove();
removeContextMenu();
if (e.target instanceof HTMLElement && e.target.classList.contains("message-text") && e.target.contentEditable) {
e.target.contentEditable = "false";
}
});
});
function contextMenuHandler(e: MouseEvent) {
e.preventDefault();
console.log("Opened context menu");
console.log("Rendering new context menu");
const menuContainer = document.createElement("div");
menuContainer.id = "context-menu";
document.body.appendChild(menuContainer);
const contextMenu = h(ContextMenu, { cursorX: e.clientX, cursorY: e.clientY });
render(contextMenu, menuContainer);
console.log("Rendered");
//console.log("Opened context menu");
//createContextMenu(e, [
// { name: "Wah", callback: () => { return } }
//]);
}
</script>