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>

Menu de navegação