generator: fix font selection

admin/generator/index.php

@@ -236,6 +236,7 @@
             justify-content: center;
         }
     </style>
+    <style id="fontselectedStyle"></style>
     <div class="w-full flex items-center justify-center flex-col">
         <div class="w-full max-w-[1500px] rounded-lg p-4 md:p-8 bg-white flex flex-col shadow-xl place-items-center relative">
             <div class="w-full text-center flex flex-col items-center justify-center text-2xl font-bold text-brand-1 mb-2">
@@ -722,7 +723,7 @@
                     <div id="collage_frame" class="absolute h-full w-full">
                         <img class="h-full w-full hidden" src="" alt="Choose the frame">
                     </div>
-                    <div id="collage_text" class="absolute h-full">
+                    <div id="collage_text" class="absolute h-full font-selected">
                         <div class='relative'>
                             <div class='absolute whitespace-nowrap origin-top-left text-line-1 leading-none'></div>
                             <div class='absolute whitespace-nowrap origin-top-left text-line-2 leading-none'></div>

assets/js/admin/fontSelect.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line no-unused-vars
-function adminFontSelect(element, path) {
+function adminFontSelect(element, path, fontclass) {
     const parent = element.closest('.adminFontSelection');
     const origin = element.dataset.origin;
     const src = element.src;
@@ -10,6 +10,7 @@ function adminFontSelect(element, path) {
     previewElement.src = src;
     textElement.textContent = origin;
     inputElement.value = origin;
+    inputElement.setAttribute('data-fontclass', fontclass);
 
     const event = new Event('change');
     inputElement.dispatchEvent(event);

assets/js/admin/generator.js

@@ -103,9 +103,9 @@ function loadCurrentConfig() {
     //text
     $('input[name=\'text_enabled\'][data-trigger=\'general\']').prop('checked', text_enabled);
     $('input[name=\'text_font_family\']').val(font_family);
-    let fClass = $('input[name=\'text_font_family\']').data('fontclass');
+    $('input[name=\'text_font_family\']')[0].setAttribute('data-fontclass', 'font-selected');
     $('#fontselectedStyle').html(
-        `@font-face{font-family:"fontselected";src:url(${font_family}) format("truetype");} .${fClass}{font-family:"fontselected",Verdena,Tahoma;}`
+        `@font-face{font-family:"fontselected";src:url(${font_family}) format("truetype");} .font-selected{font-family:"fontselected",Verdena,Tahoma;}`
     );
     $('input[name=\'text_font_color\']').attr('value', font_color);
     $('input[name=\'text_font_size\']').attr('value', font_size);
@@ -157,7 +157,7 @@ function changeGeneralSetting() {
     const c_show_background = $('input[name=\'show-background\'][data-trigger=\'general\']').is(':checked');
 
     const c_text_enabled = $('input[name=\'text_enabled\'][data-trigger=\'general\']').is(':checked');
-    let c_text_font = $('input[name=\'text_font_family\']').data('fontclass');
+    let c_text_font = $('input[name=\'text_font_family\']')[0].getAttribute('data-fontclass');
     let c_text_font_unique_id = $('input[name=\'text_font_family\']').data('unique-id');
     let c_text_font_value = $('input[name=\'text_font_family\']').val();
     const c_font_color = $('input[name=\'text_font_color\']').val();
@@ -217,15 +217,15 @@ function changeGeneralSetting() {
         left: adjusted_tl + 'px'
     });
     if (c_text_font_value.startsWith('http')) {
-        c_text_font = `customfont-${c_text_font_unique_id}`;
+        c_text_font = `font-${c_text_font_unique_id}`;
         $('#fontselectedStyle').html(
             `@font-face{font-family:"fontselected";src:url(${c_text_font_value}) format("truetype");} .${c_text_font}{font-family:"fontselected",Verdena,Tahoma;}`
         );
     }
     collageTextDOM.removeClass((index, classes) =>
         classes
             .split(' ')
-            .filter((cName) => cName.startsWith('customfont'))
+            .filter((cName) => cName.startsWith('font-'))
             .join(' ')
     );
     collageTextDOM.addClass(c_text_font);

src/Utility/AdminInput.php

@@ -347,6 +347,13 @@ public static function renderFontSelect(array $setting, string $label): string
         $languageService = LanguageService::getInstance();
         $fonts = '';
 
+        $attributes = '';
+        if (isset($setting['attributes'])) {
+            foreach ($setting['attributes'] as $key => $prop) {
+                $attributes .= $key . '="' . $prop . '" ';
+            }
+        }
+
         if (isset($setting['paths']) && is_array($setting['paths'])) {
             $pathIndex = 0;
             foreach ($setting['paths'] as $path) {
@@ -355,6 +362,7 @@ public static function renderFontSelect(array $setting, string $label): string
                     <h2 class="font-bold">' . PathUtility::getPublicPath($path) . '</h2>
                 </div>
             ';
+                $fontClassName = 'font-' . $pathIndex;
                 try {
                     $files = FontUtility::getFontsFromPath($path, false);
                     $files = array_map(fn ($file): string => PathUtility::getPublicPath($file), $files);
@@ -365,14 +373,18 @@ public static function renderFontSelect(array $setting, string $label): string
                         </div>
                     ';
                     }
-                    foreach ($files as $file) {
+                    $fontIndex = 0;
+                    foreach ($files as $name => $path) {
+                        $fontClassName .= '-' . $fontIndex;
                         $imageAttributes = [
-                            'onClick' => 'adminFontSelect(this, "' . $setting['name'] . '");',
-                            'data-origin' => $file,
-                            'title' => $file,
-                            'class' => 'w-full h-full left-0 top-0 absolute object-contain cursor-pointer'
+                            'onClick' => 'adminFontSelect(this, "' . $setting['name'] . '", "' . $fontClassName . '");',
+                            'data-origin' => $path,
+                            'title' => $name,
+                            'class' => 'w-full h-full left-0 top-0 absolute object-contain cursor-pointer',
                         ];
-                        $fonts .= '<div class="w-full relative h-0 pb-2/3">' . FontUtility::getFontPreviewImage(fontPath: $file, attributes: $imageAttributes) . '</div>';
+                        $fonts .= '<style>.' . $fontClassName . ' {font-family:"' . $name . '"}</style>';
+                        $fonts .= '<div class="w-full relative h-0 pb-2/3">' . FontUtility::getFontPreviewImage(fontPath: $path, attributes: $imageAttributes) . '</div>';
+                        $fontIndex++;
                     }
                 } catch (\Exception $e) {
                     $fonts .= '
@@ -428,6 +440,7 @@ public static function renderFontSelect(array $setting, string $label): string
                     class="w-full h-10 border-2 border-solid border-gray-300 focus:border-brand-1 rounded-md px-3 mt-auto"
                     name="' . $setting['name'] . '"
                     value="' . $setting['value'] . '"
+					' . $attributes . '
                 />
             </div>
         ';