From 1187787ef38927d1058e083753f73e4a9e3dc0a9 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Thu, 31 Mar 2022 15:52:11 +0100
Subject: [PATCH] :iphone: Trigger section context menu on long-press (#586)

---
 src/components/LinkItems/Collapsable.vue |  8 ++++++--
 src/components/LinkItems/Section.vue     | 18 ++++++++++--------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/LinkItems/Collapsable.vue b/src/components/LinkItems/Collapsable.vue
index 78e95673..bed3bad9 100644
--- a/src/components/LinkItems/Collapsable.vue
+++ b/src/components/LinkItems/Collapsable.vue
@@ -12,7 +12,8 @@
       tabIndex="-1"
     >
     <label :for="sectionKey" class="lbl-toggle" tabindex="-1"
-      @mouseup.right="openContextMenu" @contextmenu.prevent>
+      @mouseup.right="openContextMenu" @contextmenu.prevent
+      @long-press="openContextMenu" v-longPress="500">
       <Icon v-if="icon" :icon="icon" size="small" :url="title" class="section-icon" />
       <h3>{{ title }}</h3>
       <EditModeIcon v-if="isEditMode" @click="openEditModal"
@@ -29,7 +30,7 @@
 </template>
 
 <script>
-
+import longPress from '@/directives/LongPress';
 import { localStorageKeys } from '@/utils/defaults';
 import Icon from '@/components/LinkItems/ItemIcon.vue';
 import EditModeIcon from '@/assets/interface-icons/interactive-editor-edit-mode.svg';
@@ -53,6 +54,9 @@ export default {
     EditModeIcon,
     OpenIcon,
   },
+  directives: {
+    longPress,
+  },
   computed: {
     isEditMode() {
       return this.$store.state.editMode;
diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue
index f62c77eb..3087addd 100644
--- a/src/components/LinkItems/Section.vue
+++ b/src/components/LinkItems/Section.vue
@@ -1,5 +1,5 @@
 <template>
-   <Collapsable
+  <Collapsable
     :title="title"
     :icon="icon"
     :uniqueKey="groupId"
@@ -11,6 +11,7 @@
     :cutToHeight="displayData.cutToHeight"
     @openEditSection="openEditSection"
     @openContextMenu="openContextMenu"
+    :id="`section-outer-${groupId}`"
   >
     <!-- If no items, show message -->
     <div v-if="isEmpty" class="no-items">
@@ -294,13 +295,14 @@ export default {
     },
     /* Open custom context menu, and set position */
     openContextMenu(e) {
-      this.contextMenuOpen = true;
-      if (e && window) {
-        this.contextPos = {
-          posX: e.clientX + window.pageXOffset,
-          posY: e.clientY + window.pageYOffset,
-        };
-      }
+      this.contextMenuOpen = true; // Open context menu
+      // If mouse position not set, use section coordinates
+      const sectionOuterId = `section-outer-${this.groupId}`;
+      const sectionPosition = document.getElementById(sectionOuterId).getBoundingClientRect();
+      this.contextPos = {
+        posX: (e.clientX || sectionPosition.right - 10) + window.pageXOffset,
+        posY: (e.clientY || sectionPosition.top + 30) + window.pageYOffset,
+      };
     },
     /* Hide the right-click context menu */
     closeContextMenu() {