[TASK] Move FieldControl/AddRecord handling to module 48/58648/6
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Thu, 18 Oct 2018 13:19:41 +0000 (15:19 +0200)
committerAnja Leichsenring <aleichsenring@ab-softlab.de>
Mon, 29 Oct 2018 21:42:05 +0000 (22:42 +0100)
The FieldControl `AddRecord` now uses a dedicated module for its
handling and no longer uses inline `onclick` handlers nor inline
FormEngine calls.

Resolves: #86642
Releases: master
Change-Id: I0d4e44719f38d4dd0e2355e3aeab6551e1725fb7
Reviewed-on: https://review.typo3.org/58648
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Tested-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Build/types/TYPO3/index.d.ts
typo3/sysext/backend/Classes/Form/FieldControl/AddRecord.php
typo3/sysext/backend/Resources/Private/TypeScript/FormEngine/FieldControl/AddRecord.ts [new file with mode: 0644]
typo3/sysext/backend/Resources/Public/JavaScript/FormEngine/FieldControl/AddRecord.js [new file with mode: 0644]

index d51cd8c..38ab38a 100644 (file)
@@ -31,6 +31,7 @@ declare namespace TYPO3 {
 
       export class FormEngine {
         public readonly Validation: FormEngineValidation;
+        public preventFollowLinkIfNotSaved(href: string): boolean;
       }
 
       export class Wizard {
index 69b0a93..b48a9f5 100644 (file)
@@ -17,6 +17,7 @@ namespace TYPO3\CMS\Backend\Form\FieldControl;
 
 use TYPO3\CMS\Backend\Form\AbstractNode;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
+use TYPO3\CMS\Core\Utility\StringUtility;
 
 /**
  * Renders the icon with link parameters to add a new record,
@@ -96,18 +97,20 @@ class AddRecord extends AbstractNode
             ],
         ];
 
-        $onClick = [];
-        $onClick[] = 'this.blur();';
-        $onClick[] = 'return TYPO3.FormEngine.preventFollowLinkIfNotSaved(this.getAttribute(\'href\'));';
+        $id = StringUtility::getUniqueId('t3js-formengine-fieldcontrol-');
+
         /** @var \TYPO3\CMS\Backend\Routing\UriBuilder $uriBuilder */
         $uriBuilder = GeneralUtility::makeInstance(\TYPO3\CMS\Backend\Routing\UriBuilder::class);
         return [
             'iconIdentifier' => 'actions-add',
             'title' => $title,
             'linkAttributes' => [
-                'onClick' => implode('', $onClick),
+                'id' => htmlspecialchars($id),
                 'href' => (string)$uriBuilder->buildUriFromRoute('wizard_add', $urlParameters),
             ],
+            'requireJsModules' => [
+                ['TYPO3/CMS/Backend/FormEngine/FieldControl/AddRecord' => 'function(FieldControl) {new FieldControl(' . GeneralUtility::quoteJSvalue('#' . $id) . ');}'],
+            ],
         ];
     }
 }
diff --git a/typo3/sysext/backend/Resources/Private/TypeScript/FormEngine/FieldControl/AddRecord.ts b/typo3/sysext/backend/Resources/Private/TypeScript/FormEngine/FieldControl/AddRecord.ts
new file mode 100644 (file)
index 0000000..59f2c46
--- /dev/null
@@ -0,0 +1,40 @@
+/*
+ * 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');
+
+/**
+ * Handles the "Add record" field control that renders a new FormEngine instance
+ */
+class AddRecord {
+  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();
+
+    FormEngine.preventFollowLinkIfNotSaved(this.controlElement.getAttribute('href'));
+  }
+}
+
+export = AddRecord;
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/FormEngine/FieldControl/AddRecord.js b/typo3/sysext/backend/Resources/Public/JavaScript/FormEngine/FieldControl/AddRecord.js
new file mode 100644 (file)
index 0000000..1b3c548
--- /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","TYPO3/CMS/Backend/FormEngine"],function(e,t,n,r){"use strict";return function(e){var t=this;this.controlElement=null,this.registerClickHandler=function(e){e.preventDefault(),r.preventFollowLinkIfNotSaved(t.controlElement.getAttribute("href"))},n(function(){t.controlElement=document.querySelector(e),t.controlElement.addEventListener("click",t.registerClickHandler)})}});
\ No newline at end of file