diff --git a/snippets/shx-3d-render-input.liquid b/snippets/shx-3d-render-input.liquid index 4112452..883a66b 100644 --- a/snippets/shx-3d-render-input.liquid +++ b/snippets/shx-3d-render-input.liquid @@ -553,29 +553,6 @@ const emojiRegex = /[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F700}-\u{1F77F}]|[\u{1F780}-\u{1F7FF}]|[\u{1F800}-\u{1F8FF}]|[\u{1F900}-\u{1F9FF}]|[\u{1FA00}-\u{1FA6F}]|[\u{1FA70}-\u{1FAFF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]|[\u{2B50}-\u{2B55}]|[\u{1F1E6}-\u{1F1FF}]/u; 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) { - if (!emojisSupported && value.length > 0 && emojiRegex.test(value)) { - const inputLabel = document.querySelector(`label[for="${inputID}-label"] span`) - - console.log("here", 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'; - } - } - } */ - - /* - 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) { let inputLabel = document.querySelector(`label[for="${inputID}-label"] span`) @@ -586,6 +563,7 @@ document.querySelector(`label[for="${inputID}-label"]`).appendChild(span) } + // get label again from DOM as it might not exist before inputLabel = document.querySelector(`label[for="${inputID}-label"] span`) // show current used char length @@ -610,37 +588,11 @@ setTimeout(() => { - //createInputLabelIfNotExists(inputID) - //showErrorMessageIfEmojiNotSupported(document.querySelector(`#${inputID}`).value, inputID) - + // init call after text input is created on DOM handleInputLabel(document.querySelector(`#${inputID}`).value) document.querySelector(`#${inputID}`).addEventListener('input', (e) => { 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'; - if (e.target.value.length==0) { - document.querySelector(`label[for="${inputID}-label"] span`).textContent = 'Bitte gib deinen Text ein'; - document.querySelector(`label[for="${inputID}-label"] span`).style.color = 'red'; - } - - 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);