Fixing the browse media modal

ARCANESOFT · Jul 31, 2017 · 99bf61d · 99bf61d
1 parent 18b6eed
commit 99bf61d
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 16 deletions.
diff --git 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
@@ -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">