993
edições
Widget:GroupSelect: mudanças entre as edições
Ir para navegação
Ir para pesquisar
sem sumário de edição
Sem resumo de edição |
Sem resumo de edição |
||
| Linha 28: | Linha 28: | ||
<script> | <script> | ||
const wrapper = document.querySelector(".selectwithSearch__container<!--{$id|default:''|escape:'html'}-->"), | const wrapper<!--{$id|default:''|escape:'html'}--> = document.querySelector(".selectwithSearch__container<!--{$id|default:''|escape:'html'}-->"), | ||
selectBtn = wrapper.querySelector(".selectwithSearch__selectBtn<!--{$id|default:''|escape:'html'}-->"), | selectBtn<!--{$id|default:''|escape:'html'}--> = wrapper<!--{$id|default:''|escape:'html'}-->.querySelector(".selectwithSearch__selectBtn<!--{$id|default:''|escape:'html'}-->"), | ||
searchInp = wrapper.querySelector("#input-<!--{$id|default:''|escape:'html'}-->"), | searchInp<!--{$id|default:''|escape:'html'}--> = wrapper<!--{$id|default:''|escape:'html'}-->.querySelector("#input-<!--{$id|default:''|escape:'html'}-->"), | ||
options = wrapper.querySelector(".selectwithSearch__options<!--{$id|default:''|escape:'html'}-->"); | options<!--{$id|default:''|escape:'html'}--> = wrapper<!--{$id|default:''|escape:'html'}-->.querySelector(".selectwithSearch__options<!--{$id|default:''|escape:'html'}-->"); | ||
function addOptions(selectedOpt) { | function addOptions(selectedOpt) { | ||
options.innerHTML = ""; | options<!--{$id|default:''|escape:'html'}-->.innerHTML = ""; | ||
optionsValues<!--{$id|default:''|escape:'html'}-->.forEach(option => { | optionsValues<!--{$id|default:''|escape:'html'}-->.forEach(option => { | ||
| Linha 40: | Linha 40: | ||
let liGroup = `<li class="groupTitle ${isSelected}"> ${option.group} </li>`; | let liGroup = `<li class="groupTitle ${isSelected}"> ${option.group} </li>`; | ||
options.insertAdjacentHTML("beforeend", liGroup); | options<!--{$id|default:''|escape:'html'}-->.insertAdjacentHTML("beforeend", liGroup); | ||
option.phrases.map(phrase => { | option.phrases.map(phrase => { | ||
let li = `<li onclick="updateName('${option.group}', '${option.img}', '${option.obs}')"> ${phrase} </li>`; | let li = `<li onclick="updateName('${option.group}', '${option.img}', '${option.obs}')"> ${phrase} </li>`; | ||
options.insertAdjacentHTML("beforeend", li); | options<!--{$id|default:''|escape:'html'}-->.insertAdjacentHTML("beforeend", li); | ||
}); | }); | ||
}); | }); | ||
| Linha 52: | Linha 52: | ||
function updateName(selectedValue, img, obs) { | function updateName(selectedValue, img, obs) { | ||
searchInp.value = ""; | searchInp<!--{$id|default:''|escape:'html'}-->.value = ""; | ||
addOptions(selectedValue); | addOptions(selectedValue); | ||
wrapper.classList.remove("active"); | wrapper<!--{$id|default:''|escape:'html'}-->.classList.remove("active"); | ||
document.querySelector('#img-select<!--{$id|default:''|escape:'html'}-->').src = window.location.origin + img; | document.querySelector('#img-select<!--{$id|default:''|escape:'html'}-->').src = window.location.origin + img; | ||
document.querySelector('#img-select<!--{$id|default:''|escape:'html'}-->').classList.remove('d-none'); | document.querySelector('#img-select<!--{$id|default:''|escape:'html'}-->').classList.remove('d-none'); | ||
document.querySelector('#img-select<!--{$id|default:''|escape:'html'}-->').classList.add('d-block'); | document.querySelector('#img-select<!--{$id|default:''|escape:'html'}-->').classList.add('d-block'); | ||
document.querySelector('#obs-select').innerHTML = obs; | document.querySelector('#obs-select').innerHTML = obs; | ||
selectBtn.firstElementChild.innerText = selectedValue; | selectBtn<!--{$id|default:''|escape:'html'}-->.firstElementChild.innerText = selectedValue; | ||
} | } | ||
searchInp.addEventListener("keyup", () => { | searchInp<!--{$id|default:''|escape:'html'}-->.addEventListener("keyup", () => { | ||
let arr = []; | let arr = []; | ||
let searchWord = searchInp.value.toLowerCase(); | let searchWord = searchInp<!--{$id|default:''|escape:'html'}-->.value.toLowerCase(); | ||
arr = optionsValues.filter(data => { | arr = optionsValues<!--{$id|default:''|escape:'html'}-->.filter(data => { | ||
return data.phrases.filter(curr => curr.toLowerCase().startsWith(searchWord)).length > 0; | return data.phrases.filter(curr => curr.toLowerCase().startsWith(searchWord)).length > 0; | ||
}).map(option => { | }).map(option => { | ||
let isSelected = option.group === selectBtn.firstElementChild.innerText ? "selected" : ""; | let isSelected = option.group === selectBtn<!--{$id|default:''|escape:'html'}-->.firstElementChild.innerText ? "selected" : ""; | ||
let html = ""; | let html = ""; | ||
| Linha 80: | Linha 80: | ||
}).join(""); | }).join(""); | ||
options.innerHTML = arr ? arr : `<p style="margin-top: 10px;">Nenhuma frase foi encontrada!</p>`; | options<!--{$id|default:''|escape:'html'}-->.innerHTML = arr ? arr : `<p style="margin-top: 10px;">Nenhuma frase foi encontrada!</p>`; | ||
}); | }); | ||
selectBtn.addEventListener("click", () => wrapper.classList.toggle("active")); | selectBtn<!--{$id|default:''|escape:'html'}-->.addEventListener("click", () => wrapper.classList.toggle("active")); | ||
</script> | </script> | ||