add message for emojis not supported on this type

snippets/shx-3d-render-input.liquid

@@ -554,7 +554,7 @@
         
     function SHX_IFC_genTextInput(inputID, labelText, inputName, inputVal, section_id, maxLength = 24, emojisSupported = false) {
         // helper function to check if string contains emoji on product variant which not support emojis
-        function showErrorMessageIfEmojiNotSupported(value, inputID) {
+        /* function showErrorMessageIfEmojiNotSupported(value, inputID) {
             if (!emojisSupported && value.length > 0 && emojiRegex.test(value)) {
                 const inputLabel = document.querySelector(`label[for="${inputID}-label"] span`)
 
@@ -565,36 +565,62 @@
                     inputLabel.style.color = 'red';
                 }
             }
-        }
+        } */
 
-        function createInputLabelIfNotExists(inputID) {
+        /*
+        function createInputLabelIfNotExists() {
             if (!document.querySelector(`label[for="${inputID}-label"] span`)) {
                 const span = document.createElement("span");
                 span.style.marginLeft = `10px`
                 document.querySelector(`label[for="${inputID}-label"]`).appendChild(span)
             }
+        } */
+
+        function handleInputLabel(value) {
+            const inputLabel = document.querySelector(`label[for="${inputID}-label"] span`)
+
+            // create input label if not exists
+            if (!inputLabel) {
+                const span = document.createElement("span");
+                span.style.marginLeft = `10px`
+                document.querySelector(`label[for="${inputID}-label"]`).appendChild(span)
+            }
+            
+            // show current used char length
+            inputLabel.style.display  = `inline`
+            inputLabel.style.color = null;
+            inputLabel.textContent = value.length + ' von ' + maxLength + ' Zeichen verwendet';
+            
+            // show error message no text specific
+            if (value.length==0) {
+                inputLabel.textContent = 'Bitte gib deinen Text ein';
+                inputLabel.style.color = 'red';
+            }
+
+            // show error message no emojis supported on this product variant
+            if (!emojisSupported && value.length > 0 && emojiRegex.test(value)) {
+                console.log("here", value, "doc", inputLabel)
+
+                inputLabel.textContent = 'Emojis werden bei diesem Typ nicht unterstützt. Bitte wechsle zu "Mit Hintergrund"';
+                inputLabel.style.color = 'red';
+            }
         }
 
+
         setTimeout(() => {
-            createInputLabelIfNotExists(inputID)
+            //createInputLabelIfNotExists(inputID)
+            //showErrorMessageIfEmojiNotSupported(document.querySelector(`#${inputID}`).value, inputID)
 
-            showErrorMessageIfEmojiNotSupported(document.querySelector(`#${inputID}`).value, inputID)
+            handleInputLabel(document.querySelector(`#${inputID}`).value)
-            /*
-            const event = new Event('input', {
-                bubbles: true,
-                cancelable: true,
-            });
-            
-            document.querySelector(`#${inputID}`).dispatchEvent(event); */
 
             document.querySelector(`#${inputID}`).addEventListener('input', (e) => {
-                createInputLabelIfNotExists(inputID)
+                handleInputLabel(e.target.value)
 
                 /*if (!document.querySelector(`label[for="${inputID}-label"] span`)) {
                     const span = document.createElement("span");
                     span.style.marginLeft = `10px`
                     document.querySelector(`label[for="${inputID}-label"]`).appendChild(span)
-                } */
+                }
                 document.querySelector(`label[for="${inputID}-label"] span`).style.display  = `inline`
                 document.querySelector(`label[for="${inputID}-label"] span`).style.color = null;
                 document.querySelector(`label[for="${inputID}-label"] span`).textContent = e.target.value.length + ' von ' + maxLength + ' Zeichen verwendet';
@@ -603,7 +629,16 @@
                     document.querySelector(`label[for="${inputID}-label"] span`).style.color = 'red';
                 }
 
-                showErrorMessageIfEmojiNotSupported(e.target.value, inputID)
+                if (!emojisSupported && value.length > 0 && emojiRegex.test(e.target.value)) {
+                    const inputLabel = document.querySelector(`label[for="${inputID}-label"] span`)
+    
+                    console.log("here", e.target.value, "doc", inputLabel)
+    
+                    if (inputLabel !== null) {
+                        inputLabel.textContent = 'Emojis werden bei diesem Typ nicht unterstützt. Bitte wechsle zu "Mit Hintergrund"';
+                        inputLabel.style.color = 'red';
+                    }
+                } */
             });
         }, 1000);