Widget:Agatha-test: mudanças entre as edições

De PokeXGames
Ir para navegação Ir para pesquisar
Sem resumo de edição
Sem resumo de edição
 
(3 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 23: Linha 23:


<div class="mt-2">
<div class="mt-2">
<img src="" class="margin-center" width="30rem" alt="Imagem do resultado da pesquisa" id="img-select" />
<img src="" class="margin-center d-none" style="border-radius: 6px" alt="Imagem do resultado da pesquisa" id="img-select" />
<p class="text-center" id="obs-select"></p>
<p class="text-center" id="obs-select"></p>
</div>
</div>
Linha 55: Linha 55:
     addOptions(selectedValue);
     addOptions(selectedValue);
     wrapper.classList.remove("active");
     wrapper.classList.remove("active");
     document.querySelector('#img-select').src = img;
     document.querySelector('#img-select').src = window.location.origin + img;
    document.querySelector('#img-select').classList.remove('d-none');
    document.querySelector('#img-select').classList.add('d-block');
     document.querySelector('#obs-select').innerHTML = obs;
     document.querySelector('#obs-select').innerHTML = obs;
     selectBtn.firstElementChild.innerText = selectedValue;
     selectBtn.firstElementChild.innerText = selectedValue;

Edição atual tal como às 12h49min de 8 de junho de 2023

     Selecione a frase desejada
     <svg width="24" height="24" fill="#000" viewBox="0 0 16 16">
       <path fill-rule="evenodd"
         d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
     </svg>

    <img src="" class="margin-center d-none" style="border-radius: 6px" alt="Imagem do resultado da pesquisa" id="img-select" />

    <script> const wrapper = document.querySelector(".selectwithSearch__container"),

       selectBtn = wrapper.querySelector(".selectwithSearch__selectBtn"),
       searchInp = wrapper.querySelector("input"),
       options = wrapper.querySelector(".selectwithSearch__options");
    

    function addOptions(selectedOpt) {

       options.innerHTML = "";
    
       optionsValues.forEach(option => {
           let isSelected = option.group === selectedOpt ? "selected" : "";
    

    let liGroup = `

  • ${option.group}
  • `; options.insertAdjacentHTML("beforeend", liGroup); option.phrases.map(phrase => { let li = `

  • ${phrase}
  • `; options.insertAdjacentHTML("beforeend", li); }); }); } addOptions(); function updateName(selectedValue, img, obs) { searchInp.value = ""; addOptions(selectedValue); wrapper.classList.remove("active"); document.querySelector('#img-select').src = window.location.origin + img; document.querySelector('#img-select').classList.remove('d-none'); document.querySelector('#img-select').classList.add('d-block'); document.querySelector('#obs-select').innerHTML = obs; selectBtn.firstElementChild.innerText = selectedValue; } searchInp.addEventListener("keyup", () => { let arr = []; let searchWord = searchInp.value.toLowerCase(); arr = optionsValues.filter(data => { return data.phrases.filter(curr => curr.toLowerCase().startsWith(searchWord)).length > 0; }).map(option => { let isSelected = option.group === selectBtn.firstElementChild.innerText ? "selected" : ""; let html = ""; html += `

  • ${option.group}
  • `; option.phrases.filter(curr => curr.toLowerCase().startsWith(searchWord)).map(phrase => { html += `

  • ${phrase}
  • `; }); return html; }).join(""); options.innerHTML = arr ? arr : `

    Nenhuma frase foi encontrada!

    `;

    });

    selectBtn.addEventListener("click", () => wrapper.classList.toggle("active")); </script>