From e455d7939bfad20075d2805740f6912b58a3babe Mon Sep 17 00:00:00 2001
From: alexanderroese <github@roese.dev>
Date: Wed, 17 Jul 2024 20:06:28 +0200
Subject: [PATCH] select with images

---
 snippets/product-variant-picker.liquid | 14 ++++-----
 snippets/shx-3d-render-input.liquid    | 40 ++++++++++++++++++++++----
 2 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/snippets/product-variant-picker.liquid b/snippets/product-variant-picker.liquid
index 7ff894e..af2ed86 100644
--- a/snippets/product-variant-picker.liquid
+++ b/snippets/product-variant-picker.liquid
@@ -134,7 +134,7 @@
               </div>
             </div>
           </button>
-          <div class="shx-custom-enhanced-dropdown-content shx-custom-enhanced-dropdown-variant-picker-dropdown-content" id="shx-custom-enhanced-dropdown-variant-picker-dropdown-content">
+          <div class="shx-custom-enhanced-dropdown-content shx-custom-enhanced-dropdown-variant-dropdown-content" id="shx-custom-enhanced-dropdown-variant-dropdown-content">
             {% for product_variant in product.variants %}
               <div data-value="{{ product_variant.title }}" {% if option.selected_value == product_variant.title %}class="shx-custom-variant-picker-selected-variant"{% endif %}>
                 <img src="{{ product_variant.featured_image.src | image_url }}" height="100" width="100" style="border-radius: 4px">
@@ -150,15 +150,15 @@
 
         <script>
           const selectElement = document.querySelector('.shx-custom-enhanced-dropdown-variant-hide-dummy-select');
-          const dropdownContent = document.getElementById('shx-custom-enhanced-dropdown-variant-picker-dropdown-content');
-          const selectedButton = document.getElementById('shx-custom-enhanced-dropdown-variant-select-button'); 
+          const dropdownContent = document.getElementById('shx-custom-enhanced-dropdown-variant-dropdown-content');
+          const selectButton = document.getElementById('shx-custom-enhanced-dropdown-variant-select-button'); 
           const customSelectedValue = document.getElementById('shx-custom-enhanced-dropdown-variant-select-selected-value')
           
-          selectedButton.addEventListener('click', function() {
+          selectButton.addEventListener('click', function() {
             dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';
           });
         
-          document.querySelectorAll('.shx-custom-enhanced-dropdown-variant-picker-dropdown-content div').forEach(item => {
+          document.querySelectorAll('.shx-custom-enhanced-dropdown-variant-dropdown-content div').forEach(item => {
             item.addEventListener('click', event => {
               const selectedVariant = event.currentTarget.getAttribute('data-value');
               customSelectedValue.innerText = selectedVariant;
@@ -171,7 +171,7 @@
               selectElement.dispatchEvent(eventChange);
         
               // Remove the selected style from all items
-              document.querySelectorAll('.shx-custom-enhanced-dropdown-variant-picker-dropdown-content div').forEach(div => {
+              document.querySelectorAll('.shx-custom-enhanced-dropdown-variant-dropdown-content div').forEach(div => {
                 div.classList.remove('shx-custom-enhanced-dropdown-variant-selected');
               });
         
@@ -190,7 +190,7 @@
         
           // Close the dropdown if the user clicks outside of it
           window.addEventListener('click', function(event) {
-            if (!event.target.matches('.shx-custom-enhanced-dropdown-dropbtn')) {
+            if (!event.target.matches('#shx-custom-enhanced-dropdown-variant-select-button')) {
               if (dropdownContent.style.display === 'block') {
                 dropdownContent.style.display = 'none';
               }
diff --git a/snippets/shx-3d-render-input.liquid b/snippets/shx-3d-render-input.liquid
index 7b329c4..cf3af5f 100644
--- a/snippets/shx-3d-render-input.liquid
+++ b/snippets/shx-3d-render-input.liquid
@@ -589,13 +589,41 @@
     }
 
     function toggleCustomEnhancedDropdownFont() {
-        console.log("toggleCustomEnhancedDropdownFont")
-            
-        const dropdownContent = document.getElementById("shx-custom-enhanced-dropdown-font-content")
+        const dropdownContent = document.getElementById("shx-custom-enhanced-dropdown-font-dropdown-content")
 
         dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';
     }
 
+    function onFontDropdownItemClick(event) {
+        console.log("onFontDropdownItemClick")
+
+        const selectedVariant = event.currentTarget.getAttribute('data-value');
+        customSelectedValue.innerText = selectedVariant;
+
+        // Set the selected option in the original select element
+        selectElement.value = selectedVariant;
+  
+        // Trigger change event
+        const eventChange = new Event('change', { bubbles: true });
+        selectElement.dispatchEvent(eventChange);
+  
+        // Remove the selected style from all items
+        document.querySelectorAll('.shx-custom-enhanced-dropdown-font-dropdown-content div').forEach(div => {
+          div.classList.remove('shx-custom-enhanced-dropdown-font-selected');
+        });
+  
+        // Add the selected style to the clicked item
+        event.currentTarget.classList.add('shx-custom-enhanced-dropdown-font-selected');
+  
+        dropdownContent.style.display = 'none';
+
+        const currentTargetImage = event.currentTarget.querySelector("img")
+
+        if (currentTargetImage !== null && currentTargetImage.src !== null) {
+          //document.getElementById("shx-custom-enhanced-dropdown-variant-selected-image").src = event.currentTarget.querySelector("img").src 
+        }
+    }
+
     function  SHX_IFC_genDropdownSelect(inputID, labelText, inputName, inputVal, options, section_id) {
         let html = `
             <label class="form__label custom shx-ifc-form_label" for="${inputID}-label">${labelText}</label>
@@ -611,7 +639,7 @@
         if (isInputShxFont) {
             customDropdownHtml += `
                 <div class="shx-custom-enhanced-dropdown field custom">
-                    <button class="shx-custom-enhanced-dropdown-dropbtn" id="shx-custom-enhanced-dropdown-font-button" onclick="toggleCustomEnhancedDropdownFont()">
+                    <button class="shx-custom-enhanced-dropdown-dropbtn" onclick="toggleCustomEnhancedDropdownFont()">
                         <div style="display: flex; justify-content: space-between; align-items: center; pointer-events: none">
                             <span>font</span>
                         
@@ -621,7 +649,7 @@
                         </div>
                     </button>
 
-                    <div class="shx-custom-enhanced-dropdown-content" id="shx-custom-enhanced-dropdown-font-content">
+                    <div class="shx-custom-enhanced-dropdown-content" id="shx-custom-enhanced-dropdown-font-dropdown-content">
                 `
         }
 
@@ -643,7 +671,7 @@
         
             if (isInputShxFont) {
                 customDropdownHtml += `
-                    <div data-value="${optionValue}" class="${inputVal === optionValue ? 'shx-custom-variant-picker-selected-variant' : ''}">
+                    <div data-value="${optionValue}" class="${inputVal === optionValue ? 'shx-custom-variant-picker-selected-variant' : ''}" onclick="onFontDropdownItemClick()">
                         <span>${optionDisplayName}</span>
                     </div>
                     `