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
 
(12 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 20: Linha 20:
       <ul class="selectwithSearch__options"></ul>
       <ul class="selectwithSearch__options"></ul>
     </div>
     </div>
  </div>
</div>
 
<div class="mt-2">
<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>
</div>


<script>
<script>
Linha 27: Linha 32:
     searchInp = wrapper.querySelector("input"),
     searchInp = wrapper.querySelector("input"),
     options = wrapper.querySelector(".selectwithSearch__options");
     options = wrapper.querySelector(".selectwithSearch__options");
let optionsValues = [
    {
        group: "Wood",
        phrases: [
            "Termite Food",
            "Plank",
            "Plant armor"
        ],
        img: "teste.png",
        obs: ""
    },
    {
        group: "Water Pipe",
        phrases: [
            "Take a Water Pipe",
        ],
        img: "teste.png",
        obs: ""
    },
];


function addOptions(selectedOpt) {
function addOptions(selectedOpt) {
Linha 59: Linha 43:


         option.phrases.map(phrase => {
         option.phrases.map(phrase => {
             let li = `<li onclick="updateName('${option.group}')"> ${phrase} </li>`;
             let li = `<li onclick="updateName('${option.group}', '${option.img}', '${option.obs}')"> ${phrase} </li>`;
             options.insertAdjacentHTML("beforeend", li);
             options.insertAdjacentHTML("beforeend", li);
         });
         });
Linha 67: Linha 51:
addOptions();
addOptions();


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


Linha 86: Linha 73:


         html += `<li class="groupTitle ${isSelected}"> ${option.group} </li>`;
         html += `<li class="groupTitle ${isSelected}"> ${option.group} </li>`;
         option.phrases.filter(curr => curr.toLowerCase().startsWith(searchWord)).map(phrase => {
         option.phrases.filter(curr => curr.toLowerCase().startsWith(searchWord)).map(phrase => {
             html += `<li onclick="updateName('${option.group}')"> ${phrase} </li>`;
             html += `<li onclick="updateName('${option.group}', '${option.img}', '${option.obs}')"> ${phrase} </li>`;
         });
         });


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>

       <svg width="18" height="18" viewBox="0 0 16 16">
         <path
           d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
       </svg>

       <input spellcheck="false" type="text" placeholder="Pesquisa">

    <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>

    Disponível em “https://wiki.pokexgames.com/index.php?title=Widget:Agatha-test&oldid=65278”