From 8cb3339dd588e10c80208670d55bf520a36d9789 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stefan=20B=C3=BCrk?= Date: Fri, 20 Dec 2024 10:29:00 +0100 Subject: [PATCH] [TASK] Ensure working PageLayout localization modal for v13 TYPO3 changes in a lot of areas including the backend JavaScript and CSS definition where the most part are taken as internal and not as public API. This can change in even in LTS versions, but most likely in newer major versions. With TYPO3 v13 context aware lightning (light/dark mode) has been introduces which is a hard thing for icons in regards of readability. To ensure that the `DeepL Translate` part within this localization model works for TYPO3 v13 this change ... * Adds the overriden TypeScript file along with the compiled JavaScript (compiled within a TYPO3 13.4 monorepo !) as documentation while also providing the compiled JavaScript in the public resources folder with a core version suffix while keeping the compiled v12 variant. * Modifies the `Configuration/JavaScriptModules.php` to override the TYPO3 core `localization` file with the custom file based for the current used core version. * Duplicates the action icon svg, slightly modified to be context aware and using the `currentColor` defined by the context to suite in both modes (light and dark). * Adds a custom CSS file to define a custom CSS class used within the overriden localization JavaScript code to ensure that icon labels breaks correctly. Workaround for a core bug in this area. [1][2] * Enforce loading the action icon as inline within the overriden localization JavaScript file to include the svg - otherwise the theme based context color would not take effect, which works around another known TYPO3 core bug. * A smaller unnice handling issue checking the extension configuration to allow or deny the next step for the deepltranslate modes has been streamlined as a side change. Mainly v13, v12 only partly due to general overhaul in TYPO3 v13. * Deepltranslate alert info when configuration is not fullfilled are no longer closeable (v12 + v13). The build system for the TypeScript -> JavaScript **must** be revised in the next year (2025) to be capable of building against multiple core versions. The v13 has been compiled and extracted directly in a TYPO3 Core Development instance using the monorepo on branch 13.4. [1] https://forge.typo3.org/issues/105853 [2] https://review.typo3.org/c/Packages/TYPO3.CMS/+/87576 --- Build/Sources/Core13/localization.js | 13 + Build/Sources/Core13/localization.ts | 485 ++++++++++++++++++ Build/Sources/TypeScript/localization.ts | 4 +- Classes/Hooks/PageRendererHook.php | 2 +- Configuration/Icons.php | 4 + Configuration/JavaScriptModules.php | 3 +- Resources/Public/Css/patch-105853.css | 6 + .../Icons/actions-localize-deepl-v13.svg | 9 + .../{Localization.js => localization12.js} | 20 +- Resources/Public/JavaScript/localization13.js | 13 + ext_localconf.php | 15 + 11 files changed, 566 insertions(+), 8 deletions(-) create mode 100644 Build/Sources/Core13/localization.js create mode 100644 Build/Sources/Core13/localization.ts create mode 100644 Resources/Public/Css/patch-105853.css create mode 100644 Resources/Public/Icons/actions-localize-deepl-v13.svg rename Resources/Public/JavaScript/{Localization.js => localization12.js} (96%) create mode 100644 Resources/Public/JavaScript/localization13.js diff --git a/Build/Sources/Core13/localization.js b/Build/Sources/Core13/localization.js new file mode 100644 index 00000000..8ed6f31e --- /dev/null +++ b/Build/Sources/Core13/localization.js @@ -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! + */ +import DocumentService from"@typo3/core/document-service.js";import $ from"jquery";import{SeverityEnum}from"@typo3/backend/enum/severity.js";import AjaxRequest from"@typo3/core/ajax/ajax-request.js";import Icons from"@typo3/backend/icons.js";import Modal from"@typo3/backend/modal.js";import MultiStepWizard from"@typo3/backend/multi-step-wizard.js";import"@typo3/backend/element/icon-element.js";import{MarkupIdentifiers}from"@typo3/backend/enum/icon-types.js";class Localization{constructor(){this.triggerButton=".t3js-localize",DocumentService.ready().then((()=>{this.initialize()}))}async initialize(){const e=await Icons.getIcon("actions-localize",Icons.sizes.large),t=await Icons.getIcon("actions-edit-copy",Icons.sizes.large),a=await Icons.getIcon("actions-localize-deepl",Icons.sizes.large,null,null,MarkupIdentifiers.inline);$(this.triggerButton).removeClass("disabled"),$(document).on("click",this.triggerButton,(async l=>{l.preventDefault();const o=$(l.currentTarget),n=[],i=[];if(0===o.data("allowTranslate")&&0===o.data("allowCopy"))return void Modal.confirm(TYPO3.lang["window.localization.mixed_mode.title"],TYPO3.lang["window.localization.mixed_mode.message"],SeverityEnum.warning,[{text:TYPO3?.lang?.["button.ok"]||"OK",btnClass:"btn-warning",name:"ok",trigger:(e,t)=>t.hideModal()}]);const c=await(await this.loadAvailableLanguages(parseInt(o.data("pageId"),10),parseInt(o.data("languageId"),10))).resolve();if(o.data("allowTranslate")&&(n.push('

'+TYPO3.lang["localize.educate.translate"]+"

"),i.push("localize")),o.data("allowCopy")&&(n.push('

'+TYPO3.lang["localize.educate.copy"]+"

"),i.push("copyFromLanguage")),n.push('

'+TYPO3.lang["localize.educate.deepltranslate"]+"

"),i.push("localizedeepl"),n.push('

'+TYPO3.lang["localize.educate.deepltranslateAuto"]+"

"),i.push("localizedeeplauto"),1===i.length)MultiStepWizard.set("localizationMode",i[0]);else{const e=document.createElement("div");e.dataset.bsToggle="buttons",e.append(...n.map((e=>document.createRange().createContextualFragment(e)))),MultiStepWizard.addSlide("localize-choose-action",TYPO3.lang["localize.wizard.header_page"].replace("{0}",o.data("page")).replace("{1}",o.data("languageName")),e,SeverityEnum.notice,TYPO3.lang["localize.wizard.step.selectMode"],((e,t)=>{void 0!==t.localizationMode&&MultiStepWizard.unlockNextStep()}))}1===c.length?MultiStepWizard.set("sourceLanguage",c[0].uid):MultiStepWizard.addSlide("localize-choose-language",TYPO3.lang["localize.view.chooseLanguage"],"",SeverityEnum.notice,TYPO3.lang["localize.wizard.step.chooseLanguage"],(async(e,t)=>{void 0!==t.sourceLanguage&&MultiStepWizard.unlockNextStep(),e.html('
'+await Icons.getIcon("spinner-circle",Icons.sizes.large)+"
"),MultiStepWizard.getComponent().on("change",".t3js-language-option",(e=>{MultiStepWizard.set("sourceLanguage",$(e.currentTarget).val()),MultiStepWizard.unlockNextStep()}));const a=$("
",{class:"row"});for(const e of c){const t="language"+e.uid,l=$("",{type:"radio",name:"language",id:t,value:e.uid,class:"btn-check t3js-language-option"}),o=$("