Fix #1 - Fix file selection after adding one through the file manager…

…'s iframe
Arkounay · Nov 10, 2021 · be85c3c · be85c3c
1 parent 37a139f
commit be85c3c
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 14 deletions.
diff --git a/Resources/assets/dist/media_controller.js b/Resources/assets/dist/media_controller.js
@@ -51,6 +51,8 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
 
 var _dragCounter = /*#__PURE__*/new WeakMap();
 
+var _iframeTriggered = /*#__PURE__*/new WeakMap();
+
 var _pathUpdateEventListener = /*#__PURE__*/new WeakSet();
 
 var _toggleProgress = /*#__PURE__*/new WeakSet();
@@ -92,6 +94,11 @@ var _default = /*#__PURE__*/function (_Controller) {
       value: 0
     });
 
+    _classPrivateFieldInitSpec(_assertThisInitialized(_this), _iframeTriggered, {
+      writable: true,
+      value: false
+    });
+
     return _this;
   }
 
@@ -186,15 +193,26 @@ var _default = /*#__PURE__*/function (_Controller) {
       var _this3 = this;
 
       var iframe = this.fileManagerModalTarget.querySelector('iframe');
-      iframe.addEventListener('load', function () {
-        iframe.contentDocument.querySelectorAll('.select').forEach(function (item) {
-          item.addEventListener('click', function (e) {
-            _this3.pathValue = e.target.dataset.path;
 
-            _this3.fileManagerModalTarget.querySelector('.modal-footer button').click();
-          });
+      if (!_classPrivateFieldGet(this, _iframeTriggered)) {
+        _classPrivateFieldSet(this, _iframeTriggered, true);
+
+        iframe.addEventListener('load', function () {
+          // equivalent of jquery's $iframe.contents().on('click', '.select', handler);
+          var iframeContent = iframe.contentDocument || iframe.contentWindow.document;
+          var self = _this3;
+          iframeContent.addEventListener('click', function (e) {
+            for (var target = e.target; target && target !== this; target = target.parentNode) {
+              if (target.matches('.select')) {
+                self.pathValue = e.target.dataset.path;
+                self.fileManagerModalTarget.querySelector('.modal-footer button').click();
+                break;
+              }
+            }
+          }, false);
         });
-      });
+      }
+
       iframe.src = iframe.dataset.src;
     }
   }, {

diff --git a/Resources/assets/src/media_controller.js b/Resources/assets/src/media_controller.js
@@ -8,6 +8,7 @@ export default class extends Controller {
     static values = {path: String};
 
     #dragCounter = 0;
+    #iframeTriggered = false;
 
     connect() {
         this.element[this.identifier] = this;
@@ -177,14 +178,23 @@ export default class extends Controller {
 
     openFileManager() {
         const iframe = this.fileManagerModalTarget.querySelector('iframe');
-        iframe.addEventListener('load', () => {
-            iframe.contentDocument.querySelectorAll('.select').forEach(item => {
-                item.addEventListener('click', e => {
-                    this.pathValue = e.target.dataset.path;
-                    this.fileManagerModalTarget.querySelector('.modal-footer button').click();
-                });
+        if (!this.#iframeTriggered) {
+            this.#iframeTriggered = true;
+            iframe.addEventListener('load', () => {
+                // equivalent of jquery's $iframe.contents().on('click', '.select', handler);
+                const iframeContent = iframe.contentDocument || iframe.contentWindow.document;
+                const self = this;
+                iframeContent.addEventListener('click', function(e) {
+                    for (let target = e.target; target && target !== this; target = target.parentNode) {
+                        if (target.matches('.select')) {
+                            self.pathValue = e.target.dataset.path;
+                            self.fileManagerModalTarget.querySelector('.modal-footer button').click();
+                            break;
+                        }
+                    }
+                }, false);
             });
-        });
+        }
         iframe.src = iframe.dataset.src;
     }