[TASK] Open the elementbrowser always in modal window 73/54073/12
authorBenjamin Kott <benjamin.kott@wfp2.com>
Sat, 9 Sep 2017 17:19:34 +0000 (19:19 +0200)
committerTymoteusz Motylewski <t.motylewski@gmail.com>
Sun, 10 Sep 2017 10:13:06 +0000 (12:13 +0200)
Resolves: #82427
Releases: master
Change-Id: Ia0e5f34a0f8bb29a179f1e9f7b90bb1b540b57f7
Reviewed-on: https://review.typo3.org/54073
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Andreas Fernandez <typo3@scripting-base.de>
Tested-by: Andreas Fernandez <typo3@scripting-base.de>
Reviewed-by: Tymoteusz Motylewski <t.motylewski@gmail.com>
Tested-by: Tymoteusz Motylewski <t.motylewski@gmail.com>
typo3/sysext/backend/Resources/Public/JavaScript/FormEngine.js
typo3/sysext/backend/Resources/Public/JavaScript/Modal.js
typo3/sysext/core/Tests/Acceptance/Backend/Formhandler/ElementsGroupCest.php
typo3/sysext/recordlist/Resources/Public/JavaScript/ElementBrowser.js

index 4a01cbb..3b12573 100644 (file)
@@ -66,19 +66,17 @@ define(['jquery',
        // functions to connect the db/file browser with this document and the formfields on it!
 
        /**
-        * opens a popup window with the element browser (browser.php)
+        * Opens a popup window with the element browser (browser.php)
         *
         * @param {String} mode can be "db" or "file"
         * @param {String} params additional params for the browser window
-        * @param {Number} width width of the window
-        * @param {Number} height height of the window
         */
-       FormEngine.openPopupWindow = setFormValueOpenBrowser = function(mode, params, width, height) {
-               var url = FormEngine.browserUrl + '&mode=' + mode + '&bparams=' + params;
-               width = width ? width : TYPO3.settings.Popup.PopupWindow.width;
-               height = height ? height : TYPO3.settings.Popup.PopupWindow.height;
-               FormEngine.openedPopupWindow = window.open(url, 'Typo3WinBrowser', 'height=' + height + ',width=' + width + ',status=0,menubar=0,resizable=1,scrollbars=1');
-               FormEngine.openedPopupWindow.focus();
+       FormEngine.openPopupWindow = setFormValueOpenBrowser = function(mode, params) {
+               Modal.advanced({
+                       type: Modal.types.iframe,
+                       content: FormEngine.browserUrl + '&mode=' + mode + '&bparams=' + params,
+                       size: Modal.sizes.large
+               });
        };
 
        /**
index f383dca..d448893 100644 (file)
@@ -288,7 +288,7 @@ define(['jquery',
                        currentModal.find(Modal.identifiers.body).html('<p class="loadmessage"><i class="fa fa-spinner fa-spin fa-5x "></i></p>');
                } else if (type === 'iframe') {
                        currentModal.find(Modal.identifiers.body).append(
-                               $('<iframe />', { src: content, 'class': 'modal-iframe t3js-modal-iframe' })
+                               $('<iframe />', { src: content, 'name': 'modal_frame', 'class': 'modal-iframe t3js-modal-iframe' })
                        );
                        currentModal.find(Modal.identifiers.iframe).on('load',function() {
                                currentModal.find(Modal.identifiers.title).text(
index e7b2165..1a4f25c 100644 (file)
@@ -14,7 +14,6 @@ namespace TYPO3\CMS\Core\Tests\Acceptance\Backend\Formhandler;
  * The TYPO3 project - inspiring people to share!
  */
 
-use Facebook\WebDriver\Exception\NoSuchWindowException;
 use TYPO3\TestingFramework\Core\Acceptance\Step\Backend\Admin;
 use TYPO3\TestingFramework\Core\Acceptance\Support\Page\PageTree;
 
@@ -98,15 +97,12 @@ class ElementsGroupCest
 
         $I->seeNumberOfElements('select[data-formengine-input-name="data[tx_styleguide_elements_group][1][group_db_1]"] option', 4);
         $I->click($formWizardsWrap . ' div:nth-of-type(4) > div > a:nth-of-type(1)');
-        $I->switchToWindow('Typo3WinBrowser');
 
-        try {
-            $I->amGoingTo('click + button to select record and close DB-Browser');
-            $I->click('#recordlist-be_users > div:nth-child(1) > table:nth-child(1) > tbody:nth-child(2) > tr:nth-child(1) > td:nth-child(2) > span:nth-child(1) > a:nth-child(1)');
-            $I->closeTab();
-        } catch (NoSuchWindowException $e) {
-            // missing focus by auto close window
-        }
+        $I->switchToWindow();
+        $I->switchToIFrame('modal_frame');
+
+        $I->amGoingTo('click + button to select record and close DB-Browser');
+        $I->click('#recordlist-be_users > div:nth-child(1) > table:nth-child(1) > tbody:nth-child(2) > tr:nth-child(1) > td:nth-child(2) > span:nth-child(1) > a:nth-child(1)');
 
         $I->switchToWindow();
         $I->switchToIFrame('list_frame');
@@ -123,18 +119,14 @@ class ElementsGroupCest
 
         $I->seeNumberOfElements('select[data-formengine-input-name="data[tx_styleguide_elements_group][1][group_db_1]"] option', 4);
         $I->click($formWizardsWrap . ' div:nth-of-type(4) > div > a:nth-of-type(1)');
-        $I->switchToWindow('Typo3WinBrowser');
+
+        $I->switchToWindow();
+        $I->switchToIFrame('modal_frame');
 
         $I->amGoingTo('click record + in DB-Browser');
         $I->click('#recordlist-be_groups > div:nth-child(1) > table:nth-child(1) > tbody:nth-child(2) > tr:nth-child(1) > td:nth-child(2) > span:nth-child(1) > a:nth-child(1)');
-
-        try {
-            $I->amGoingTo('click + button to select record and close DB-Browser');
-            $I->click('#recordlist-be_users > div:nth-child(1) > table:nth-child(1) > tbody:nth-child(2) > tr:nth-child(1) > td:nth-child(2) > span:nth-child(1) > a:nth-child(1)');
-            $I->closeTab();
-        } catch (NoSuchWindowException $e) {
-            // missing focus by auto close window
-        }
+        $I->amGoingTo('click + button to select record and close DB-Browser');
+        $I->click('#recordlist-be_users > div:nth-child(1) > table:nth-child(1) > tbody:nth-child(2) > tr:nth-child(1) > td:nth-child(2) > span:nth-child(1) > a:nth-child(1)');
 
         $I->switchToWindow();
         $I->switchToIFrame('list_frame');
@@ -151,7 +143,9 @@ class ElementsGroupCest
 
         $I->seeNumberOfElements('select[data-formengine-input-name="data[tx_styleguide_elements_group][1][group_db_1]"] option', 4);
         $I->click($formWizardsWrap . ' div:nth-of-type(4) > div > a:nth-of-type(1)');
-        $I->switchToWindow('Typo3WinBrowser');
+
+        $I->switchToWindow();
+        $I->switchToIFrame('modal_frame');
 
         $I->amGoingTo("search record '' and limit 1 in DB-Browser");
         $I->fillField('#showLimit', 1);
@@ -178,16 +172,11 @@ class ElementsGroupCest
         $I->waitForElement('.recordlist');
         $I->see('admin', '.recordlist');
 
-        // search Test only by string
-        try {
-            $I->amGoingTo('click + button to select record and close DB-Browser');
-            $I->click('#recordlist-be_users > div:nth-child(1) > table:nth-child(1) > tbody:nth-child(2) > tr:nth-child(1) > td:nth-child(2) > span:nth-child(1) > a:nth-child(1)');
-            $I->closeTab();
-        } catch (NoSuchWindowException $e) {
-            // missing focus by auto close window
-        }
-
+        $I->amGoingTo('click + button to select record and close DB-Browser');
+        $I->click('#recordlist-be_users > div:nth-child(1) > table:nth-child(1) > tbody:nth-child(2) > tr:nth-child(1) > td:nth-child(2) > span:nth-child(1) > a:nth-child(1)');
         $I->switchToWindow();
+        $I->click('.t3js-modal-close');
+
         $I->switchToIFrame('list_frame');
         $I->see('admin', 'select[data-formengine-input-name="data[tx_styleguide_elements_group][1][group_db_1]"]');
         $I->click('.btn-toolbar button.btn:nth-child(2)');
index e753e66..c188f4f 100644 (file)
  * Module: TYPO3/CMS/Recordlist/ElementBrowser
  * ElementBrowser communication with parent windows
  */
-define(['jquery'], function($) {
+define([
+       'jquery',
+       'TYPO3/CMS/Backend/Modal'
+], function($, Modal) {
        'use strict';
 
        /**
@@ -48,10 +51,10 @@ define(['jquery'], function($) {
         */
        ElementBrowser.setReferences = function() {
                if (
-                       window.opener && window.opener.content && window.opener.content.document.editform
-                       && window.opener.content.document.editform[ElementBrowser.formFieldName]
+                       ElementBrowser.getParent() && ElementBrowser.getParent().content && ElementBrowser.getParent().content.document.editform
+                       && ElementBrowser.getParent().content.document.editform[ElementBrowser.formFieldName]
                ) {
-                       ElementBrowser.targetDoc = window.opener.content.document;
+                       ElementBrowser.targetDoc = ElementBrowser.getParent().content.document;
                        ElementBrowser.elRef = ElementBrowser.targetDoc.editform[ElementBrowser.formFieldName];
                        return true;
                } else {
@@ -77,6 +80,31 @@ define(['jquery'], function($) {
        };
 
        /**
+        * Returns the parent document object
+        */
+       ElementBrowser.getParent = function() {
+               var opener = null;
+               if (
+                       typeof window.parent !== 'undefined' &&
+                       typeof window.parent.document.list_frame !== 'undefined' &&
+                       window.parent.document.activeElement.classList.contains('t3js-modal-iframe')
+               ) {
+                       opener = window.parent.document.list_frame;
+               }
+               else if (
+                       typeof window.frames !== 'undefined' &&
+                       typeof window.frames.frameElement !== 'undefined' &&
+                       window.frames.frameElement.classList.contains('t3js-modal-iframe')
+               ) {
+                       opener = window.frames.parent.frames.list_frame;
+               }
+               else if (window.opener) {
+                       opener = window.opener
+               }
+               return opener;
+       }
+
+       /**
         *
         * @param {String} table
         * @param {Number} uid
@@ -91,10 +119,11 @@ define(['jquery'], function($) {
         */
        ElementBrowser.insertElement = function(table, uid, type, filename, fp, filetype, imagefile, action, close) {
                var performAction = true;
+
                // Call a check function in the opener window (e.g. for uniqueness handling):
                if (ElementBrowser.irre.objectId && ElementBrowser.irre.checkUniqueAction) {
-                       if (window.opener) {
-                               var res = ElementBrowser.executeFunctionByName(ElementBrowser.irre.checkUniqueAction, window.opener, ElementBrowser.irre.objectId, table ,uid, type);
+                       if (ElementBrowser.getParent()) {
+                               var res = ElementBrowser.executeFunctionByName(ElementBrowser.irre.checkUniqueAction, ElementBrowser.getParent(), ElementBrowser.irre.objectId, table ,uid, type);
                                if (!res.passed) {
                                        if (res.message) {
                                                alert(res.message);
@@ -103,46 +132,46 @@ define(['jquery'], function($) {
                                }
                        } else {
                                alert("Error - reference to main window is not set properly!");
-                               close();
+                               ElementBrowser.focusOpenerAndClose();
                        }
                }
                // Call performing function and finish this action:
                if (performAction) {
                        // Call helper function to manage data in the opener window:
                        if (ElementBrowser.irre.objectId && ElementBrowser.irre.addAction) {
-                               if (window.opener) {
-                                       ElementBrowser.executeFunctionByName(ElementBrowser.irre.addAction, window.opener, ElementBrowser.irre.objectId, table ,uid, type, ElementBrowser.fieldReferenceSlashed);
+                               if (ElementBrowser.getParent()) {
+                                       ElementBrowser.executeFunctionByName(ElementBrowser.irre.addAction, ElementBrowser.getParent(), ElementBrowser.irre.objectId, table ,uid, type, ElementBrowser.fieldReferenceSlashed);
                                } else {
                                        alert("Error - reference to main window is not set properly!");
-                                       close();
+                                       ElementBrowser.focusOpenerAndClose();
                                }
                        }
                        if (ElementBrowser.irre.objectId && ElementBrowser.irre.insertAction) {
-                               if (window.opener) {
-                                       ElementBrowser.executeFunctionByName(ElementBrowser.irre.insertAction, window.opener, ElementBrowser.irre.objectId, table ,uid, type);
+                               if (ElementBrowser.getParent()) {
+                                       ElementBrowser.executeFunctionByName(ElementBrowser.irre.insertAction, ElementBrowser.getParent(), ElementBrowser.irre.objectId, table ,uid, type);
                                        if (close) {
                                                ElementBrowser.focusOpenerAndClose();
                                        }
                                } else {
                                        alert("Error - reference to main window is not set properly!");
                                        if (close) {
-                                               close();
+                                               ElementBrowser.focusOpenerAndClose();
                                        }
                                }
                        } else if (ElementBrowser.fieldReference && !ElementBrowser.rte.parameters && !ElementBrowser.rte.configuration) {
                                ElementBrowser.addElement(filename, table + "_" + uid, fp, close);
                        } else {
                                if (
-                                       window.opener && window.opener.content && window.opener.content.document.editform
-                                       && window.opener.content.document.editform[ElementBrowser.formFieldName]
+                                       ElementBrowser.getParent() && ElementBrowser.getParent().content && ElementBrowser.getParent().content.document.editform
+                                       && ElementBrowser.getParent().content.document.editform[ElementBrowser.formFieldName]
                                ) {
-                                       window.opener.group_change(
+                                       ElementBrowser.getParent().group_change(
                                                "add",
                                                ElementBrowser.fieldReference,
                                                ElementBrowser.rte.parameters,
                                                ElementBrowser.rte.configuration,
                                                ElementBrowser.targetDoc.editform[ElementBrowser.formFieldName],
-                                               ElementBrowser.window.opener.content.document
+                                               ElementBrowser.getParent().content.document
                                        );
                                } else {
                                        alert("Error - reference to main window is not set properly!");
@@ -165,11 +194,11 @@ define(['jquery'], function($) {
                var type = "";
                if (ElementBrowser.irre.objectId && ElementBrowser.irre.insertAction) {
                        // Call helper function to manage data in the opener window:
-                       if (window.opener) {
-                               ElementBrowser.executeFunctionByName(ElementBrowser.irre.insertAction + 'Multiple', window.opener, ElementBrowser.irre.objectId, table ,uid, type, ElementBrowser.fieldReference);
+                       if (ElementBrowser.getParent()) {
+                               ElementBrowser.executeFunctionByName(ElementBrowser.irre.insertAction + 'Multiple', ElementBrowser.getParent(), ElementBrowser.irre.objectId, table ,uid, type, ElementBrowser.fieldReference);
                        } else {
                                alert("Error - reference to main window is not set properly!");
-                               close();
+                               ElementBrowser.focusOpenerAndClose();
                        }
                }
                return false;
@@ -183,14 +212,14 @@ define(['jquery'], function($) {
         * @param {String} close
         */
        ElementBrowser.addElement = function(elName, elValue, altElValue, close) {
-               if (window.opener && window.opener.setFormValueFromBrowseWin) {
-                       window.opener.setFormValueFromBrowseWin(ElementBrowser.fieldReference, altElValue ? altElValue : elValue, elName);
+               if (ElementBrowser.getParent() && ElementBrowser.getParent().setFormValueFromBrowseWin) {
+                       ElementBrowser.getParent().setFormValueFromBrowseWin(ElementBrowser.fieldReference, altElValue ? altElValue : elValue, elName);
                        if (close) {
                                ElementBrowser.focusOpenerAndClose();
                        }
                } else {
                        alert("Error - reference to main window is not set properly!");
-                       close();
+                       ElementBrowser.focusOpenerAndClose();
                }
        };
 
@@ -198,7 +227,10 @@ define(['jquery'], function($) {
         *
         */
        ElementBrowser.focusOpenerAndClose = function() {
-               window.opener.focus();
+               if (ElementBrowser.getParent()) {
+                       ElementBrowser.getParent().focus();
+               }
+               Modal.dismiss();
                close();
        };