[TASK] Move FieldControl/InsertClipboard handling to module 24/58624/4
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Sat, 13 Oct 2018 10:54:05 +0000 (12:54 +0200)
committerWouter Wolters <typo3@wouterwolters.nl>
Mon, 29 Oct 2018 22:11:23 +0000 (23:11 +0100)
The FieldControl `InsertClipboard` now uses a dedicated module for its
handling and no longer uses inline `onclick` handlers nor inline
FormEngine calls.

Resolves: #86646
Releases: master
Change-Id: I42ded87ab9152d92d07f3fe5b40b327d979aad4a
Reviewed-on: https://review.typo3.org/58624
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
Build/types/TYPO3/index.d.ts
typo3/sysext/backend/Classes/Form/FieldControl/InsertClipboard.php
typo3/sysext/backend/Resources/Private/TypeScript/FormEngine/FieldControl/InsertClipboard.ts [new file with mode: 0644]
typo3/sysext/backend/Resources/Public/JavaScript/FormEngine/FieldControl/InsertClipboard.js [new file with mode: 0644]

index 38ab38a..57f0700 100644 (file)
@@ -32,6 +32,14 @@ declare namespace TYPO3 {
       export class FormEngine {
         public readonly Validation: FormEngineValidation;
         public preventFollowLinkIfNotSaved(href: string): boolean;
+        public setSelectOptionFromExternalSource(
+          fieldName: string,
+          value: string,
+          label: string,
+          title: string,
+          exclusiveValues?: string,
+          $optionEl?: JQuery
+        ): void;
       }
 
       export class Wizard {
index 0684bce..a35e8f8 100644 (file)
@@ -19,6 +19,7 @@ use TYPO3\CMS\Backend\Form\AbstractNode;
 use TYPO3\CMS\Core\Localization\LanguageService;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
 use TYPO3\CMS\Core\Utility\PathUtility;
+use TYPO3\CMS\Core\Utility\StringUtility;
 
 /**
  * Renders the icon "insert record from clipboard",
@@ -31,7 +32,7 @@ class InsertClipboard extends AbstractNode
      *
      * @return array As defined by FieldControl class
      */
-    public function render()
+    public function render(): array
     {
         $languageService = $this->getLanguageService();
 
@@ -48,40 +49,41 @@ class InsertClipboard extends AbstractNode
         }
 
         $title = '';
-        $clipboardOnClick = [];
+        $dataAttributes = [
+            'element' => $elementName,
+            'clipboardItems' => [],
+        ];
         if ($internalType === 'file_reference' || $internalType === 'file') {
             // @deprecated since TYPO3 v9, will be removed in TYPO3 v10.0. Deprecation logged by TcaMigration class.
             $title = sprintf($languageService->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.clipInsert_file'), count($clipboardElements));
             foreach ($clipboardElements as $clipboardElement) {
-                $value = $clipboardElement['value'];
-                $title = 'unescape(' . GeneralUtility::quoteJSvalue(rawurlencode(PathUtility::basename($clipboardElement['title']))) . ')';
-                $clipboardOnClick[] = 'setFormValueFromBrowseWin('
-                        . GeneralUtility::quoteJSvalue($elementName) . ','
-                        . 'unescape(' . GeneralUtility::quoteJSvalue(rawurlencode(str_replace('%20', ' ', $value))) . '),'
-                        . $title . ','
-                        . $title
-                    . ');';
+                $dataAttributes['clipboardItems'][] = [
+                    'title' => rawurlencode(PathUtility::basename($clipboardElement['title'])),
+                    'value' => $clipboardElement['value'],
+                ];
             }
         } elseif ($internalType === 'db') {
             $title = sprintf($languageService->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.clipInsert_db'), count($clipboardElements));
             foreach ($clipboardElements as $clipboardElement) {
-                $value = $clipboardElement['value'];
-                $title = GeneralUtility::quoteJSvalue($clipboardElement['title']);
-                $clipboardOnClick[] = 'setFormValueFromBrowseWin('
-                        . GeneralUtility::quoteJSvalue($elementName) . ','
-                        . 'unescape(' . GeneralUtility::quoteJSvalue(rawurlencode(str_replace('%20', ' ', $value))) . '),'
-                        . $title . ','
-                        . $title
-                    . ');';
+                $dataAttributes['clipboardItems'][] = [
+                    'title' => $clipboardElement['title'],
+                    'value' => $clipboardElement['value'],
+                ];
             }
         }
-        $clipboardOnClick[] = 'return false;';
+
+        $id = StringUtility::getUniqueId('t3js-formengine-fieldcontrol-');
 
         return [
             'iconIdentifier' => 'actions-document-paste-into',
             'title' => $title,
             'linkAttributes' => [
-                'onClick' => implode('', $clipboardOnClick),
+                'id' => htmlspecialchars($id),
+                'data-element' => $dataAttributes['element'],
+                'data-clipboard-items' => json_encode($dataAttributes['clipboardItems']),
+            ],
+            'requireJsModules' => [
+                ['TYPO3/CMS/Backend/FormEngine/FieldControl/InsertClipboard' => 'function(FieldControl) {new FieldControl(' . GeneralUtility::quoteJSvalue('#' . $id) . ');}'],
             ],
         ];
     }
@@ -89,7 +91,7 @@ class InsertClipboard extends AbstractNode
     /**
      * @return LanguageService
      */
-    protected function getLanguageService()
+    protected function getLanguageService(): LanguageService
     {
         return $GLOBALS['LANG'];
     }
diff --git a/typo3/sysext/backend/Resources/Private/TypeScript/FormEngine/FieldControl/InsertClipboard.ts b/typo3/sysext/backend/Resources/Private/TypeScript/FormEngine/FieldControl/InsertClipboard.ts
new file mode 100644 (file)
index 0000000..e40f91c
--- /dev/null
@@ -0,0 +1,50 @@
+/*
+ * 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';
+import FormEngine = require('TYPO3/CMS/Backend/FormEngine');
+
+interface ClipboardItem {
+  title: string;
+  value: string;
+}
+
+/**
+ * Handles the "Insert clipboard" field control that pastes the clipboard into a "group" field
+ */
+class InsertClipboard {
+  private controlElement: HTMLElement = null;
+
+  constructor(controlElementId: string) {
+    $((): void => {
+      this.controlElement = <HTMLElement>document.querySelector(controlElementId);
+      this.controlElement.addEventListener('click', this.registerClickHandler);
+    });
+  }
+
+  /**
+   * @param {Event} e
+   */
+  private registerClickHandler = (e: Event): void => {
+    e.preventDefault();
+
+    const assignedElement: string = this.controlElement.dataset.element;
+    const clipboardItems: Array<ClipboardItem> = JSON.parse(this.controlElement.dataset.clipboardItems);
+
+    for (let item of clipboardItems) {
+      FormEngine.setSelectOptionFromExternalSource(assignedElement, item.value, item.title, item.title);
+    }
+  }
+}
+
+export = InsertClipboard;
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/FormEngine/FieldControl/InsertClipboard.js b/typo3/sysext/backend/Resources/Public/JavaScript/FormEngine/FieldControl/InsertClipboard.js
new file mode 100644 (file)
index 0000000..737b637
--- /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!
+ */
+var __values=this&&this.__values||function(e){var t="function"==typeof Symbol&&e[Symbol.iterator],r=0;return t?t.call(e):{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}}};define(["require","exports","jquery","TYPO3/CMS/Backend/FormEngine"],function(e,t,r,n){"use strict";return function(e){var t=this;this.controlElement=null,this.registerClickHandler=function(e){e.preventDefault();var r,l,o=t.controlElement.dataset.element,i=JSON.parse(t.controlElement.dataset.clipboardItems);try{for(var a=__values(i),c=a.next();!c.done;c=a.next()){var u=c.value;n.setSelectOptionFromExternalSource(o,u.value,u.title,u.title)}}catch(e){r={error:e}}finally{try{c&&!c.done&&(l=a.return)&&l.call(a)}finally{if(r)throw r.error}}},r(function(){t.controlElement=document.querySelector(e),t.controlElement.addEventListener("click",t.registerClickHandler)})}});
\ No newline at end of file