[TASK] Split FormEngine.js

This patch splits the FormEngine.js into smaller, logically separated parts. This increases readability and maintainability and has a positive effect on the client's performance as only the required code is loaded. Not every aspect of the FormEngine JavaScript is handled here yet, since other areas, e.g. IRRE, need refactoring as well. Resolves: #87324 Releases: master Change-Id: I6704445254a524f8ed3152ab6b0b7105fb97d65a Reviewed-on: https://review.typo3.org/c/58608 Tested-by: TYPO3com <noreply@typo3.com> Tested-by: André Schließer <andy.schliesser@gmail.com> Tested-by: Susanne Moog <susanne.moog@typo3.org> Tested-by: Frank Naegler <frank.naegler@typo3.org> Reviewed-by: André Schließer <andy.schliesser@gmail.com> Reviewed-by: Susanne Moog <susanne.moog@typo3.org> Reviewed-by: Frank Naegler <frank.naegler@typo3.org>
TYPO3 · Mar 14, 2019 · 2f99b84 · 2f99b84
1 parent bc79835
commit 2f99b84
Show file tree

Hide file tree

Showing 34 changed files with 925 additions and 393 deletions.
diff --git a/Build/types/TYPO3/index.d.ts b/Build/types/TYPO3/index.d.ts
@@ -36,6 +36,9 @@ declare namespace TYPO3 {
 
       export class FormEngine {
         public readonly Validation: FormEngineValidation;
+        public legacyFieldChangedCb(): void;
+        public getFieldElement(fieldName: string, appendix?: string, noFallback?: boolean): JQuery;
+        public updateHiddenFieldValueFromSelect(selectFieldEl: HTMLElement, originalFieldEl: HTMLElement): void;
         public preventFollowLinkIfNotSaved(href: string): boolean;
         public setSelectOptionFromExternalSource(
           fieldName: string,

diff --git a/typo3/sysext/backend/Classes/Form/Element/GroupElement.php b/typo3/sysext/backend/Classes/Form/Element/GroupElement.php
@@ -255,10 +255,13 @@ public function render()
             $deleteControlOnClick = 'inline.revertUnique(' . GeneralUtility::quoteJSvalue($objectPrefix) . ',null,' . GeneralUtility::quoteJSvalue($row['uid']) . ');';
         }
 
+        $fieldId = StringUtility::getUniqueId('tceforms-multiselect-');
+
         $selectorAttributes = [
-            'id' => StringUtility::getUniqueId('tceforms-multiselect-'),
+            'id' => $fieldId,
             'data-formengine-input-name' => htmlspecialchars($elementName),
             'data-formengine-validation-rules' => $this->getValidationDataAsJsonString($config),
+            'data-maxitems' => $maxItems,
             'size' => $size,
         ];
         $selectorClasses = [
@@ -321,7 +324,7 @@ public function render()
         $html[] =           '<div class="btn-group-vertical">';
         if ($maxItems > 1 && $size >=5 && $showMoveIcons) {
             $html[] =           '<a href="#"';
-            $html[] =               ' class="btn btn-default t3js-btn-moveoption-top"';
+            $html[] =               ' class="btn btn-default t3js-btn-option t3js-btn-moveoption-top"';
             $html[] =               ' data-fieldname="' . htmlspecialchars($elementName) . '"';
             $html[] =               ' title="' . htmlspecialchars($languageService->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.move_to_top')) . '"';
             $html[] =           '>';
@@ -330,14 +333,14 @@ public function render()
         }
         if ($maxItems > 1 && $size > 1 && $showMoveIcons) {
             $html[] =           '<a href="#"';
-            $html[] =               ' class="btn btn-default t3js-btn-moveoption-up"';
+            $html[] =               ' class="btn btn-default t3js-btn-option t3js-btn-moveoption-up"';
             $html[] =               ' data-fieldname="' . htmlspecialchars($elementName) . '"';
             $html[] =               ' title="' . htmlspecialchars($languageService->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.move_up')) . '"';
             $html[] =           '>';
             $html[] =               $this->iconFactory->getIcon('actions-move-up', Icon::SIZE_SMALL)->render();
             $html[] =           '</a>';
             $html[] =           '<a href="#"';
-            $html[] =               ' class="btn btn-default t3js-btn-moveoption-down"';
+            $html[] =               ' class="btn btn-default t3js-btn-option t3js-btn-moveoption-down"';
             $html[] =               ' data-fieldname="' . htmlspecialchars($elementName) . '"';
             $html[] =               ' title="' . htmlspecialchars($languageService->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.move_down')) . '"';
             $html[] =           '>';
@@ -346,7 +349,7 @@ public function render()
         }
         if ($maxItems > 1 && $size >= 5 && $showMoveIcons) {
             $html[] =           '<a href="#"';
-            $html[] =               ' class="btn btn-default t3js-btn-moveoption-bottom"';
+            $html[] =               ' class="btn btn-default t3js-btn-option t3js-btn-moveoption-bottom"';
             $html[] =               ' data-fieldname="' . htmlspecialchars($elementName) . '"';
             $html[] =               ' title="' . htmlspecialchars($languageService->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.move_to_bottom')) . '"';
             $html[] =           '>';
@@ -355,7 +358,7 @@ public function render()
         }
         if ($showDeleteControl) {
             $html[] =           '<a href="#"';
-            $html[] =               ' class="btn btn-default t3js-btn-removeoption"';
+            $html[] =               ' class="btn btn-default t3js-btn-option t3js-btn-removeoption"';
             $html[] =               ' data-fieldname="' . htmlspecialchars($elementName) . '"';
             $html[] =               ' title="' . htmlspecialchars($languageService->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.remove_selected')) . '"';
             $html[] =               ' onClick="' . $deleteControlOnClick . '"';
@@ -379,6 +382,12 @@ public function render()
         $html[] =   '<input type="hidden" name="' . htmlspecialchars($elementName) . '" value="' . htmlspecialchars(implode(',', $listOfSelectedValues)) . '" />';
         $html[] = '</div>';
 
+        $resultArray['requireJsModules'][] = ['TYPO3/CMS/Backend/FormEngine/Element/GroupElement' => '
+            function(GroupElement) {
+                new GroupElement(' . GeneralUtility::quoteJSvalue($fieldId) . ');
+            }'
+        ];
+
         $resultArray['html'] = implode(LF, $html);
         return $resultArray;
     }

diff --git a/typo3/sysext/backend/Classes/Form/Element/InputDateTimeElement.php b/typo3/sysext/backend/Classes/Form/Element/InputDateTimeElement.php
@@ -270,6 +270,7 @@ public function render()
             $fullElement = implode(LF, $fullElement);
         }
 
+        $resultArray['requireJsModules'][] = 'TYPO3/CMS/Backend/FormEngine/Element/InputDateTimeElement';
         $resultArray['html'] = '<div class="formengine-field-item t3js-formengine-field-item">' . $fieldInformationHtml . $fullElement . '</div>';
         return $resultArray;
     }

diff --git a/typo3/sysext/backend/Classes/Form/Element/InputLinkElement.php b/typo3/sysext/backend/Classes/Form/Element/InputLinkElement.php
@@ -147,9 +147,11 @@ public function render()
             }
         }
 
+        $fieldId = StringUtility::getUniqueId('formengine-input-');
+
         $attributes = [
             'value' => '',
-            'id' => StringUtility::getUniqueId('formengine-input-'),
+            'id' => $fieldId,
             'class' => implode(' ', [
                 'form-control',
                 't3js-clearable',
@@ -302,6 +304,11 @@ public function render()
             $fullElement = implode(LF, $fullElement);
         }
 
+        $resultArray['requireJsModules'][] = ['TYPO3/CMS/Backend/FormEngine/Element/InputLinkElement' => '
+            function(InputLinkElement) {
+                new InputLinkElement(' . GeneralUtility::quoteJSvalue($fieldId) . ');
+            }'
+        ];
         $resultArray['html'] = '<div class="formengine-field-item t3js-formengine-field-item">' . $fieldInformationHtml . $fullElement . '</div>';
         return $resultArray;
     }

diff --git a/typo3/sysext/backend/Classes/Form/Element/SelectCheckBoxElement.php b/typo3/sysext/backend/Classes/Form/Element/SelectCheckBoxElement.php
@@ -237,6 +237,12 @@ public function render()
                     if (is_array($group['header'])) {
                         $html[] = '</div>';
                     }
+
+                    $resultArray['requireJsModules'][] = ['TYPO3/CMS/Backend/FormEngine/Element/SelectCheckBoxElement' => '
+                        function(SelectCheckBoxElement) {
+                            new SelectCheckBoxElement(' . GeneralUtility::quoteJSvalue($checkboxId) . ');
+                        }'
+                    ];
                 }
                 $html[] = '</div>';
             }

diff --git a/typo3/sysext/backend/Classes/Form/Element/SelectMultipleSideBySideElement.php b/typo3/sysext/backend/Classes/Form/Element/SelectMultipleSideBySideElement.php
@@ -217,6 +217,9 @@ public function render()
         $fieldWizardHtml = $fieldWizardResult['html'];
         $resultArray = $this->mergeChildReturnIntoExistingResult($resultArray, $fieldWizardResult, false);
 
+        $selectedOptionsFieldId = StringUtility::getUniqueId('tceforms-multiselect-');
+        $availableOptionsFieldId = StringUtility::getUniqueId('tceforms-multiselect-');
+
         $html = [];
         $html[] = '<div class="formengine-field-item t3js-formengine-field-item">';
         $html[] =   $fieldInformationHtml;
@@ -231,7 +234,7 @@ public function render()
         $html[] =                   '<div class="form-wizards-wrap form-wizards-aside">';
         $html[] =                       '<div class="form-wizards-element">';
         $html[] =                           '<select';
-        $html[] =                               ' id="' . StringUtility::getUniqueId('tceforms-multiselect-') . '"';
+        $html[] =                               ' id="' . $selectedOptionsFieldId . '"';
         $html[] =                               ' size="' . $size . '"';
         $html[] =                               ' class="' . implode(' ', $classes) . '"';
         $html[] =                               $multipleAttribute;
@@ -244,7 +247,7 @@ public function render()
         $html[] =                           '<div class="btn-group-vertical">';
         if ($maxItems > 1 && $size >= 5) {
             $html[] =                           '<a href="#"';
-            $html[] =                               ' class="btn btn-default t3js-btn-moveoption-top"';
+            $html[] =                               ' class="btn btn-default t3js-btn-option t3js-btn-moveoption-top"';
             $html[] =                               ' data-fieldname="' . htmlspecialchars($elementName) . '"';
             $html[] =                               ' title="' . htmlspecialchars($languageService->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.move_to_top')) . '"';
             $html[] =                           '>';
@@ -253,14 +256,14 @@ public function render()
         }
         if ($maxItems > 1) {
             $html[] =                           '<a href="#"';
-            $html[] =                               ' class="btn btn-default t3js-btn-moveoption-up"';
+            $html[] =                               ' class="btn btn-default t3js-btn-option t3js-btn-moveoption-up"';
             $html[] =                               ' data-fieldname="' . htmlspecialchars($elementName) . '"';
             $html[] =                               ' title="' . htmlspecialchars($languageService->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.move_up')) . '"';
             $html[] =                           '>';
             $html[] =                               $this->iconFactory->getIcon('actions-move-up', Icon::SIZE_SMALL)->render();
             $html[] =                           '</a>';
             $html[] =                           '<a href="#"';
-            $html[] =                               ' class="btn btn-default t3js-btn-moveoption-down"';
+            $html[] =                               ' class="btn btn-default t3js-btn-option t3js-btn-moveoption-down"';
             $html[] =                               ' data-fieldname="' . htmlspecialchars($elementName) . '"';
             $html[] =                               ' title="' . htmlspecialchars($languageService->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.move_down')) . '"';
             $html[] =                           '>';
@@ -269,15 +272,15 @@ public function render()
         }
         if ($maxItems > 1 && $size >= 5) {
             $html[] =                           '<a href="#"';
-            $html[] =                               ' class="btn btn-default t3js-btn-moveoption-bottom"';
+            $html[] =                               ' class="btn btn-default t3js-btn-option t3js-btn-moveoption-bottom"';
             $html[] =                               ' data-fieldname="' . htmlspecialchars($elementName) . '"';
             $html[] =                               ' title="' . htmlspecialchars($languageService->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.move_to_bottom')) . '"';
             $html[] =                           '>';
             $html[] =                               $this->iconFactory->getIcon('actions-move-to-bottom', Icon::SIZE_SMALL)->render();
             $html[] =                           '</a>';
         }
         $html[] =                               '<a href="#"';
-        $html[] =                                   ' class="btn btn-default t3js-btn-removeoption"';
+        $html[] =                                   ' class="btn btn-default t3js-btn-option t3js-btn-removeoption"';
         $html[] =                                   ' data-fieldname="' . htmlspecialchars($elementName) . '"';
         $html[] =                                   ' title="' . htmlspecialchars($languageService->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.remove_selected')) . '"';
         $html[] =                               '>';
@@ -297,7 +300,7 @@ public function render()
         $html[] =                           '<select';
         $html[] =                               ' data-relatedfieldname="' . htmlspecialchars($elementName) . '"';
         $html[] =                               ' data-exclusivevalues="' . htmlspecialchars($config['exclusiveKeys']) . '"';
-        $html[] =                               ' id="' . StringUtility::getUniqueId('tceforms-multiselect-') . '"';
+        $html[] =                               ' id="' . $availableOptionsFieldId . '"';
         $html[] =                               ' data-formengine-input-name="' . htmlspecialchars($elementName) . '"';
         $html[] =                               ' class="form-control t3js-formengine-select-itemstoselect"';
         $html[] =                               ' size="' . $size . '"';
@@ -327,6 +330,12 @@ public function render()
         $html[] =   '</div>';
         $html[] = '</div>';
 
+        $resultArray['requireJsModules'][] = ['TYPO3/CMS/Backend/FormEngine/Element/SelectMultipleSideBySideElement' => '
+            function(SelectMultipleSideBySideElement) {
+                new SelectMultipleSideBySideElement(' . GeneralUtility::quoteJSvalue($selectedOptionsFieldId) . ', ' . GeneralUtility::quoteJSvalue($availableOptionsFieldId) . ');
+            }'
+        ];
+
         $resultArray['html'] = implode(LF, $html);
         return $resultArray;
     }

diff --git a/typo3/sysext/backend/Classes/Form/Element/TextElement.php b/typo3/sysext/backend/Classes/Form/Element/TextElement.php
@@ -146,8 +146,10 @@ public function render()
             }
         }
 
+        $fieldId = StringUtility::getUniqueId('formengine-textarea-');
+
         $attributes = [
-            'id' => StringUtility::getUniqueId('formengine-textarea-'),
+            'id' => $fieldId,
             'name' => htmlspecialchars($parameterArray['itemFormElName']),
             'data-formengine-validation-rules' => $this->getValidationDataAsJsonString($config),
             'data-formengine-input-name' => htmlspecialchars($parameterArray['itemFormElName']),
@@ -301,6 +303,11 @@ public function render()
             $fullElement = implode(LF, $fullElement);
         }
 
+        $resultArray['requireJsModules'][] = ['TYPO3/CMS/Backend/FormEngine/Element/TextElement' => '
+            function(TextElement) {
+                new TextElement(' . GeneralUtility::quoteJSvalue($fieldId) . ');
+            }'
+        ];
         $resultArray['html'] = '<div class="formengine-field-item t3js-formengine-field-item">' . $fieldInformationHtml . $fullElement . '</div>';
         return $resultArray;
     }

diff --git a/typo3/sysext/backend/Classes/Form/Element/TextTableElement.php b/typo3/sysext/backend/Classes/Form/Element/TextTableElement.php
@@ -151,8 +151,10 @@ public function render()
             }
         }
 
+        $fieldId = StringUtility::getUniqueId('formengine-textarea-');
+
         $attributes = [
-            'id' => StringUtility::getUniqueId('formengine-textarea-'),
+            'id' => $fieldId,
             'name' => htmlspecialchars($parameterArray['itemFormElName']),
             'data-formengine-validation-rules' => $this->getValidationDataAsJsonString($config),
             'data-formengine-input-name' => htmlspecialchars($parameterArray['itemFormElName']),
@@ -216,6 +218,11 @@ public function render()
         $html[] =   '</div>';
         $html[] = '</div>';
 
+        $resultArray['requireJsModules'][] = ['TYPO3/CMS/Backend/FormEngine/Element/TextTableElement' => '
+            function(TextTableElement) {
+                new TextTableElement(' . GeneralUtility::quoteJSvalue($fieldId) . ');
+            }'
+        ];
         $resultArray['html'] = implode(LF, $html);
         return $resultArray;
     }

diff --git a/typo3/sysext/backend/Classes/Form/FieldWizard/LocalizationStateSelector.php b/typo3/sysext/backend/Classes/Form/FieldWizard/LocalizationStateSelector.php
@@ -18,6 +18,7 @@
 use TYPO3\CMS\Backend\Form\AbstractNode;
 use TYPO3\CMS\Core\DataHandling\Localization\State;
 use TYPO3\CMS\Core\Localization\LanguageService;
+use TYPO3\CMS\Core\Utility\GeneralUtility;
 
 /**
  * Allows to define the localization state per field.
@@ -127,6 +128,11 @@ public function render(): array
         }
         $html[] = '</div>';
 
+        $result['requireJsModules'][] = ['TYPO3/CMS/Backend/FormEngine/FieldWizard/LocalizationStateSelector' => '
+            function(LocalizationStateSelector) {
+                new LocalizationStateSelector(' . GeneralUtility::quoteJSvalue($fieldElementName) . ');
+            }'
+        ];
         $result['html'] = implode(LF, $html);
         return $result;
     }