Jannex
/
SHX-Theme
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add message for emojis not supported on this type

main
alexanderroese 2024-07-25 22:29:04 +02:00
parent 158cbde63a
commit e5f1440991
1 changed files with 52 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
snippets/shx-3d-render-input.liquid
View File

@ -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);