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
Linha 1: Linha 1:
{{#widget:Agatha-quest-options}}
<div class="selectwithSearch__container">
<div class="selectwithSearch__container">
     <div class="selectwithSearch__selectBtn">
     <div class="selectwithSearch__selectBtn">
Linha 21: Linha 23:
     </div>
     </div>
   </div>
   </div>
{{#widget:Agatha-quest-options}}


<script>
<script>

Edição das 12h23min 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>

    <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) { searchInp.value = ""; addOptions(selectedValue); wrapper.classList.remove("active"); selectBtn.firstElementChild.innerText = selectedValue; console.log(optionsValues.filter(curr => curr.group === 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>