[BUGFIX] Flag icon rendering

[TASK] Remove unused method
pagemachine · Jul 11, 2024 · 91a26c8 · 91a26c8
1 parent 3376dd9
commit 91a26c8
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 20 deletions.
diff --git a/Classes/Controller/Backend/ImageRecognizeController.php b/Classes/Controller/Backend/ImageRecognizeController.php
@@ -15,13 +15,16 @@
 use Psr\Http\Message\UriInterface;
 use TYPO3\CMS\Backend\Routing\UriBuilder;
 use TYPO3\CMS\Backend\Template\ModuleTemplateFactory;
+use TYPO3\CMS\Core\Imaging\Icon;
+use TYPO3\CMS\Core\Imaging\IconFactory;
 use TYPO3\CMS\Core\Resource\AbstractFile;
 use TYPO3\CMS\Core\Resource\Exception\ResourceDoesNotExistException;
 use TYPO3\CMS\Core\Resource\FileInterface;
 use TYPO3\CMS\Core\Resource\FolderInterface;
 use TYPO3\CMS\Core\Resource\ResourceFactory;
 use TYPO3\CMS\Core\Site\Entity\SiteLanguage;
 use TYPO3\CMS\Core\Site\SiteFinder;
+use TYPO3\CMS\Core\Type\Icon\IconState;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
 use TYPO3\CMS\Core\Utility\VersionNumberUtility;
 use TYPO3\CMS\Extbase\Mvc\Controller\ActionController;
@@ -76,13 +79,13 @@ protected function getFileMetaDataEditLink(int $uid, string $returnUrl = null):
             ->buildUriFromRoute('record_edit', $uriParameters);
     }
 
-    protected function getFileMetaDatGenerateLink(string $target): UriInterface
-    {
-        $uriParameters = [
-            'target' => $target,
-        ];
-        return $this->backendUriBuilder
-            ->buildUriFromRoute('ajax_aitools_ai_tools_images', $uriParameters);
+    protected function getLanguageFlagHtml($identifier, $title='', $size=Icon::SIZE_LARGE, $overlay='', $state=IconState::STATE_DEFAULT) {
+        $iconFactory = GeneralUtility::makeInstance(IconFactory::class);
+        $icon = $iconFactory->getIcon($identifier, $size, $overlay, IconState::cast($state));
+        if ($title ?? false) {
+            $icon->setTitle($title);
+        }
+        return $icon->render();
     }
 
     /**
@@ -222,8 +225,7 @@ public function ajaxMetaGenerateAction(ServerRequestInterface $request): Respons
                             $translations[] = [
                                 'languageId' => $siteLanguage->getLanguageId(),
                                 'title' => $siteLanguage->getTitle(),
-                                //'languageCode' => $this->getLocaleLanguageCode($siteLanguage),
-                                'languageFlagIdentifier' => str_replace('flags-', '', $siteLanguage->getFlagIdentifier()),
+                                'flagHtml' => $this->getLanguageFlagHtml($siteLanguage->getFlagIdentifier(), $siteLanguage->getTitle()),
                                 'altTextTranslated' => $altTextTranslated,
                                 'editLink' => (string)$this->getFileMetaDataEditLink($metaDataUid),
                             ];

diff --git a/Resources/Private/Templates/Backend/ImageRecognize/AjaxMetaGenerate.html b/Resources/Private/Templates/Backend/ImageRecognize/AjaxMetaGenerate.html
@@ -41,20 +41,21 @@
             border-radius: 8px;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
             display: flex;
-            align-items: flex-start; /* Align items to the start to ensure proper alignment */
+            align-items: flex-start;
         }
-        .otherLanguages li img {
+        .otherLanguages li .icon {
             vertical-align: middle;
             display: block;
-            margin-right: 10px; /* Space between image and text */
-            flex-shrink: 0; /* Prevent the image from shrinking */
-            width: 30px; /* Fixed width for the flag */
+            margin-right: 10px;
+            flex-shrink: 0;
+            width: 30px;
+            height: 30px;
         }
         .otherLanguages li a {
             text-decoration: none;
             color: #000;
             transition: color 0.3s;
-            flex-grow: 1; /* Allow the link to take up the remaining space */
+            flex-grow: 1;
         }
         .otherLanguages li a:hover {
             color: #0056b3;
@@ -158,7 +159,7 @@ <h1>Generate File Metadata "{fileObject.name}"</h1>
                                                     <f:for as="siteLanguage" each="{siteLanguages}">
                                                         <f:if condition="{siteLanguage.languageId} == {metaLanguage.sys_language_uid}">
                                                             <f:then>
-                                                                <img src="/typo3/sysext/core/Resources/Public/Icons/Flags/{siteLanguage.flagIdentifier -> vhs:format.replace(substring: 'flags-', replacement: '')}.webp" alt="" title="{siteLanguage.title}" />
+                                                                <core:icon title="{siteLanguage.title}" identifier="{siteLanguage.flagIdentifier}" size="large" />
                                                             </f:then>
                                                         </f:if>
                                                     </f:for>

diff --git a/Resources/Public/JavaScript/AjaxMetaGenerate.js b/Resources/Public/JavaScript/AjaxMetaGenerate.js
@@ -164,11 +164,10 @@ function callAjaxMetaSaveAction(fileIdentifier, textarea, doTranslate, button, b
           let ul = document.createElement('ul');
           response.translations.forEach((translation) => {
             let li = document.createElement('li');
-            let img = document.createElement('img');
+            let icon = document.createElement('div');
             let link = document.createElement('a');
-            img.src = '/typo3/sysext/core/Resources/Public/Icons/Flags/' + translation.languageFlagIdentifier + '.webp'; // Adjust the path as necessary
-            img.title = translation.title;
-            li.appendChild(img);
+            icon.innerHTML = translation.flagHtml;
+            li.appendChild(icon.firstChild);
 
             link.href = translation.editLink + '&returnUrl=' + encodeURIComponent(currentUrl);
             link.textContent = ' ' + translation.altTextTranslated;