add multi_file_selected option

ctf0 · Apr 18, 2018 · 55b84d4 · 55b84d4
1 parent d47f53b
commit 55b84d4
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -136,19 +136,20 @@ new Vue({
 
 - events
 
-  |       type      |               event-name              |                   description                    |
-  |-----------------|---------------------------------------|--------------------------------------------------|
-  | [JS][js]        |                                       |                                                  |
-  |                 | modal-show                            | when modal is showen                             |
-  |                 | modal-hide                            | when modal is hidden                             |
-  |                 | file_selected *(when inside modal)*   | get selected file url                            |
-  |                 | folder_selected *(when inside modal)* | get selected folder path                         |
-  | [Laravel][lara] |                                       |                                                  |
-  |                 | MMFileUploaded($file_path)            | get uploaded file full [path][path]              |
-  |                 | [MMFileSaved][event]($file_path)      | get saved(edited/link) image full [path][path]   |
-  |                 | MMFileDeleted($file_path, $is_folder) | get deleted file/folder full [path][path]        |
-  |                 | MMFileRenamed($old_path, $new_path)   | get renamed file/folder "old & new" [path][path] |
-  |                 | MMFileMoved($old_path, $new_path)     | get moved file/folder "old & new" [path][path]   |
+  |       type      |                 event-name                |                   description                    |
+  |-----------------|-------------------------------------------|--------------------------------------------------|
+  | [JS][js]        |                                           |                                                  |
+  |                 | modal-show                                | when modal is showen                             |
+  |                 | modal-hide                                | when modal is hidden                             |
+  |                 | file_selected *(when inside modal)*       | get selected file url                            |
+  |                 | multi_file_selected *(when inside modal)* | get bulk selected files url                      |
+  |                 | folder_selected *(when inside modal)*     | get selected folder path                         |
+  | [Laravel][lara] |                                           |                                                  |
+  |                 | MMFileUploaded($file_path)                | get uploaded file full [path][path]              |
+  |                 | [MMFileSaved][event]($file_path)          | get saved(edited/link) image full [path][path]   |
+  |                 | MMFileDeleted($file_path, $is_folder)     | get deleted file/folder full [path][path]        |
+  |                 | MMFileRenamed($old_path, $new_path)       | get renamed file/folder "old & new" [path][path] |
+  |                 | MMFileMoved($old_path, $new_path)         | get moved file/folder "old & new" [path][path]   |
 
 [js]: https://github.com/gocanto/vuemit
 [lara]: https://laravel.com/docs/5.5/events#manually-registering-events

diff --git a/src/resources/assets/js/mixins/media-modal.vue b/src/resources/assets/js/mixins/media-modal.vue
@@ -1,18 +1,48 @@
 <script>
 export default {
     name: 'image-modal',
-    props: ['old', 'item', 'name', 'type'],
+    props: {
+        'item': {
+            type: String,
+            required: true
+        },
+        'name': {
+            type: String,
+            required: true
+        },
+        'old': {
+            type: String,
+            required: false,
+            default: ''
+        },
+        'type': {
+            type: String,
+            required: false,
+            default: ''
+        },
+        'multi': {
+            type: Boolean,
+            required: false,
+            default: false
+        }
+    },
     mounted() {
         if (this.old) {
             this.$parent[this.item] = this.old
         }
 
         EventHub.listen('file_selected', (path) => {
-            if (this.item == this.name && this.type !== 'folder') {
+            if (this.item == this.name && this.type !== 'folder' && !this.multi) {
                 this.$parent[this.item] = path
             }
         })
 
+        EventHub.listen('multi_file_selected', (paths) => {
+            if (this.item == this.name && this.type !== 'folder' && this.multi) {
+                this.$parent[this.item] = paths
+            }
+        })
+
         EventHub.listen('folder_selected', (path) => {
             if (this.item == this.name && this.type == 'folder') {
                 this.$parent[this.item] = path

diff --git a/src/resources/assets/js/modules/watch.js b/src/resources/assets/js/modules/watch.js
@@ -7,7 +7,7 @@ export default {
         },
         selectedFile(val) {
             if (val) {
-                if (this.inModal) {
+                if (this.inModal && !this.isBulkSelecting()) {
                     this.selectedFileIs('folder')
                         ? EventHub.fire('folder_selected', `${this.files.path}/${val.name}`)
                         : EventHub.fire('file_selected', val.path)
@@ -40,6 +40,11 @@ export default {
             }
         },
         bulkItemsCount(val) {
+            if (val > 0 && this.inModal && !this.selectedFileIs('folder')) {
+                let links = this.bulkList.map((e) => e.path)
+                EventHub.fire('multi_file_selected', links)
+            }
+
             if (val > 1 && !this.bulkSelectAll) {
                 this.bulkSelectAll = true
             }