From e1b630ae14b39b876a2e3a8d5241c06413b8da96 Mon Sep 17 00:00:00 2001
From: Omar Hussein <omarmohammad1951@gmail.com>
Date: Mon, 1 Jul 2024 02:48:05 -0400
Subject: [PATCH] fix:migrate context menu to vue3

---
 frontend/src/components/ContextMenu.vue       |  54 +++++++
 frontend/src/components/files/ListingItem.vue |  21 +++
 frontend/src/css/context-menu.css             |  16 ++
 frontend/src/css/styles.css                   |   3 +-
 frontend/src/views/files/FileListing.vue      | 138 +++++++++++++-----
 5 files changed, 195 insertions(+), 37 deletions(-)
 create mode 100644 frontend/src/components/ContextMenu.vue
 create mode 100644 frontend/src/css/context-menu.css

diff --git a/frontend/src/components/ContextMenu.vue b/frontend/src/components/ContextMenu.vue
new file mode 100644
index 00000000..b709df08
--- /dev/null
+++ b/frontend/src/components/ContextMenu.vue
@@ -0,0 +1,54 @@
+<template>
+  <div
+    class="context-menu"
+    ref="contextMenu"
+    v-show="show"
+    :style="{
+      top: `${top}px`,
+      left: `${left}px`,
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed, onUnmounted } from "vue";
+
+const emit = defineEmits(["hide"]);
+const props = defineProps<{ show: boolean; pos: { x: number; y: number } }>();
+const contextMenu = ref<HTMLElement | null>(null);
+
+const top = computed(() => {
+  return Math.min(
+    props.pos.y,
+    window.innerHeight - (contextMenu.value?.clientHeight ?? 0)
+  );
+});
+
+const left = computed(() => {
+  return Math.min(
+    props.pos.x,
+    window.innerWidth - (contextMenu.value?.clientWidth ?? 0)
+  );
+});
+
+const hideContextMenu = () => {
+  emit("hide");
+};
+
+watch(
+  () => props.show,
+  (val) => {
+    if (val) {
+      document.addEventListener("click", hideContextMenu);
+    } else {
+      document.removeEventListener("click", hideContextMenu);
+    }
+  }
+);
+
+onUnmounted(() => {
+  document.removeEventListener("click", hideContextMenu);
+});
+</script>
diff --git a/frontend/src/components/files/ListingItem.vue b/frontend/src/components/files/ListingItem.vue
index 75326f4c..362c940c 100644
--- a/frontend/src/components/files/ListingItem.vue
+++ b/frontend/src/components/files/ListingItem.vue
@@ -8,6 +8,7 @@
     @dragover="dragOver"
     @drop="drop"
     @click="itemClick"
+    @contextmenu="contextMenu"
     :data-dir="isDir"
     :data-type="type"
     :aria-label="name"
@@ -220,6 +221,26 @@ const itemClick = (event: Event | KeyboardEvent) => {
   else click(event);
 };
 
+const contextMenu = (event: MouseEvent) => {
+  const to = setTimeout(() => {
+    touches.value = 0;
+  }, 300);
+
+  touches.value++;
+  if (touches.value > 1) return;
+
+  event.preventDefault();
+  if (
+    fileStore.selected.length < 2 ||
+    event.ctrlKey ||
+    fileStore.selected.indexOf(props.index) === -1
+  ) {
+    touches.value--;
+    clearTimeout(to);
+    click(event);
+  }
+};
+
 const click = (event: Event | KeyboardEvent) => {
   if (!singleClick.value && fileStore.selectedCount !== 0)
     event.preventDefault();
diff --git a/frontend/src/css/context-menu.css b/frontend/src/css/context-menu.css
new file mode 100644
index 00000000..825643f6
--- /dev/null
+++ b/frontend/src/css/context-menu.css
@@ -0,0 +1,16 @@
+.context-menu {
+  position: fixed;
+  background: var(--surfacePrimary);
+  min-width: 180px;
+  border: 1px solid var(--borderSecondary);
+  box-shadow: 0 2px 4px var(--borderPrimary);
+  z-index: 1000;
+}
+
+.context-menu .action {
+  display: block;
+  width: 100%;
+  border-radius: 0;
+  display: flex;
+  align-items: center;
+}
\ No newline at end of file
diff --git a/frontend/src/css/styles.css b/frontend/src/css/styles.css
index 19b94b95..024b4886 100644
--- a/frontend/src/css/styles.css
+++ b/frontend/src/css/styles.css
@@ -17,6 +17,7 @@
 @import "./mobile.css";
 @import "./epubReader.css";
 @import "./mdPreview.css";
+@import "./context-menu.css";
 
 /* For testing only
  :focus {
@@ -456,4 +457,4 @@ html[dir="rtl"] .card-content .small + input {
 html[dir="rtl"] .card.floating .card-content .file-list {
   direction: ltr;
   text-align: left;
-}
+}
\ No newline at end of file
diff --git a/frontend/src/views/files/FileListing.vue b/frontend/src/views/files/FileListing.vue
index 8fa48f72..3cda761c 100644
--- a/frontend/src/views/files/FileListing.vue
+++ b/frontend/src/views/files/FileListing.vue
@@ -205,41 +205,92 @@
           </div>
         </div>
 
-        <h2 v-if="fileStore.req?.numDirs ?? false">
-          {{ t("files.folders") }}
-        </h2>
-        <div v-if="fileStore.req?.numDirs ?? false">
-          <item
-            v-for="item in dirs"
-            :key="base64(item.name)"
-            v-bind:index="item.index"
-            v-bind:name="item.name"
-            v-bind:isDir="item.isDir"
-            v-bind:url="item.url"
-            v-bind:modified="item.modified"
-            v-bind:type="item.type"
-            v-bind:size="item.size"
-            v-bind:path="item.path"
-          >
-          </item>
-        </div>
+        <span @contextmenu="showContextMenu">
+          <h2 v-if="fileStore.req?.numDirs ?? false">
+            {{ t("files.folders") }}
+          </h2>
+          <div v-if="fileStore.req?.numDirs ?? false">
+            <item
+              v-for="item in dirs"
+              :key="base64(item.name)"
+              v-bind:index="item.index"
+              v-bind:name="item.name"
+              v-bind:isDir="item.isDir"
+              v-bind:url="item.url"
+              v-bind:modified="item.modified"
+              v-bind:type="item.type"
+              v-bind:size="item.size"
+              v-bind:path="item.path"
+            >
+            </item>
+          </div>
 
-        <h2 v-if="fileStore.req?.numFiles ?? false">{{ t("files.files") }}</h2>
-        <div v-if="fileStore.req?.numFiles ?? false">
-          <item
-            v-for="item in files"
-            :key="base64(item.name)"
-            v-bind:index="item.index"
-            v-bind:name="item.name"
-            v-bind:isDir="item.isDir"
-            v-bind:url="item.url"
-            v-bind:modified="item.modified"
-            v-bind:type="item.type"
-            v-bind:size="item.size"
-            v-bind:path="item.path"
+          <h2 v-if="fileStore.req?.numFiles ?? false">
+            {{ t("files.files") }}
+          </h2>
+          <div v-if="fileStore.req?.numFiles ?? false">
+            <item
+              v-for="item in files"
+              :key="base64(item.name)"
+              v-bind:index="item.index"
+              v-bind:name="item.name"
+              v-bind:isDir="item.isDir"
+              v-bind:url="item.url"
+              v-bind:modified="item.modified"
+              v-bind:type="item.type"
+              v-bind:size="item.size"
+              v-bind:path="item.path"
+            >
+            </item>
+          </div>
+          <context-menu
+            :show="isContextMenuVisible"
+            :pos="contextMenuPos"
+            @hide="hideContextMenu"
           >
-          </item>
-        </div>
+            <action
+              v-if="headerButtons.share"
+              icon="share"
+              :label="$t('buttons.share')"
+              show="share"
+            />
+            <action
+              v-if="headerButtons.rename"
+              icon="mode_edit"
+              :label="$t('buttons.rename')"
+              show="rename"
+            />
+            <action
+              v-if="headerButtons.copy"
+              id="copy-button"
+              icon="content_copy"
+              :label="$t('buttons.copyFile')"
+              show="copy"
+            />
+            <action
+              v-if="headerButtons.move"
+              id="move-button"
+              icon="forward"
+              :label="$t('buttons.moveFile')"
+              show="move"
+            />
+            <action
+              v-if="headerButtons.delete"
+              id="delete-button"
+              icon="delete"
+              :label="$t('buttons.delete')"
+              show="delete"
+            />
+            <action
+              v-if="headerButtons.download"
+              icon="file_download"
+              :label="$t('buttons.download')"
+              @action="download"
+              :counter="fileStore.selectedCount"
+            />
+            <action icon="info" :label="$t('buttons.info')" show="info" />
+          </context-menu>
+        </span>
 
         <input
           style="display: none"
@@ -292,6 +343,7 @@ import HeaderBar from "@/components/header/HeaderBar.vue";
 import Action from "@/components/header/Action.vue";
 import Search from "@/components/Search.vue";
 import Item from "@/components/files/ListingItem.vue";
+import ContextMenu from "@/components/ContextMenu.vue";
 import {
   computed,
   inject,
@@ -310,6 +362,8 @@ const columnWidth = ref<number>(280);
 const dragCounter = ref<number>(0);
 const width = ref<number>(window.innerWidth);
 const itemWeight = ref<number>(0);
+const isContextMenuVisible = ref<boolean>(false);
+const contextMenuPos = ref<{ x: number; y: number }>({ x: 0, y: 0 });
 
 const $showError = inject<IToastError>("$showError")!;
 
@@ -444,7 +498,7 @@ watch(req, () => {
 
 onMounted(() => {
   // Check the columns size for the first time.
-  colunmsResize();
+  columnsResize();
 
   // How much every listing item affects the window height
   setItemWeight();
@@ -638,7 +692,7 @@ const paste = (event: Event) => {
   action(overwrite, rename);
 };
 
-const colunmsResize = () => {
+const columnsResize = () => {
   // Update the columns size based on the window width.
   const items_ = css(["#listing.mosaic .item", ".mosaic#listing .item"]);
   if (items_ === null) return;
@@ -841,7 +895,7 @@ const toggleMultipleSelection = () => {
 };
 
 const windowsResize = throttle(() => {
-  colunmsResize();
+  columnsResize();
   width.value = window.innerWidth;
 
   // Listing element is not displayed
@@ -951,4 +1005,16 @@ const fillWindow = (fit = false) => {
   // Set the number of displayed items
   showLimit.value = showQuantity > totalItems ? totalItems : showQuantity;
 };
+
+const showContextMenu = (event: MouseEvent) => {
+  isContextMenuVisible.value = true;
+  contextMenuPos.value = {
+    x: event.clientX,
+    y: event.clientY,
+  };
+};
+
+const hideContextMenu = () => {
+  isContextMenuVisible.value = false;
+};
 </script>