feat: improve context menu handling in app.vue
This commit is contained in:
parent
64b10b48aa
commit
069d3392d2
1 changed files with 9 additions and 20 deletions
29
app.vue
29
app.vue
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue