new longpress on files

src/main.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import WebSocketClient from './plugins/wsClient'
 import App from './App.vue'
 import vuetify from './plugins/vuetify'
+import './plugins/longpress';
 import VueResource from 'vue-resource'
 import './components'
 import store from './store'

src/pages/Files.vue

@@ -137,6 +137,7 @@
 
                 <template #item="{ item }">
                     <tr
+                        v-longpress="(e) => showContextMenu(e, item)"
                         @contextmenu="showContextMenu($event, item)"
                         @click="clickRow(item)"
                         class="file-list-cursor"
@@ -545,12 +546,16 @@
                 return '--'
             },
             showContextMenu (e, item) {
-                e.preventDefault()
-                this.contextMenu.shown = true
-                this.contextMenu.x = e.clientX
-                this.contextMenu.y = e.clientY
-                this.contextMenu.item = item
-                this.$nextTick(() => { this.contextMenu.shown = true })
+                if (!this.contextMenu.shown) {
+                    e?.preventDefault();
+                    this.contextMenu.shown = true
+                    this.contextMenu.x = e?.clientX ?? 0
+                    this.contextMenu.y = e?.clientY ?? 0
+                    this.contextMenu.item = item
+                    this.$nextTick(() => {
+                        this.contextMenu.shown = true
+                    })
+                }
             },
             preheat() {
                 if (
@@ -622,12 +627,14 @@
                 this.$socket.sendObj('server.files.delete_directory', { path: this.currentPath+"/"+this.contextMenu.item.filename }, 'files/getDeleteDir');
             },
             clickRow: function(item) {
-                if (!item.isDirectory) {
-                    this.dialogPrintFile.show = true;
-                    this.dialogPrintFile.item = item;
-                } else {
-                    this.currentPath += "/"+item.filename;
-                    this.loadPath();
+                if (!this.contextMenu.shown) {
+                    if (!item.isDirectory) {
+                        this.dialogPrintFile.show = true;
+                        this.dialogPrintFile.item = item;
+                    } else {
+                        this.currentPath += "/" + item.filename;
+                        this.loadPath();
+                    }
                 }
             },
             clickRowGoBack: function() {

src/plugins/longpress.js

@@ -0,0 +1,61 @@
+import Vue from 'vue';
+
+Vue.directive('longpress', {
+    bind: function (el, binding, vNode) {
+        // Make sure expression provided is a function
+        if (typeof binding.value !== 'function') {
+            // Fetch name of component
+            const compName = vNode.context.name
+            // pass warning to console
+            let warn = `[longpress:] provided expression '${binding.expression}' is not a function, but has to be`
+            if (compName) { warn += ` Found in component '${compName}' ` }
+
+            console.warn(warn)
+        }
+
+        // Run Function
+        const handler = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            e.cancelBubble = true;
+            binding.value(e)
+            return false;
+        }
+
+        // Define variable
+        let pressTimer = null
+
+        // Define funtion handlers
+        // Create timeout ( run function after 1s )
+        let start = (e) => {
+            if (e.type === 'click' && e.button !== 0) {
+                return;
+            }
+
+            if (pressTimer === null) {
+                pressTimer = setTimeout(() => {
+                    // Run function
+                    handler(e)
+                }, 1000)
+            }
+        }
+
+        // Cancel Timeout
+        let cancel = () => {
+            // Check if timer has a value or not
+            if (pressTimer !== null) {
+                clearTimeout(pressTimer)
+                pressTimer = null
+            }
+        }
+
+        // Add Event listeners
+        el.addEventListener("mousedown", start);
+        el.addEventListener("touchstart", start);
+        // Cancel timeouts if this events happen
+        el.addEventListener("click", cancel);
+        el.addEventListener("mouseout", cancel);
+        el.addEventListener("touchend", cancel);
+        el.addEventListener("touchcancel", cancel);
+    }
+});