Fixed issue #19086: Survey Theme Options - image preview does not work (

#3557)
LimeSurvey · Nov 6, 2023 · 6c10200 · 6c10200
1 parent fbd4724
commit 6c10200
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 21 deletions.
diff --git a/application/views/themeOptions/options_core.php b/application/views/themeOptions/options_core.php
@@ -2,17 +2,13 @@
 
 $bInherit = (!empty($aTemplateConfiguration['sid']) || !empty($aTemplateConfiguration['gsid']));
 
-
 $dropdown_options['font'] = ($bInherit ? '<option value="inherit">' . gT("Inherit") . ' [' . gT(
     "inherited value:"
 ) . ' ' . (isset($oParentOptions['font']) ? $oParentOptions['font'] : '') . ']</option>' : '');
 
-
 // background file
 $backgroundImageFile           = '';
-$backgroundfileOptionsInherit  = '';
 $backgroundfileInheritPreview  = '';
-$backgroundfileInheritFilename = '';
 $optgroup                      = '';
 foreach ($aTemplateConfiguration['imageFileList'] as $image) {
     if ($image['group'] != $optgroup) {
@@ -24,20 +20,19 @@
     }
 
     $backgroundImageFile .= '</optgroup>';
-    if (isset($oParentOptions['backgroundimagefile']) && $oParentOptions['backgroundimagefile'] == $image['filepath']) {
-        $backgroundfileInheritPreview  = $backgroundfileInheritPreview . $image['preview'];
-        $backgroundfileInheritFilename = $backgroundfileInheritFilename . $image['filename'];
+
+    if (isset($oParentOptions['backgroundimagefile']) && ($oParentOptions['backgroundimagefile'] == $image['filepath'] || $oParentOptions['backgroundimagefile'] == $image['filepathOptions'])) {
+        $backgroundfileInheritPreview = $image['preview'];
     }
+
     $backgroundImageFile .= '<option data-lightbox-src="' . $image['preview'] . '" value="' . $image['filepath'] . '">' . $image['filename'] . '</option>';
 }
 
 $aOptionAttributes['optionAttributes']['backgroundimagefile']['dropdownoptions'] = $backgroundImageFile;
 
 // brand logo file
 $brandlogo               = '';
-$logofileOptionsInherit  = '';
 $logofileInheritPreview  = '';
-$logofileInheritFilename = '';
 $optgroup                = '';
 foreach ($aTemplateConfiguration['imageFileList'] as $image) {
     if ($image['group'] != $optgroup) {
@@ -49,10 +44,11 @@
     }
 
     $brandlogo .= '</optgroup>';
-    if ($oParentOptions['brandlogo'] == $image['filepath']) {
-        $logofileInheritPreview  = $logofileInheritPreview . $image['preview'];
-        $logofileInheritFilename = $logofileInheritFilename . $image['filename'];
+
+    if (isset($oParentOptions['brandlogofile']) && ($oParentOptions['brandlogofile'] == $image['filepath'] || $oParentOptions['brandlogofile'] == $image['filepathOptions'])) {
+        $logofileInheritPreview  = $image['preview'];
     }
+
     $brandlogo .= '<option data-lightbox-src="' . $image['preview'] . '" value="' . $image['filepath'] . '">' . $image['filename'] . '</option>';
 }
 
@@ -101,7 +97,6 @@
             echo '</div>';
         }
 
-
         foreach ($aOptionAttributes['optionAttributes'] as $attributeKey => $attribute) {
             $sParentOption = array_key_exists($attributeKey, $oParentOptions) ? $oParentOptions[$attributeKey] : '';
             if ($attributeKey === 'ajaxmode') {
@@ -168,17 +163,34 @@
                         // TODO: $aParentOptions is not loaded properly, it seems.
                         $sParentOption = 'N/A';
                     }
+                    $classes = [
+                        'form-select',
+                        'selector_option_value_field',
+                        'selector_radio_childfield',
+                    ];
+                    if ($category === 'Images') {
+                        $classes[] = 'selector_image_selector';
+                    }
+                    $classValue = implode(' ', $classes);
                     echo ' <div class="col-12">
-                                <select class="form-select selector_option_value_field selector_radio_childfield selector_image_selector" data-parent="' . $attribute['parent'] . '" data-inheritvalue=\'' . ($attributeKey == 'font' && isset($sPackagesToLoad) ? $sPackagesToLoad : $sParentOption) . '\' id="simple_edit_options_' . $attributeKey . '" name="' . $attributeKey . '"  >';
+                                <select class="' . $classValue . '" data-parent="' . $attribute['parent'] . '" data-inheritvalue=\'' . ($attributeKey == 'font' && isset($sPackagesToLoad) ? $sPackagesToLoad : $sParentOption) . '\' id="simple_edit_options_' . $attributeKey . '" name="' . $attributeKey . '"  >';
                     if ($bInherit) {
-                        if ($attributeKey == 'backgroundimagefile') {
-                            $inheritedValue = isset($backgroundfileInheritPreview) ? $backgroundfileInheritPreview : '';
-                        } elseif ($attributeKey == 'backgroundimagefile') {
-                            $inheritedValue = isset($logofileInheritPreview) ? $logofileInheritPreview : '';
-                        } else {
-                            $inheritedValue = isset($sParentOption) ? $sParentOption : '';
+
+                        $dataAttributes = '';
+                        $lightboxSrc = '';
+                        $inheritedValue = isset($sParentOption) ? $sParentOption : '';
+
+                        if ($attributeKey == 'backgroundimagefile' && !empty($backgroundfileInheritPreview)) {
+                            $lightboxSrc = $backgroundfileInheritPreview;
+                        } elseif ($attributeKey == 'brandlogofile' && !empty($logofileInheritPreview)) {
+                            $lightboxSrc =  $logofileInheritPreview;
                         }
-                        echo '<option value="inherit">' . gT("Inherit") . ' [' . gT("inherited value:") . ' ' . $inheritedValue . ']</option>';
+
+                        if ($category === 'Images') {
+                            $dataAttributes = 'data-lightbox-src="' . $lightboxSrc . '"';
+                        }
+
+                        echo '<option ' . $dataAttributes . ' value="inherit">' . gT("Inherit") . ' [' . gT("inherited value:") . ' ' . $inheritedValue . ']</option>';
                     }
                     // dropdown options from config.xml file
                     echo $aOptionAttributes['optionAttributes'][$attributeKey]['dropdownoptions'];

diff --git a/assets/packages/themeoptions-core/themeoptions-core.js b/assets/packages/themeoptions-core/themeoptions-core.js
@@ -74,6 +74,21 @@ var ThemeOptions = function () {
             optionObject[$(item).attr('name')] = $(item).val();
         });
 
+        globalForm.find('.selector_image_selector').each(function (i, item) {
+
+            // disable the preview image button if the image
+            // selected could not be mapped to one of the images
+            // that actually exists within the theme
+            const src = $(item).find('option:selected').data('lightbox-src');
+            const missing = src === '';
+            const itemId = $(item).attr('id');
+            const button = $(`button[data-bs-target="#${itemId}"]`);
+            button.prop('disabled', missing);
+
+            // add some feedback to the user, mark field invalid
+            $(item).toggleClass('is-invalid', missing);
+        });
+
         globalForm.find('.selector_option_radio_field ').each(function (i, item) {
             //disabled items should be inherit or false
             if ($(item).prop('disabled')) {