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:32:52 +02:00
parent afca75aa82
commit 2f332b8b5a
1 changed files with 2 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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; 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) { 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) { function handleInputLabel(value) {
let inputLabel = document.querySelector(`label[for="${inputID}-label"] span`) let inputLabel = document.querySelector(`label[for="${inputID}-label"] span`)
@ -586,6 +563,7 @@
document.querySelector(`label[for="${inputID}-label"]`).appendChild(span) 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`) inputLabel = document.querySelector(`label[for="${inputID}-label"] span`)
// show current used char length // show current used char length
@ -610,37 +588,11 @@
setTimeout(() => { setTimeout(() => {
//createInputLabelIfNotExists(inputID) // init call after text input is created on DOM
//showErrorMessageIfEmojiNotSupported(document.querySelector(`#${inputID}`).value, inputID)
handleInputLabel(document.querySelector(`#${inputID}`).value) handleInputLabel(document.querySelector(`#${inputID}`).value)
document.querySelector(`#${inputID}`).addEventListener('input', (e) => { document.querySelector(`#${inputID}`).addEventListener('input', (e) => {
handleInputLabel(e.target.value) 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); }, 1000);