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

#3562)
LimeSurvey · Nov 9, 2023 · 09edd85 · 09edd85
1 parent 01e2716
commit 09edd85
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 22 deletions.
diff --git a/application/views/themeOptions/options_core.php b/application/views/themeOptions/options_core.php
@@ -4,13 +4,9 @@
 
 
     $dropdown_options['font'] = ($bInherit ? '<option value="inherit">' . gT("Inherit") . ' [' . gT("inherited value:") . ' ' . (isset($oParentOptions['font']) ? $oParentOptions['font'] : '') . ']</option>' : '');
-
-
     // background file
     $backgroundImageFile = '';
-    $backgroundfileOptionsInherit = '';
-    $backgroundfileInheritPreview = '';
-    $backgroundfileInheritFilename = '';
+    $backgroundfileInheritPreview  = '';
     $optgroup = '';
     foreach($aTemplateConfiguration['imageFileList'] as $image){
         if ($image['group'] != $optgroup){
@@ -22,20 +18,20 @@
         }
 
         $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){
@@ -47,10 +43,12 @@
         }
 
         $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>';
     }
 
@@ -158,23 +156,39 @@
                                     // TODO: $aParentOptions is not loaded properly, it seems.
                                     $sParentOption = 'N/A';
                                 }
+                                $classes = [
+                                    'form-control',
+                                    'selector_option_value_field',
+                                    'selector_radio_childfield',
+                                ];
+                                if ($category === 'Images') {
+                                    $classes[] = 'selector_image_selector';
+                                }
+                                $classValue = implode(' ', $classes);
                                 echo ' <div class="col-sm-12">
-                                <select class="form-control 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'];
                                 echo '</select>
                                     </div>';
-
                             } elseif ($attribute['type'] == 'icon'){
                                 echo ' <div class="col-sm-12 input-group">
                                 <select class="selector_option_value_field form-control simple_edit_options_checkicon" data-parent="' . $attribute['parent'] . '" id="simple_edit_options_' . $attributeKey . '" name="' . $attributeKey . '" >';

diff --git a/assets/packages/themeoptions-core/themeoptions-core.js b/assets/packages/themeoptions-core/themeoptions-core.js
@@ -70,6 +70,20 @@ 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-target="#${itemId}"]`);
+            button.prop('disabled', missing);
+
+            // add some feedback to the user, mark field invalid
+            $(item).parent().parent().toggleClass('has-error', missing);
+        });
+
         globalForm.find('.selector_option_radio_field ').each(function (i, item) {
             //disabled items should be inherit or false
             if ($(item).prop('disabled')) {