📱 Trigger section context menu on long-press (#586)

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;

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() {