[TASK] Move FieldControl/EditPopup handling to module 87/58887/6
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Sun, 11 Nov 2018 23:02:14 +0000 (15:02 -0800)
committerAnja Leichsenring <aleichsenring@ab-softlab.de>
Fri, 1 Feb 2019 16:35:53 +0000 (17:35 +0100)
The FieldControl `EditPopup` now uses a dedicated module for its
handling and no longer uses inline `onclick` handlers nor inline
FormEngine calls.

Resolves: #86644
Releases: master
Change-Id: I46e5d3dbfcb4c187afb6cd1c0692b4e728bfaf26
Reviewed-on: https://review.typo3.org/58887
Tested-by: TYPO3com <noreply@typo3.com>
Reviewed-by: Helmut Hummel <typo3@helhum.io>
Reviewed-by: Benni Mack <benni@typo3.org>
Tested-by: Benni Mack <benni@typo3.org>
Reviewed-by: Susanne Moog <susanne.moog@typo3.org>
Tested-by: Susanne Moog <susanne.moog@typo3.org>
Reviewed-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Tested-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
typo3/sysext/backend/Classes/Form/FieldControl/EditPopup.php
typo3/sysext/backend/Resources/Private/TypeScript/FormEngine/FieldControl/EditPopup.ts [new file with mode: 0644]
typo3/sysext/backend/Resources/Public/JavaScript/FormEngine/FieldControl/EditPopup.js [new file with mode: 0644]

index cfc5990..a8ece1f 100644 (file)
@@ -18,6 +18,7 @@ namespace TYPO3\CMS\Backend\Form\FieldControl;
 use TYPO3\CMS\Backend\Form\AbstractNode;
 use TYPO3\CMS\Core\Localization\LanguageService;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
+use TYPO3\CMS\Core\Utility\StringUtility;
 
 /**
  * Renders the icon with link parameters to edit a selected element,
@@ -80,38 +81,19 @@ class EditPopup extends AbstractNode
         $uriBuilder = GeneralUtility::makeInstance(\TYPO3\CMS\Backend\Routing\UriBuilder::class);
         $url = (string)$uriBuilder->buildUriFromRoute('wizard_edit', $urlParameters);
 
-        $onClick = [];
-        $onClick[] = 'this.blur();';
-        $onClick[] = 'if (!TBE_EDITOR.curSelected(' . GeneralUtility::quoteJSvalue($itemName) . ')) {';
-        $onClick[] =    'top.TYPO3.Modal.confirm(';
-        $onClick[] =        '"' . $languageService->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:warning.header') . '",';
-        $onClick[] =        '"' . $languageService->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:mess.noSelItemForEdit') . '",';
-        $onClick[] =        'top.TYPO3.Severity.notice, [{text: TYPO3.lang[\'button.ok\'] || \'OK\', btnClass: \'btn-notice\', name: \'ok\'}]';
-        $onClick[] =    ')';
-        $onClick[] =    '.on("button.clicked", function(e) {';
-        $onClick[] =        'if (e.target.name == "ok") { top.TYPO3.Modal.dismiss(); }}';
-        $onClick[] =    ');';
-        $onClick[] =    'return false;';
-        $onClick[] = '}';
-        $onClick[] = 'vHWin=window.open(';
-        $onClick[] =    GeneralUtility::quoteJSvalue($url);
-        $onClick[] =    '+\'&P[currentValue]=\'+TBE_EDITOR.rawurlencode(';
-        $onClick[] =        'document.editform[' . GeneralUtility::quoteJSvalue($itemName) . '].value';
-        $onClick[] =    ')';
-        $onClick[] =    '+\'&P[currentSelectedValues]=\'+TBE_EDITOR.curSelected(';
-        $onClick[] =        GeneralUtility::quoteJSvalue($itemName);
-        $onClick[] =    '),';
-        $onClick[] =    '\'\',';
-        $onClick[] =    GeneralUtility::quoteJSvalue($windowOpenParameters);
-        $onClick[] = ');';
-        $onClick[] = 'vHWin.focus();';
-        $onClick[] = 'return false;';
+        $id = StringUtility::getUniqueId('t3js-formengine-fieldcontrol-');
 
         return [
             'iconIdentifier' => 'actions-open',
             'title' => $title,
             'linkAttributes' => [
-                'onClick' => implode('', $onClick),
+                'id' => htmlspecialchars($id),
+                'href' => $url,
+                'data-element' => $itemName,
+                'data-window-parameters' => $windowOpenParameters,
+            ],
+            'requireJsModules' => [
+                ['TYPO3/CMS/Backend/FormEngine/FieldControl/EditPopup' => 'function(FieldControl) {new FieldControl(' . GeneralUtility::quoteJSvalue('#' . $id) . ');}'],
             ],
         ];
     }
diff --git a/typo3/sysext/backend/Resources/Private/TypeScript/FormEngine/FieldControl/EditPopup.ts b/typo3/sysext/backend/Resources/Private/TypeScript/FormEngine/FieldControl/EditPopup.ts
new file mode 100644 (file)
index 0000000..c75e11b
--- /dev/null
@@ -0,0 +1,64 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import * as $ from 'jquery';
+
+/**
+ * Handles the "Edit popup" field control that renders a new FormEngine instance
+ */
+class EditPopup {
+  private controlElement: HTMLAnchorElement = null;
+  private assignedFormField: HTMLSelectElement = null;
+
+  constructor(controlElementId: string) {
+    $((): void => {
+      this.controlElement = <HTMLAnchorElement>document.querySelector(controlElementId);
+      this.assignedFormField = <HTMLSelectElement>document.querySelector(
+        'select[data-formengine-input-name="' + this.controlElement.dataset.element + '"]'
+      );
+
+      if (this.assignedFormField.options.selectedIndex === -1) {
+        this.controlElement.classList.add('disabled');
+      }
+
+      this.assignedFormField.addEventListener('change', this.registerChangeHandler);
+      this.controlElement.addEventListener('click', this.registerClickHandler);
+    });
+  }
+
+  private registerChangeHandler = (): void => {
+    this.controlElement.classList.toggle('disabled', this.assignedFormField.options.selectedIndex === -1);
+  }
+
+  /**
+   * @param {Event} e
+   */
+  private registerClickHandler = (e: Event): void => {
+    e.preventDefault();
+
+    const values: Array<string> = [];
+    for (let i = 0; i < this.assignedFormField.selectedOptions.length; ++i) {
+      const option  = this.assignedFormField.selectedOptions.item(i);
+      values.push(option.value);
+    }
+
+    const url = this.controlElement.getAttribute('href')
+      + '&P[currentValue]=' + encodeURIComponent(this.assignedFormField.value)
+      + '&P[currentSelectedValues]=' + values.join(',')
+    ;
+    const popupWindow = window.open(url, '', this.controlElement.dataset.windowParameters);
+    popupWindow.focus();
+  }
+}
+
+export = EditPopup;
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/FormEngine/FieldControl/EditPopup.js b/typo3/sysext/backend/Resources/Public/JavaScript/FormEngine/FieldControl/EditPopup.js
new file mode 100644 (file)
index 0000000..d8cb22b
--- /dev/null
@@ -0,0 +1,13 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+define(["require","exports","jquery"],function(e,t,n){"use strict";return function(e){var t=this;this.controlElement=null,this.assignedFormField=null,this.registerChangeHandler=function(){t.controlElement.classList.toggle("disabled",-1===t.assignedFormField.options.selectedIndex)},this.registerClickHandler=function(e){e.preventDefault();for(var n=[],r=0;r<t.assignedFormField.selectedOptions.length;++r){var l=t.assignedFormField.selectedOptions.item(r);n.push(l.value)}var i=t.controlElement.getAttribute("href")+"&P[currentValue]="+encodeURIComponent(t.assignedFormField.value)+"&P[currentSelectedValues]="+n.join(",");window.open(i,"",t.controlElement.dataset.windowParameters).focus()},n(function(){t.controlElement=document.querySelector(e),t.assignedFormField=document.querySelector('select[data-formengine-input-name="'+t.controlElement.dataset.element+'"]'),-1===t.assignedFormField.options.selectedIndex&&t.controlElement.classList.add("disabled"),t.assignedFormField.addEventListener("change",t.registerChangeHandler),t.controlElement.addEventListener("click",t.registerClickHandler)})}});
\ No newline at end of file