diff --git a/snippets/shx-3d-render-input.liquid b/snippets/shx-3d-render-input.liquid index 4f4f130..0e7fbcb 100644 --- a/snippets/shx-3d-render-input.liquid +++ b/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) - showErrorMessageIfEmojiNotSupported(document.querySelector(`#${inputID}`).value, inputID) - /* - const event = new Event('input', { - bubbles: true, - cancelable: true, - }); - - document.querySelector(`#${inputID}`).dispatchEvent(event); */ + setTimeout(() => { + //createInputLabelIfNotExists(inputID) + //showErrorMessageIfEmojiNotSupported(document.querySelector(`#${inputID}`).value, inputID) + + handleInputLabel(document.querySelector(`#${inputID}`).value) 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);