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 21:57:23 +02:00
parent 67d30d6e2c
commit 7edb3de769
1 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -549,23 +549,25 @@
emojiPickupPopup.classList.toggle('shown') emojiPickupPopup.classList.toggle('shown')
} }
function SHX_IFC_genTextInput(inputID, labelText, inputName, inputVal, section_id, maxLength = 24, emojisSupported = false) { // Regular expression to match emoji characters
// 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;
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 // helper function to check if string contains emoji on product variant which not support emojis
function showErrorMessageIfEmojiNotSupported(value) { function showErrorMessageIfEmojiNotSupported(value) {
if (!emojisSupported && value.length > 0 && emojiRegex.test(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`).textContent = 'Emojis werden bei diesem Typ nicht unterstützt. Bitte wechsle zu "Mit Hintergrund"';
document.querySelector(`label[for="${inputID}-label"] span`).style.color = 'red'; document.querySelector(`label[for="${inputID}-label"] span`).style.color = 'red';
} }
} }
setTimeout(() => { setTimeout(() => {
// showErrorMessageIfEmojiNotSupported(document.querySelector(`#${inputID}`).value) showErrorMessageIfEmojiNotSupported(document.querySelector(`#${inputID}`).value)
document.querySelector(`#${inputID}`).addEventListener('input',(e)=>{ document.querySelector(`#${inputID}`).addEventListener('input', (e)=>{
if(!document.querySelector(`label[for="${inputID}-label"] span`)){ if (!document.querySelector(`label[for="${inputID}-label"] span`)) {
const span = document.createElement("span"); const span = document.createElement("span");
span.style.marginLeft = `10px` span.style.marginLeft = `10px`
document.querySelector(`label[for="${inputID}-label"]`).appendChild(span) 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.display = `inline`
document.querySelector(`label[for="${inputID}-label"] span`).style.color = null; 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'; 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`).textContent = 'Bitte gib deinen Text ein';
document.querySelector(`label[for="${inputID}-label"] span`).style.color = 'red'; document.querySelector(`label[for="${inputID}-label"] span`).style.color = 'red';
} }