Improve openDialog method initialization

app/code/Magento/Ui/view/base/web/js/form/element/image-uploader.js

@@ -81,7 +81,15 @@ define([
                 openDialogUrl += '&current_tree_path=' + Base64.mageEncode(this.mediaGallery.initialOpenSubpath);
             }
 
-            browser.openDialog(openDialogUrl, null, null, this.mediaGallery.openDialogTitle);
+            browser.openDialog(
+                openDialogUrl,
+                null,
+                null,
+                this.mediaGallery.openDialogTitle,
+                {
+                    targetElementId: $buttonEl.attr('id')
+                }
+            );
         },
 
         /**

dev/tests/js/jasmine/tests/app/code/Magento/Ui/base/js/form/element/image-uploader.test.js

@@ -78,7 +78,10 @@ define([
                         '?isAjax=true&current_tree_path=d3lzaXd5Zw,,',
                     null,
                     null,
-                    'Hello world'
+                    'Hello world',
+                    {
+                        targetElementId: 'theTargetId'
+                    }
                 );
             });
         });

dev/tests/js/jasmine/tests/lib/mage/browser.test.js

@@ -37,6 +37,7 @@ define([
                          */
                         done: function () {
                             obj.targetElementId = 1;
+                            obj.modalLoaded = true;
                         }
                     };
                 });
@@ -58,8 +59,8 @@ define([
                         }
                     };
                 });
-            obj.openDialog('instance/url', 100, 100, 'title', undefined);
-            obj.openDialog('instance/url', 100, 100, 'title', undefined);
+            obj.openDialog('instance/url/target_element_id/YDW2424/', 100, 100, 'title', undefined);
+            obj.openDialog('instance/target_element_id/Y45GDRg/', 100, 100, 'title', undefined);
             expect($.ajax.calls.count()).toBe(1);
         });
     });

lib/internal/Magento/Framework/Data/Form/Element/Editor.php

@@ -286,15 +286,19 @@ protected function _getPluginButtonsHtml($visible = true)
 
         // Button to media images insertion window
         if ($this->getConfig('add_images')) {
+            $htmlId = $this->getHtmlId();
+            $url = $this->getConfig('files_browser_window_url')
+                . 'target_element_id/'
+                . $htmlId
+                . '/'
+                . (null !== $this->getConfig('store_id')
+                    ? 'store/' . $this->getConfig('store_id') . '/"'
+                    : '');
             $buttonsHtml .= $this->_getButtonHtml(
                 [
                     'title' => $this->translate('Insert Image...'),
-                    'onclick' => "MediabrowserUtility.openDialog('"
-                        . $this->getConfig('files_browser_window_url')
-                        . "target_element_id/" . $this->getHtmlId() . "/"
-                        . (null !== $this->getConfig('store_id') ? 'store/'
-                            . $this->getConfig('store_id') . '/' : '')
-                        . "')",
+                    'onclick' => 'MediabrowserUtility.openDialog(\'' . $url
+                        . '\', null, null, null, { \'targetElementId\': \'' . $htmlId . '\' })',
                     'class' => 'action-add-image plugin',
                     'style' => $visible ? '' : 'display:none',
                 ]
@@ -496,13 +500,13 @@ protected function getInlineJs($jsSetupObject, $forceLoad)
         $jsString = '
                 <script type="text/javascript">
                 //<![CDATA[
-                window.tinyMCE_GZ = window.tinyMCE_GZ || {}; 
+                window.tinyMCE_GZ = window.tinyMCE_GZ || {};
                 window.tinyMCE_GZ.loaded = true;
                 require([
-                "jquery", 
-                "mage/translate", 
-                "mage/adminhtml/events", 
-                "mage/adminhtml/wysiwyg/tiny_mce/setup", 
+                "jquery",
+                "mage/translate",
+                "mage/adminhtml/events",
+                "mage/adminhtml/wysiwyg/tiny_mce/setup",
                 "mage/adminhtml/wysiwyg/widget"
                 ], function(jQuery){' .
             "\n" .

lib/web/mage/adminhtml/browser.js

@@ -20,6 +20,7 @@ define([
     window.MediabrowserUtility = {
         windowId: 'modal_dialog_message',
         modalLoaded: false,
+        targetElementId: false,
 
         /**
          * @return {Number}
@@ -50,56 +51,54 @@ define([
          */
         openDialog: function (url, width, height, title, options) {
             var windowId = this.windowId,
-                content = '<div class="popup-window" id="' + windowId + '"></div>',
-                self = this;
+                content = '<div class="popup-window" id="' + windowId + '"></div>';
 
-            if (options &&
-                self.targetElementId &&
-                self.targetElementId === options.targetElementId) {
-                if (typeof options.closed !== 'undefined') {
+            if (this.modalLoaded) {
+
+                if (!_.isUndefined(options)) {
                     this.modal.modal('option', 'closed', options.closed);
                 }
-                this.modal.modal('openModal');
 
-                return;
-            } else if (_.isUndefined(options) &&
-                    self.modalLoaded === true &&
-                    self.targetElementId === url
-            ) {
                 this.modal.modal('openModal');
+                this.setTargetElementId(options, url);
+                $(window).trigger('reload.MediaGallery');
 
                 return;
             }
 
-            if (this.modal) {
-                this.modal.html($(content).html());
+            this.modal = $(content).modal($.extend({
+                title:  title || 'Insert File...',
+                modalClass: 'magento',
+                type: 'slide',
+                buttons: []
+            }, options));
 
-                if (options && typeof options.closed !== 'undefined') {
-                    this.modal.modal('option', 'closed', options.closed);
-                }
-            } else {
-                this.modal = $(content).modal($.extend({
-                    title:  title || 'Insert File...',
-                    modalClass: 'magento',
-                    type: 'slide',
-                    buttons: []
-                }, options));
-            }
             this.modal.modal('openModal');
+
             $.ajax({
                 url: url,
                 type: 'get',
                 context: $(this),
                 showLoader: true
 
             }).done(function (data) {
-                self.modal.html(data).trigger('contentUpdated');
-                self.modalLoaded = true;
-                self.targetElementId = options ?
-                           options.targetElementId
-                           : url;
-            });
+                this.modal.html(data).trigger('contentUpdated');
+                this.modalLoaded = true;
+                this.setTargetElementId(options, url);
+            }.bind(this));
+
+        },
 
+        /**
+         * Setter for targetElementId property
+         *
+         * @param {Object} options
+         * @param {String} url
+         */
+        setTargetElementId: function (options, url) {
+            this.targetElementId = options && options.targetElementId ?
+                options.targetElementId
+                : url.match(/\/target_element_id\/([\s\S].*?)\//)[1];
         },
 
         /**
@@ -113,7 +112,6 @@ define([
     $.widget('mage.mediabrowser', {
         eventPrefix: 'mediabrowser',
         options: {
-            targetElementId: null,
             contentsUrl: null,
             onInsertUrl: null,
             newFolderUrl: null,
@@ -140,7 +138,8 @@ define([
                 'click #delete_files': 'deleteFiles',
                 'click #insert_files': 'insertSelectedFiles',
                 'fileuploaddone': '_uploadDone',
-                'click [data-row=breadcrumb]': 'selectFolder'
+                'click [data-row=breadcrumb]': 'selectFolder',
+                'reload.MediaGallery': 'reload'
             });
             this.activeNode = null;
             //tree dont use event bubbling
@@ -322,16 +321,18 @@ define([
          * return {HTMLElement|null}
          */
         getTargetElement: function () {
-            var opener, targetElementId;
+            var opener,
+                targetElementId,
+                mediaBrowser = window.MediabrowserUtility;
 
-            if (typeof wysiwyg != 'undefined' && wysiwyg.get(this.options.targetElementId)) {
+            if (!_.isUndefined(wysiwyg) && wysiwyg.get(mediaBrowser.targetElementId)) {
                 opener = this.getMediaBrowserOpener() || window;
-                targetElementId = tinyMceEditors.get(this.options.targetElementId).getMediaBrowserTargetElementId();
+                targetElementId = tinyMceEditors.get(mediaBrowser.targetElementId).getMediaBrowserTargetElementId();
 
                 return $(opener.document.getElementById(targetElementId));
             }
 
-            return $('#' + this.options.targetElementId);
+            return $('#' + mediaBrowser.targetElementId);
         },
 
         /**
@@ -340,12 +341,12 @@ define([
          * return {Object|null}
          */
         getMediaBrowserOpener: function () {
-            if (typeof wysiwyg != 'undefined' &&
-                wysiwyg.get(this.options.targetElementId) &&
-                typeof tinyMceEditors != 'undefined' &&
-                !tinyMceEditors.get(this.options.targetElementId).getMediaBrowserOpener().closed
+            var targetElementId = window.MediabrowserUtility.targetElementId;
+
+            if (!_.isUndefined(wysiwyg) && wysiwyg.get(targetElementId) && !_.isUndefined(tinyMceEditors) &&
+                !tinyMceEditors.get(targetElementId).getMediaBrowserOpener().closed
             ) {
-                return tinyMceEditors.get(this.options.targetElementId).getMediaBrowserOpener();
+                return tinyMceEditors.get(targetElementId).getMediaBrowserOpener();
             }
 
             return null;