dbClick actions

Author: alexusmai

README.md

@@ -89,8 +89,8 @@ Don't forget add a csrf token to head block in your Laravel view and add bootstr
 <!-- CSRF Token -->
 <meta name="csrf-token" content="{{ csrf_token() }}">
 <!-- Example -->
-<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css">
-<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
+<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
 ```
 
 Warning! Package use axios (Promise) - use babel-polyfill for ie11

package.json

@@ -1,6 +1,6 @@
 {
   "name": "laravel-file-manager",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "File manager for Laravel",
   "keywords": [
     "laravel",

src/components/manager/GridView.vue

@@ -28,6 +28,7 @@
                  v-bind:title="file.basename"
                  v-bind:class="{'active': checkSelect('files', file.path)}"
                  v-on:click="selectItem('files', file.path, $event)"
+                 v-on:dblclick="selectAction(file.path, file.extension)"
                  v-on:contextmenu.prevent="contextMenu(file, $event)">
                 <div class="fm-item-icon">
                     <template v-if="thisImage(file.extension)">

src/components/manager/TableView.vue

@@ -66,6 +66,7 @@
                     v-bind:key="`f-${index}`"
                     v-bind:class="{'table-info': checkSelect('files', file.path)}"
                     v-on:click="selectItem('files', file.path, $event)"
+                    v-on:dblclick="selectAction(file.path, file.extension)"
                     v-on:contextmenu.prevent="contextMenu(file, $event)">
                     <td class="fm-content-item unselectable">
                         <i class="far"

src/components/manager/mixins/manager.js

@@ -123,5 +123,58 @@ export default {
       // create event
       EventBus.$emit('contextMenu', event);
     },
+
+    /**
+     * Select and Action
+     * @param path
+     * @param extension
+     */
+    selectAction(path, extension) {
+      // if is set fileCallback
+      if (this.$store.state.fm.fileCallback) {
+        this.$store.dispatch('fm/url', {
+          disk: this.selectedDisk,
+          path,
+        });
+
+        return;
+      }
+
+      // if extension not defined
+      if (!extension) {
+        return;
+      }
+
+      // show, play..
+      if (this.$store.state.fm.settings.imageExtensions
+        .includes(extension.toLowerCase())) {
+        // show image
+        this.$store.commit('fm/modal/setModalState', {
+          modalName: 'Preview',
+          show: true,
+        });
+      } else if (Object.keys(this.$store.state.fm.settings.textExtensions)
+        .includes(extension.toLowerCase())) {
+        // show text file
+        this.$store.commit('fm/modal/setModalState', {
+          modalName: 'TextEdit',
+          show: true,
+        });
+      } else if (this.$store.state.fm.settings.audioExtensions
+        .includes(extension.toLowerCase())) {
+        // show player modal
+        this.$store.commit('fm/modal/setModalState', {
+          modalName: 'AudioPlayer',
+          show: true,
+        });
+      } else if (this.$store.state.fm.settings.videoExtensions
+        .includes(extension.toLowerCase())) {
+        // show player modal
+        this.$store.commit('fm/modal/setModalState', {
+          modalName: 'VideoPlayer',
+          show: true,
+        });
+      }
+    },
   },
 };

src/http/init-axios.js

@@ -14,6 +14,7 @@ function createHeaders() {
     const token = document.head.querySelector('meta[name="csrf-token"]');
 
     if (!token) {
+      // eslint-disable-next-line
       console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
     }
 

src/store/actions.js

@@ -322,7 +322,6 @@ export default {
   },
 
   /**
-   * TODO
    * Get file url
    * @param state
    * @param disk

src/store/settings/store.js

@@ -11,7 +11,7 @@ export default {
   state() {
     return {
       // App version
-      version: '2.0.5',
+      version: '2.0.6',
 
       // this headers will be merged with default headers
       headers: {},