add message for emojis not supported on this type

main
alexanderroese 2024-07-25 21:57:23 +02:00
parent 67d30d6e2c
commit 7edb3de769
1 changed files with 9 additions and 7 deletions

View File

@ -549,23 +549,25 @@
emojiPickupPopup.classList.toggle('shown')
}
function SHX_IFC_genTextInput(inputID, labelText, inputName, inputVal, section_id, maxLength = 24, emojisSupported = false) {
// Regular expression to match emoji characters
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;
// Regular expression to match emoji characters
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) {
if (!emojisSupported && value.length > 0 && emojiRegex.test(value)) {
console.log("here", value, "doc", document.querySelector(`label[for="${inputID}-label"] span`))
document.querySelector(`label[for="${inputID}-label"] span`).textContent = 'Emojis werden bei diesem Typ nicht unterstützt. Bitte wechsle zu "Mit Hintergrund"';
document.querySelector(`label[for="${inputID}-label"] span`).style.color = 'red';
}
}
setTimeout(() => {
// showErrorMessageIfEmojiNotSupported(document.querySelector(`#${inputID}`).value)
showErrorMessageIfEmojiNotSupported(document.querySelector(`#${inputID}`).value)
document.querySelector(`#${inputID}`).addEventListener('input',(e)=>{
if(!document.querySelector(`label[for="${inputID}-label"] span`)){
document.querySelector(`#${inputID}`).addEventListener('input', (e)=>{
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)
@ -573,7 +575,7 @@
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){
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';
}