summaryrefslogtreecommitdiff
path: root/packages/client/src/components/MkContextMenu.vue
diff options
context:
space:
mode:
Diffstat (limited to 'packages/client/src/components/MkContextMenu.vue')
-rw-r--r--packages/client/src/components/MkContextMenu.vue85
1 files changed, 0 insertions, 85 deletions
diff --git a/packages/client/src/components/MkContextMenu.vue b/packages/client/src/components/MkContextMenu.vue
deleted file mode 100644
index cfc9502b41..0000000000
--- a/packages/client/src/components/MkContextMenu.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-<transition :name="$store.state.animation ? 'fade' : ''" appear>
- <div ref="rootEl" class="nvlagfpb" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
- <MkMenu :items="items" :align="'left'" @close="$emit('closed')"/>
- </div>
-</transition>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onBeforeUnmount } from 'vue';
-import MkMenu from './MkMenu.vue';
-import { MenuItem } from './types/menu.vue';
-import contains from '@/scripts/contains';
-import * as os from '@/os';
-
-const props = defineProps<{
- items: MenuItem[];
- ev: MouseEvent;
-}>();
-
-const emit = defineEmits<{
- (ev: 'closed'): void;
-}>();
-
-let rootEl = $ref<HTMLDivElement>();
-
-let zIndex = $ref<number>(os.claimZIndex('high'));
-
-onMounted(() => {
- let left = props.ev.pageX + 1; // 間違って右ダブルクリックした場合に意図せずアイテムがクリックされるのを防ぐため + 1
- let top = props.ev.pageY + 1; // 間違って右ダブルクリックした場合に意図せずアイテムがクリックされるのを防ぐため + 1
-
- const width = rootEl.offsetWidth;
- const height = rootEl.offsetHeight;
-
- if (left + width - window.pageXOffset > window.innerWidth) {
- left = window.innerWidth - width + window.pageXOffset;
- }
-
- if (top + height - window.pageYOffset > window.innerHeight) {
- top = window.innerHeight - height + window.pageYOffset;
- }
-
- if (top < 0) {
- top = 0;
- }
-
- if (left < 0) {
- left = 0;
- }
-
- rootEl.style.top = `${top}px`;
- rootEl.style.left = `${left}px`;
-
- for (const el of Array.from(document.querySelectorAll('body *'))) {
- el.addEventListener('mousedown', onMousedown);
- }
-});
-
-onBeforeUnmount(() => {
- for (const el of Array.from(document.querySelectorAll('body *'))) {
- el.removeEventListener('mousedown', onMousedown);
- }
-});
-
-function onMousedown(evt: Event) {
- if (!contains(rootEl, evt.target) && (rootEl !== evt.target)) emit('closed');
-}
-</script>
-
-<style lang="scss" scoped>
-.nvlagfpb {
- position: absolute;
-}
-
-.fade-enter-active, .fade-leave-active {
- transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
- transform-origin: left top;
-}
-
-.fade-enter-from, .fade-leave-to {
- opacity: 0;
- transform: scale(0.9);
-}
-</style>