From 99bf61d65a845010e6ed5c62967d0aa760df90a3 Mon Sep 17 00:00:00 2001
From: ARCANEDEV <arcanedev.maroc@gmail.com>
Date: Mon, 31 Jul 2017 14:12:14 +0100
Subject: [PATCH] Fixing the browse media modal

---
 resources/assets/js/MediaBrowser.vue          | 16 ++++++---
 .../assets/js/Modals/BrowseMediaModal.vue     | 34 +++++++++++++------
 2 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/resources/assets/js/MediaBrowser.vue b/resources/assets/js/MediaBrowser.vue
index c969388..4b4d0bd 100644
--- a/resources/assets/js/MediaBrowser.vue
+++ b/resources/assets/js/MediaBrowser.vue
@@ -54,21 +54,27 @@
 
         data() {
             return {
+                modalId: '',
                 url: ''
             }
         },
 
         mounted() {
+            this.modalId = 'browse-modal-'+Math.random().toString(16).slice(2);
             this.url = this.value;
 
-            window.eventHub.$on(events.MEDIA_MODAL_BROWSER_SELECT, (url) => {
-                this.url = url;
+            window.eventHub.$on(events.MEDIA_MODAL_BROWSER_SELECT, (data) => {
+                if (this.modalId === data.modalId) {
+                    this.url = data.url;
+                }
             });
         },
 
         methods: {
             openBrowserModal() {
-                window.eventHub.$emit(events.MEDIA_MODAL_BROWSER_OPEN);
+                window.eventHub.$emit(events.MEDIA_MODAL_BROWSER_OPEN, {
+                    modalId: this.modalId
+                });
             }
         }
     }
@@ -81,12 +87,12 @@
                    :placeholder="placeholder" :disabled="disabled" :readonly="readonly" :required="required">
 
             <span class="input-group-btn">
-                <button class="btn btn-default" type="button" @click.prevent="openBrowserModal">
+                <button class="btn btn-default" type="button" @click.prevent="openBrowserModal()">
                     <slot>{{ lang.get('actions.browse') }}</slot>
                 </button>
             </span>
         </div>
 
-        <browse-media-modal></browse-media-modal>
+        <browse-media-modal :id="modalId"></browse-media-modal>
     </div>
 </template>
diff --git a/resources/assets/js/Modals/BrowseMediaModal.vue b/resources/assets/js/Modals/BrowseMediaModal.vue
index 97b794f..bbfc3ce 100644
--- a/resources/assets/js/Modals/BrowseMediaModal.vue
+++ b/resources/assets/js/Modals/BrowseMediaModal.vue
@@ -6,6 +6,8 @@
     export default {
         name: 'media-browser-modal',
 
+        props: ['id'],
+
         mixins: [translator],
 
         components: {
@@ -21,18 +23,24 @@
         },
 
         mounted() {
-            this.modal = $('div#media-browser-modal');
+            const that = this;
 
-            this.modal.on('hidden.bs.modal', () => {
-                this.modalOpened = false;
-            });
+            $(() => {
+                that.modal = $(that.$el);
 
-            window.eventHub.$on(events.MEDIA_MODAL_BROWSER_OPEN, () => {
-                this.openModal();
-            });
+                that.modal.on('hidden.bs.modal', () => {
+                    that.modalOpened = false;
+                });
 
-            window.eventHub.$on(events.MEDIA_ITEM_SELECTED, (media) => {
-                this.selected = (media && media.isFile()) ? media : null;
+                window.eventHub.$on(events.MEDIA_MODAL_BROWSER_OPEN, (data) => {
+                    if (that.id === data.modalId) {
+                        that.openModal();
+                    }
+                });
+
+                window.eventHub.$on(events.MEDIA_ITEM_SELECTED, (media) => {
+                    that.selected = (media && media.isFile()) ? media : null;
+                });
             });
         },
 
@@ -58,14 +66,18 @@
 
             selectMedia() {
                 this.closeModal();
-                window.eventHub.$emit(events.MEDIA_MODAL_BROWSER_SELECT, this.selected.url);
+
+                window.eventHub.$emit(events.MEDIA_MODAL_BROWSER_SELECT, {
+                    url: this.selected.url,
+                    modalId: this.id
+                });
             }
         }
     }
 </script>
 
 <template>
-    <div id="media-browser-modal" class="modal fade">
+    <div class="media-browser-modal modal fade">
         <div class="modal-dialog modal-xl">
             <div class="modal-content">
                 <div class="modal-header">