[TASK] Move FieldControl/ResetSelection handling to module 51/58651/9
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Thu, 18 Oct 2018 14:07:19 +0000 (16:07 +0200)
committerAnja Leichsenring <aleichsenring@ab-softlab.de>
Mon, 29 Oct 2018 21:39:21 +0000 (22:39 +0100)
The FieldControl `ResetSelection` now uses a dedicated module for its
handling and no longer uses inline `onclick` handlers nor inline
FormEngine calls.

Resolves: #86648
Releases: master
Change-Id: I478d5ae5567f38fb7cf75c30ab8ac7e2c021224e
Reviewed-on: https://review.typo3.org/58651
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>
typo3/sysext/backend/Classes/Form/FieldControl/ResetSelection.php
typo3/sysext/backend/Resources/Private/TypeScript/FormEngine/FieldControl/ResetSelection.ts [new file with mode: 0644]
typo3/sysext/backend/Resources/Public/JavaScript/FormEngine/FieldControl/ResetSelection.js [new file with mode: 0644]

index 87a6e22..ecd2eb5 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;
 
 /**
  * "Reset selection to previous selected items" icon,
@@ -45,19 +46,18 @@ class ResetSelection extends AbstractNode
             }
         }
 
-        $resetCode = [
-            'document.editform[' . GeneralUtility::quoteJSvalue($itemName . '[]') . '].selectedIndex=-1;'
-        ];
-        foreach ($initiallySelectedIndices as $index) {
-            $resetCode[] = 'document.editform[' . GeneralUtility::quoteJSvalue($itemName . '[]') . '].options[' . $index . '].selected=1;';
-        }
-        $resetCode[] = 'return false;';
+        $id = StringUtility::getUniqueId('t3js-formengine-fieldcontrol-');
 
         return [
             'iconIdentifier' => 'actions-edit-undo',
             'title' => 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.revertSelection',
             'linkAttributes' => [
-                'onClick' => implode('', $resetCode),
+                'id' => htmlspecialchars($id),
+                'data-item-name' => htmlspecialchars($itemName),
+                'data-selected-indices' => json_encode($initiallySelectedIndices),
+            ],
+            'requireJsModules' => [
+                ['TYPO3/CMS/Backend/FormEngine/FieldControl/ResetSelection' => 'function(FieldControl) {new FieldControl(' . GeneralUtility::quoteJSvalue('#' . $id) . ');}'],
             ],
         ];
     }
diff --git a/typo3/sysext/backend/Resources/Private/TypeScript/FormEngine/FieldControl/ResetSelection.ts b/typo3/sysext/backend/Resources/Private/TypeScript/FormEngine/FieldControl/ResetSelection.ts
new file mode 100644 (file)
index 0000000..ff2d8b9
--- /dev/null
@@ -0,0 +1,48 @@
+/*
+ * 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';
+
+/**
+ * This module is used for the field control "Reset selection" used for selectSingleBox
+ */
+class ResetSelection {
+  private controlElement: HTMLElement = null;
+
+  constructor(controlElementId: string) {
+    $((): void => {
+      this.controlElement = <HTMLElement>document.querySelector(controlElementId);
+      if (this.controlElement !== null) {
+        this.controlElement.addEventListener('click', this.registerClickHandler);
+      }
+    });
+  }
+
+  /**
+   * @param {Event} e
+   */
+  private registerClickHandler = (e: Event): void => {
+    e.preventDefault();
+
+    const itemName: string = this.controlElement.dataset.itemName;
+    const selectedIndices: Array<number> = JSON.parse(this.controlElement.dataset.selectedIndices);
+    const field = (<HTMLSelectElement>document.forms.namedItem('editform').querySelector('[name="' + itemName + '[]"]'));
+
+    field.selectedIndex = -1;
+    for (let i of selectedIndices) {
+      field.options[i].selected = true;
+    }
+  }
+}
+
+export = ResetSelection;
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/FormEngine/FieldControl/ResetSelection.js b/typo3/sysext/backend/Resources/Public/JavaScript/FormEngine/FieldControl/ResetSelection.js
new file mode 100644 (file)
index 0000000..f5b2a47
--- /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],n=0;return t?t.call(e):{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}}};define(["require","exports","jquery"],function(e,t,n){"use strict";return function(e){var t=this;this.controlElement=null,this.registerClickHandler=function(e){e.preventDefault();var n,r,l=t.controlElement.dataset.itemName,o=JSON.parse(t.controlElement.dataset.selectedIndices),c=document.forms.namedItem("editform").querySelector('[name="'+l+'[]"]');c.selectedIndex=-1;try{for(var i=__values(o),a=i.next();!a.done;a=i.next()){var u=a.value;c.options[u].selected=!0}}catch(e){n={error:e}}finally{try{a&&!a.done&&(r=i.return)&&r.call(i)}finally{if(n)throw n.error}}},n(function(){t.controlElement=document.querySelector(e),null!==t.controlElement&&t.controlElement.addEventListener("click",t.registerClickHandler)})}});
\ No newline at end of file