[TASK] Refactor JavaScript implementation

The issue on TYPO3 13 having the button label writing outside the
borders made a refactoring and regeneration of the localization.ts
necessary.

The labels were rewritten as CDATA to allow line breaks, getting rid of
the too long labels.

Together with TYPO3 Core standardized TSconfig for localizations the
overridden JavaScript is more lightweight and doesn't need the AjaxRoute
anymore.

Therefore the AjaxRoutes.php and AjaxController.php are removed.

In addition to Core functionality, the DeepL allow translateion now can
be enabled/disabled by the following setting in Page TSConfig:

```
# Enabled (Default)
mod.web_layout.localization.enableDeeplTranslate = 1
# Disabled
mod.web_layout.localization.enableDeeplTranslate = 0
```

This could be overridden in User TSconfig, too:
```
# Enabled (Default)
page.mod.web_layout.localization.enableDeeplTranslate = 1
# Disabled
page.mod.web_layout.localization.enableDeeplTranslate = 0
```

Author: calien666

Build/Sources/Core13/localization.ts

@@ -13,26 +13,21 @@
 
 import DocumentService from '@typo3/core/document-service';
 import $ from 'jquery';
-import { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
 import { SeverityEnum } from './enum/severity';
 import AjaxRequest from '@typo3/core/ajax/ajax-request';
 import Icons from './icons';
-import Modal, { ModalElement } from './modal';
-import MultiStepWizard, { MultiStepWizardSettings } from './multi-step-wizard';
+import Modal, { type ModalElement } from './modal';
+import MultiStepWizard, { type MultiStepWizardSettings } from './multi-step-wizard';
 import '@typo3/backend/element/icon-element';
-import { MarkupIdentifiers } from './enum/icon-types';
+import { MarkupIdentifiers } from '@typo3/backend/enum/icon-types';
 
 type LanguageRecord = {
   uid: number;
   title: string;
   flagIcon: string;
 };
 
-type DeeplSettings = {
-  status: boolean;
-  message: string;
-};
-
 type SummaryColumns = {
   columns: { [key: number]: string };
   columnList: Array<number>;
@@ -69,7 +64,6 @@ class Localization {
     //------------------------------------------------------------------------------------------------------------------
     const deeplIconMarkup = await Icons.getIcon('actions-localize-deepl', Icons.sizes.large, null, null, MarkupIdentifiers.inline);
     //------------------------------------------------------------------------------------------------------------------
-
     $(this.triggerButton).removeClass('disabled');
 
     $(document).on('click', this.triggerButton, async (e: JQueryEventObject): Promise<void> => {
@@ -101,14 +95,12 @@ class Localization {
         parseInt($triggerButton.data('languageId'), 10),
       )).resolve();
 
-      // const deeplSettings: DeeplSettings = await (await this.deeplSettings()).resolve();
-
       if ($triggerButton.data('allowTranslate')) {
         actions.push(
           '<div class="row">'
           + '<div class="col-sm-3">'
           + '<input class="btn-check t3js-localization-option" type="radio" name="mode" id="mode_translate" value="localize">'
-          + '<label class="btn btn-default btn-block-vertical deepl-translate-modal-icon-text-alignment" for="mode_translate" data-action="localize">'
+          + '<label class="btn btn-default btn-block-vertical" for="mode_translate" data-action="localize">'
           + localizeIconMarkup
           + TYPO3.lang['localize.wizard.button.translate']
           + '</label>'
@@ -126,7 +118,7 @@ class Localization {
           '<div class="row">'
           + '<div class="col-sm-3">'
           + '<input class="btn-check t3js-localization-option" type="radio" name="mode" id="mode_copy" value="copyFromLanguage">'
-          + '<label class="btn btn-default btn-block-vertical deepl-translate-modal-icon-text-alignment" for="mode_copy" data-action="copy">'
+          + '<label class="btn btn-default btn-block-vertical" for="mode_copy" data-action="copy">'
           + copyIconMarkup
           + TYPO3.lang['localize.wizard.button.copy']
           + '</label>'
@@ -140,44 +132,40 @@ class Localization {
       }
 
       // deepltranslate
-      actions.push(
-        '<div class="row" id="deeplTranslate">'
-        + '<div class="col-sm-3">'
-        + '<input class="btn-check t3js-localization-option" type="radio" name="mode" id="mode_deepltranslateauto" value="localizedeepl">'
-        + '<label class="btn btn-default btn-block-vertical deepl-translate-modal-icon-text-alignment" for="mode_deepltranslateauto" data-action="deepltranslate">'
-        + deeplIconMarkup
-        + TYPO3.lang['localize.educate.deepltranslateHeader']
-        + '</label>'
-        + '</div>'
-        + '<div class="col-sm-9" id="deeplText">'
-        + '<div class=\'alert alert-danger\' hidden>'
-        + TYPO3.lang['localize.educate.deeplSettingsFailure']
-        + '</div>'
-        + '<p class="t3js-helptext t3js-helptext-copy text-body-secondary">' + TYPO3.lang['localize.educate.deepltranslate'] + '</p>'
-        + '</div>'
-        + '</div>',
-      );
-      availableLocalizationModes.push('localizedeepl');
-
-      // deepltranslate-auto
-      actions.push(
-        '<div class="row" id="deeplTranslateAuto">'
-        + '<div class="col-sm-3">'
-        + '<input class="btn-check t3js-localization-option" type="radio" name="mode" id="mode_deepltranslate" value="localizedeeplauto">'
-        + '<label class="btn btn-default btn-block-vertical deepl-translate-modal-icon-text-alignment" for="mode_deepltranslate" data-action="deepltranslate">'
-        + deeplIconMarkup
-        + TYPO3.lang['localize.educate.deepltranslateHeaderAutodetect']
-        + '</label>'
-        + '</div>'
-        + '<div class="col-sm-9" id="deeplTextAuto">'
-        + '<div class=\'alert alert-danger\' hidden>'
-        + TYPO3.lang['localize.educate.deeplSettingsFailure']
-        + '</div>'
-        + '<p class="t3js-helptext t3js-helptext-copy text-body-secondary">' + TYPO3.lang['localize.educate.deepltranslateAuto'] + '</p>'
-        + '</div>'
-        + '</div>',
-      );
-      availableLocalizationModes.push('localizedeeplauto');
+      if ($triggerButton.data('allowDeeplTranslate')) {
+        actions.push(
+          '<div class="row" id="deeplTranslate">'
+          + '<div class="col-sm-3">'
+          + '<input class="btn-check t3js-localization-option" type="radio" name="mode" id="mode_deepltranslate" value="localizedeepl">'
+          + '<label class="btn btn-default btn-block-vertical" for="mode_deepltranslate" data-action="deepltranslate">'
+          + deeplIconMarkup
+          + TYPO3.lang['localize.educate.deepltranslateHeader']
+          + '</label>'
+          + '</div>'
+          + '<div class="col-sm-9" id="deeplText">'
+          + '<p class="t3js-helptext t3js-helptext-copy text-body-secondary">' + TYPO3.lang['localize.educate.deepltranslate'] + '</p>'
+          + '</div>'
+          + '</div>',
+        );
+        availableLocalizationModes.push('localizedeepl');
+
+        // deepltranslate-auto
+        actions.push(
+          '<div class="row" id="deeplTranslateAuto">'
+          + '<div class="col-sm-3">'
+          + '<input class="btn-check t3js-localization-option" type="radio" name="mode" id="mode_deepltranslateauto" value="localizedeeplauto">'
+          + '<label class="btn btn-default btn-block-vertical" for="mode_deepltranslateauto" data-action="deepltranslate">'
+          + deeplIconMarkup
+          + TYPO3.lang['localize.educate.deepltranslateHeaderAutodetect']
+          + '</label>'
+          + '</div>'
+          + '<div class="col-sm-9" id="deeplTextAuto">'
+          + '<p class="t3js-helptext t3js-helptext-copy text-body-secondary">' + TYPO3.lang['localize.educate.deepltranslateAuto'] + '</p>'
+          + '</div>'
+          + '</div>',
+        );
+        availableLocalizationModes.push('localizedeeplauto');
+      }
 
       if (availableLocalizationModes.length === 1) {
         MultiStepWizard.set('localizationMode', availableLocalizationModes[0]);
@@ -279,7 +267,7 @@ class Localization {
 
             const column = columns[colPos];
             const rowElement = document.createElement('div');
-            rowElement.classList.add('row', 'gy-2')
+            rowElement.classList.add('row', 'gy-2');
 
             result.records[colPos].forEach((record: SummaryColPosRecord): void => {
               const label = ' (' + record.uid + ') ' + record.title;
@@ -397,38 +385,8 @@ class Localization {
         MultiStepWizard.show();
 
         MultiStepWizard.getComponent().on('change', '.t3js-localization-option', (optionEvt: JQueryEventObject): void => {
-          const localizationMode = $(optionEvt.currentTarget).val();
-          const divDeepl: HTMLElement = window.parent.document.querySelector('#deeplText .alert');
-          const divDeeplAuto: HTMLElement = window.parent.document.querySelector('#deeplTextAuto .alert');
-          if (localizationMode === 'localizedeepl' || localizationMode === 'localizedeeplauto') {
-            const selector = localizationMode == 'localizedeepl' ? '#deeplText .alert' : '#deeplTextAuto .alert';
-            const divDeeplSelector: HTMLElement = window.parent.document.querySelector(selector);
-            //------------------------------------------------------------------------------------------------------------
-            // deepltranslate-added
-            //------------------------------------------------------------------------------------------------------------
-            this.deeplSettings().then(async (response) => {
-              const deeplSettings : DeeplSettings = await(response.resolve());
-              if (deeplSettings.status === false) {
-                MultiStepWizard.lockNextStep();
-                divDeepl.hidden = true;
-                divDeeplAuto.hidden = true;
-                divDeeplSelector.hidden = false;
-              } else {
-                divDeepl.hidden = true;
-                divDeeplAuto.hidden = true;
-                MultiStepWizard.set('localizationMode', $(optionEvt.currentTarget).val());
-                MultiStepWizard.unlockNextStep();
-              }
-            });
-            //------------------------------------------------------------------------------------------------------------
-          } else {
-            divDeepl.hidden = true;
-            divDeeplAuto.hidden = true;
-            // original from TYPO3 outset the deeplSettings() promise handling
-            MultiStepWizard.set('localizationMode', $(optionEvt.currentTarget).val());
-            MultiStepWizard.unlockNextStep();
-            // ^^ original TYPO3
-          }
+          MultiStepWizard.set('localizationMode', $(optionEvt.currentTarget).val());
+          MultiStepWizard.unlockNextStep();
         });
       });
     });
@@ -471,15 +429,6 @@ class Localization {
       uidList: uidList,
     }).get();
   }
-
-  /**
-   * Returns status of deepl configuration, is not set Deepl Button are disabled
-   *
-   * @returns {Promise<AjaxResponse>}
-   */
-  private deeplSettings(): Promise<AjaxResponse> {
-    return new AjaxRequest(TYPO3.settings.ajaxUrls.deepl_check_configuration).get();
-  }
 }
 
 export default new Localization();

Classes/Configuration.php

@@ -4,6 +4,7 @@
 
 namespace WebVision\Deepltranslate\Core;
 
+use TYPO3\CMS\Backend\Utility\BackendUtility;
 use TYPO3\CMS\Core\Configuration\Exception\ExtensionConfigurationExtensionNotConfiguredException;
 use TYPO3\CMS\Core\Configuration\Exception\ExtensionConfigurationPathDoesNotExistException;
 use TYPO3\CMS\Core\Configuration\ExtensionConfiguration;
@@ -29,4 +30,20 @@ public function getApiKey(): string
     {
         return $this->apiKey;
     }
+
+    /**
+     * Checks translation allowed against Page TSconfig from settings
+     *
+     * @param int $pageId
+     * @return bool
+     * @throws \JsonException
+     */
+    public function isDeeplTranslationAllowedOnPage(int $pageId): bool
+    {
+        $localizationConfiguration = BackendUtility::getPagesTSconfig($pageId)['mod.']['web_layout.']['localization.'] ?? [];
+        if ((bool)($localizationConfiguration['enableDeeplTranslate'] ?? true) === false) {
+            return false;
+        }
+        return true;
+    }
 }

Classes/ConfigurationInterface.php

@@ -13,4 +13,6 @@
 interface ConfigurationInterface
 {
     public function getApiKey(): string;
+
+    public function isDeeplTranslationAllowedOnPage(int $pageId): bool;
 }

Classes/Controller/Backend/AjaxController.php

@@ -7,20 +7,26 @@
 use Psr\EventDispatcher\EventDispatcherInterface;
 use TYPO3\CMS\Backend\Controller\Event\RenderAdditionalContentToRecordListEvent;
 use TYPO3\CMS\Core\Site\Entity\Site;
+use WebVision\Deepltranslate\Core\ConfigurationInterface;
 use WebVision\Deepltranslate\Core\Event\RenderLocalizationSelectAllowed;
 use WebVision\Deepltranslate\Core\Form\TranslationDropdownGenerator;
 
 final class RenderLocalizationSelect
 {
     public function __construct(
         private readonly TranslationDropdownGenerator $generator,
-        private readonly EventDispatcherInterface $eventDispatcher
+        private readonly EventDispatcherInterface $eventDispatcher,
+        private readonly ConfigurationInterface $configuration
     ) {
     }
 
     public function __invoke(RenderAdditionalContentToRecordListEvent $event): void
     {
         $request = $event->getRequest();
+        $currentPageId = (int)($request->getQueryParams()['id'] ?? 0);
+        if (!$this->configuration->isDeeplTranslationAllowedOnPage($currentPageId)) {
+            return;
+        }
         // Check, if some event listener doesn't allow rendering here.
         // For use cases see Event
         $renderingAllowedEvent = $this->eventDispatcher->dispatch(new RenderLocalizationSelectAllowed($request));

Classes/Event/Listener/RenderLocalizationSelect.php

@@ -5,19 +5,31 @@
 namespace WebVision\Deepltranslate\Core\ViewHelpers\Be\Access;
 
 use TYPO3\CMS\Core\Authentication\BackendUserAuthentication;
+use TYPO3\CMS\Core\Utility\GeneralUtility;
+use TYPO3\CMS\Fluid\Core\Rendering\RenderingContext;
 use TYPO3Fluid\Fluid\Core\Rendering\RenderingContextInterface;
 use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractConditionViewHelper;
 use WebVision\Deepltranslate\Core\Access\AllowedTranslateAccess;
+use WebVision\Deepltranslate\Core\ConfigurationInterface;
 
+/**
+ * @internal This ViewHelper is marked internal and only to be used within
+ * the DeepL translate packages and therefore no public API.
+ */
 final class DeeplTranslateAllowedViewHelper extends AbstractConditionViewHelper
 {
-    public function initializeArguments(): void
-    {
-        parent::initializeArguments();
-    }
-
     public static function verdict(array $arguments, RenderingContextInterface $renderingContext): bool
     {
+        $deeplConfiguration = GeneralUtility::makeInstance(ConfigurationInterface::class);
+        if ($deeplConfiguration->getApiKey() === '') {
+            return false;
+        }
+        /** @var RenderingContext $renderingContext */
+        $currentPageId = (int)($renderingContext->getRequest()?->getQueryParams()['id'] ?? 0);
+        // set default to true avoiding breaking behaviour issues
+        if (!$deeplConfiguration->isDeeplTranslationAllowedOnPage($currentPageId)) {
+            return false;
+        }
         if (self::getBackendUserAuthentication()->check('custom_options', AllowedTranslateAccess::ALLOWED_TRANSLATE_OPTION_VALUE)) {
             return true;
         }

Classes/ViewHelpers/Be/Access/DeeplTranslateAllowedViewHelper.php

@@ -12,16 +12,16 @@
 				<target>Mit DeepL übersetzen</target>
 			</trans-unit>
 			<trans-unit id="localize.educate.deepltranslateHeader">
-				<source>Translate with DeepL</source>
-				<target>Mit DeepL übersetzen</target>
+				<source>DeepL Translate</source>
+				<target>DeepL Übersetzung</target>
 			</trans-unit>
 			<trans-unit id="localize.educate.deepltranslateHeaderAutodetect">
-				<source>Translate with DeepL (autodetect)</source>
-				<target>Mit DeepL übersetzen (autodetect)</target>
+				<source><![CDATA[DeepL Translate<br>(autodetect)]]></source>
+				<target><![CDATA[DeepL Übersetzung<br>(autodetect)]]></target>
 			</trans-unit>
 			<trans-unit id="localize.educate.deepltranslate" xml:space="preserve">
-				<source><![CDATA[Translating content using DeepL Translate will create a translation from the source language to the language translation you selected. The translated content will be fetched from DeepL translation service (DeepL claims 99 percentage accuracy). The DeepL service supports translation to and from English, French, German, Spanish, Italian, Dutch, and Polish languages. Other languages will be ignored and will default to the normal translate operation of TYPO3.]]></source>
-				<target><![CDATA[Wenn Sie Inhalte mit DeepL Translate übersetzen, wird eine Übersetzung von der Ausgangssprache in die von Ihnen ausgewählte Sprache erstellt. Der übersetzte Inhalt wird vom DeepL Übersetzungsdienst abgerufen (DeepL behauptet eine 99-prozentige Genauigkeit). Der Dienst DeepL unterstützt die Übersetzung in und aus den Sprachen Englisch, Französisch, Deutsch, Spanisch, Italienisch, Niederländisch und Polnisch. Andere Sprachen werden ignoriert und die normale Übersetzungsfunktion von TYPO3 wird verwendet.]]></target>
+				<source><![CDATA[Translating content via DeepL translate will create a translation from source language to the language you translate to. The translated content will be from DeepL translation service which is 99% accurate. DeepL service supports translation to and from <a href="https://developers.deepl.com/docs/getting-started/supported-languages" target="_blank">different languages</a>. Other languages will be ignored and will default to the normal translate operation of TYPO3.]]></source>
+				<target><![CDATA[Die Übersetzung von Inhalten über DeepL translate erstellt eine Übersetzung von der Ausgangssprache in die Sprache, in die Sie übersetzen. Der übersetzte Inhalt wird vom DeepL Übersetzungsdienst stammen, der zu 99% genau ist. Der Dienst DeepL unterstützt die Übersetzung in und aus <a href="https://developers.deepl.com/docs/getting-started/supported-languages" target="_blank">verschiedenen Sprachen</a>. Andere Sprachen werden ignoriert und es wird die normale Übersetzungsfunktion von TYPO3 verwendet.]]></target>
 			</trans-unit>
 			<trans-unit id="localize.educate.deepltranslateAuto" xml:space="preserve">
 				<source><![CDATA[Translating content using DeepL Translate (autodetect) will create a translation from the auto detected source language to the language translation you selected. The translated content will be fetched from DeepL translation service (DeepL claims 99 percentage accuracy). The DeepL service supports translation to and from English, French, German, Spanish, Italian, Dutch, and Polish languages. Other languages will be ignored and will default to the normal translate operation of TYPO3.]]></source>