[TASK] Open ElementBrowser event based in FormEngine

Currently, the ElementBrowser is used in three different places in FormEngine, all of them trigger it differently. This patch introduces an event-driven approach and streamlines all usages. Resolves: #88436 Releases: master Change-Id: I13e696f29ade0aede6a2466cbca1e27cebc86c61 Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/60818 Tested-by: TYPO3com <noreply@typo3.com> Tested-by: Daniel Goerz <daniel.goerz@posteo.de> Tested-by: Benni Mack <benni@typo3.org> Reviewed-by: Daniel Goerz <daniel.goerz@posteo.de> Reviewed-by: Benni Mack <benni@typo3.org>
TYPO3 · Jun 27, 2019 · 2e4e8e0 · 2e4e8e0
1 parent d4533ea
commit 2e4e8e0
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 38 deletions.
diff --git a/...Script/backend/Resources/Public/TypeScript/FormEngine/Container/InlineControlContainer.ts b/...Script/backend/Resources/Public/TypeScript/FormEngine/Container/InlineControlContainer.ts
@@ -31,7 +31,6 @@ enum Selectors {
   controlSectionSelector = '.t3js-formengine-irre-control',
   createNewRecordButtonSelector = '.t3js-create-new-button',
   createNewRecordBySelectorSelector = '.t3js-create-new-selector',
-  insertRecordButtonSelector = '.t3js-insert-record-button',
   deleteRecordButtonSelector = '.t3js-editform-delete-inline-record',
   enableDisableRecordButtonSelector = '.t3js-toggle-visibility-button',
   infoWindowButton = '[data-action="infowindow"]',
@@ -142,24 +141,6 @@ class InlineControlContainer {
     InfoWindow.showItem(target.dataset.infoTable, target.dataset.infoUid);
   }
 
-  /**
-   * @param {Event} e
-   */
-  private static registerInsertRecordButton(e: Event): void {
-    let target: HTMLElement;
-    if ((target = InlineControlContainer.getDelegatedEventTarget(e.target, Selectors.insertRecordButtonSelector)) === null) {
-      return;
-    }
-
-    e.preventDefault();
-    e.stopImmediatePropagation();
-
-    const mode = target.dataset.mode;
-    const params = target.dataset.params;
-
-    FormEngine.openPopupWindow(mode, params);
-  }
-
   /**
    * @param {string} objectId
    */
@@ -273,7 +254,6 @@ class InlineControlContainer {
       this.registerSort(e);
       this.registerCreateRecordButton(e);
       this.registerCreateRecordBySelector(e);
-      InlineControlContainer.registerInsertRecordButton(e);
       this.registerEnableDisableButton(e);
       InlineControlContainer.registerInfoButton(e);
       this.registerDeleteButton(e);

diff --git a/typo3/sysext/backend/Classes/Form/Container/InlineControlContainer.php b/typo3/sysext/backend/Classes/Form/Container/InlineControlContainer.php
@@ -498,7 +498,7 @@ protected function renderPossibleRecordsSelectorTypeGroupDB(array $inlineConfigu
         $item = '';
         if ($elementBrowserEnabled) {
             $item .= '
-			<a href="#" class="btn btn-default t3js-insert-record-button" data-mode="' . htmlspecialchars($mode) . '" data-params="' . htmlspecialchars($browserParams) . '"
+			<a href="#" class="btn btn-default t3js-element-browser" data-mode="' . htmlspecialchars($mode) . '" data-params="' . htmlspecialchars($browserParams) . '"
 				' . $buttonStyle . ' title="' . $createNewRelationText . '">
 				' . $this->iconFactory->getIcon('actions-insert-record', Icon::SIZE_SMALL)->render() . '
 				' . $createNewRelationText . '

diff --git a/typo3/sysext/backend/Classes/Form/FieldControl/ElementBrowser.php b/typo3/sysext/backend/Classes/Form/FieldControl/ElementBrowser.php
@@ -71,17 +71,14 @@ public function render()
         if (is_array($config['appearance']) && isset($config['appearance']['elementBrowserAllowed'])) {
             $elementBrowserAllowed = $config['appearance']['elementBrowserAllowed'];
         }
-        $elementBrowserOnClick = 'setFormValueOpenBrowser('
-                . GeneralUtility::quoteJSvalue($elementBrowserType) . ','
-                . GeneralUtility::quoteJSvalue($elementName . '|||' . $elementBrowserAllowed . '|' . $elementBrowserOnClickInline)
-            . ');'
-            . ' return false;';
 
         return [
             'iconIdentifier' => 'actions-insert-record',
             'title' => $title,
             'linkAttributes' => [
-                'onClick' => $elementBrowserOnClick,
+                'class' => 't3js-element-browser',
+                'data-mode' => htmlspecialchars($elementBrowserType),
+                'data-params' => htmlspecialchars($elementName . '|||' . $elementBrowserAllowed . '|' . $elementBrowserOnClickInline)
             ],
         ];
     }

diff --git a/typo3/sysext/backend/Classes/Form/FieldWizard/TableList.php b/typo3/sysext/backend/Classes/Form/FieldWizard/TableList.php
@@ -41,9 +41,7 @@ public function render(): array
         $config = $parameterArray['fieldConf']['config'];
         $itemName = $parameterArray['itemFormElName'];
 
-        if (!isset($config['allowed']) || !is_string($config['allowed']) || empty($config['allowed'])
-            || !isset($config['internal_type']) || $config['internal_type'] !== 'db'
-        ) {
+        if (empty($config['allowed']) || !is_string($config['allowed']) || !isset($config['internal_type']) || $config['internal_type'] !== 'db') {
             // No handling if the field has no, or funny "allowed" setting, and if internal_type is not "db"
             return $result;
         }
@@ -59,13 +57,7 @@ public function render(): array
                 $allowedTablesHtml[] = '</span>';
             } else {
                 $label = $languageService->sL($GLOBALS['TCA'][$tableName]['ctrl']['title']);
-                $onClick = [];
-                $onClick[] = 'setFormValueOpenBrowser(';
-                $onClick[] =    '\'db\',';
-                $onClick[] =    GeneralUtility::quoteJSvalue($itemName . '|||' . $tableName);
-                $onClick[] = ');';
-                $onClick[] = 'return false;';
-                $allowedTablesHtml[] = '<a href="#" onClick="' . htmlspecialchars(implode('', $onClick)) . '" class="btn btn-default">';
+                $allowedTablesHtml[] = '<a href="#" class="btn btn-default t3js-element-browser" data-mode="db" data-params="' . htmlspecialchars($itemName . '|||' . $tableName) . '">';
                 $allowedTablesHtml[] =  $iconFactory->getIconForRecord($tableName, [], Icon::SIZE_SMALL)->render();
                 $allowedTablesHtml[] =  htmlspecialchars($label);
                 $allowedTablesHtml[] = '</a>';

diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/FormEngine.js b/typo3/sysext/backend/Resources/Public/JavaScript/FormEngine.js
@@ -537,6 +537,15 @@ define(['jquery',
       FormEngine.toggleCheckboxField($(this));
     }).on('change', function(event) {
       $('.module-docheader-bar .btn').removeClass('disabled').prop('disabled', false);
+    }).on('click', '.t3js-element-browser', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const $me = $(e.currentTarget);
+      const mode = $me.data('mode');
+      const params = $me.data('params');
+
+      FormEngine.openPopupWindow(mode, params);
     });
   };
 

diff --git a/...sysext/backend/Resources/Public/JavaScript/FormEngine/Container/InlineControlContainer.js b/...sysext/backend/Resources/Public/JavaScript/FormEngine/Container/InlineControlContainer.js