Widget:SelectSearch: 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
 
(16 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<div class="selectwithSearch__container">
<div class="selectwithSearch__container <!--{$id|default:'x'|escape:'html'}-->">
     <div class="selectwithSearch__selectBtn">
     <div class="selectwithSearch__selectBtn <!--{$id|default:''|escape:'html'}-->">
         <span>Selecione a frase desejada</span>
         <span> <!--{$title|default:'Selecione a frase desejada'|escape:'html'}--> </span>
         <svg width="24" height="24" fill="#000" viewBox="0 0 16 16">
         <svg width="24" height="24" fill="#000" viewBox="0 0 16 16">
             <path fill-rule="evenodd"
             <path fill-rule="evenodd"
Linha 8: Linha 8:
     </div>
     </div>


     <div class="selectwithSearch__content">
     <div class="selectwithSearch__content <!--{$classes|default:''|escape:'html'}--> <!--{$id|default:''|escape:'html'}-->">
         <div class="selectwithSearch__search">
         <div class="selectwithSearch__search <!--{$id|default:''|escape:'html'}-->">
             <svg width="18" height="18" viewBox="0 0 16 16">
             <svg width="18" height="18" viewBox="0 0 16 16">
                 <path
                 <path
Linha 18: Linha 18:
         </div>
         </div>


         <ul class="selectwithSearch__options"></ul>
         <ul class="selectwithSearch__options <!--{$id|default:''|escape:'html'}-->"></ul>
     </div>
     </div>
</div>
</div>
Linha 24: Linha 24:
<div class="mt-2">
<div class="mt-2">
     <img src="" class="margin-center d-none" style="border-radius: 6px" alt="Imagem do resultado da pesquisa"
     <img src="" class="margin-center d-none" style="border-radius: 6px" alt="Imagem do resultado da pesquisa"
         id="img-select-search" />
         id="img-select-search-<!--{$id|default:''|escape:'html'}-->" />
     <p class="text-center" id="obs-select-search"></p>
     <p class="text-center" id="obs-select-search-<!--{$id|default:''|escape:'html'}-->"></p>
</div>
</div>


<script>
<script defer>
     const wrapper = document.querySelector(".selectwithSearch__container"),
    document.addEventListener("click", function() {
         selectBtn = wrapper.querySelector(".selectwithSearch__selectBtn"),
if (
         searchInp = wrapper.querySelector("input"),
      !event.target.closest(".selectwithSearch__container")
         options = wrapper.querySelector(".selectwithSearch__options");         
    ) {
      const element = document.querySelector(".selectwithSearch__container.active");
      if(element)  document.querySelector(".selectwithSearch__container.active").classList.remove('active');
    }
    }, false);
 
     const wrapper<!--{$id|default:''|escape:'html'}--> = document.querySelector(".selectwithSearch__container.<!--{$id|default:'x'|escape:'html'}-->"),
         selectBtn<!--{$id|default:''|escape:'html'}--> = wrapper<!--{$id|default:''|escape:'html'}-->.querySelector(".selectwithSearch__selectBtn"),
         searchInp<!--{$id|default:''|escape:'html'}--> = wrapper<!--{$id|default:''|escape:'html'}-->.querySelector("input"),
         options<!--{$id|default:''|escape:'html'}--> = wrapper<!--{$id|default:''|escape:'html'}-->.querySelector(".selectwithSearch__options");         


     function addOptions(selectedOpt) {
     function addOptions<!--{$id|default:''|escape:'html'}-->(selectedOpt) {
         options.innerHTML = "";
         options<!--{$id|default:''|escape:'html'}-->.innerHTML = "";


         optionsValues.forEach(option => {
         optionsImage<!--{$id|default:''|escape:'html'}-->.forEach(option => {
             let isSelected = option.image === selectedOpt ? "selected" : "";
             let isSelected = option.label === selectedOpt ? "selected" : "";


             let liItem = `<li onclick="updateName('${option.label}', '${option.img}', '${option.obs}')" class="${isSelected}"> ${option.label} </li>`;
             let liItem = `<li onclick="updateName<!--{$id|default:''|escape:'html'}-->
             options.insertAdjacentHTML("beforeend", liItem);
('${option.label}', '${option.image}', '${option.obs}')" class="${isSelected}"> ${option.label} </li>`;
             options<!--{$id|default:''|escape:'html'}-->.insertAdjacentHTML("beforeend", liItem);
         });
         });
     }
     }


     addOptions();
     addOptions<!--{$id|default:''|escape:'html'}-->();


     function updateName(selectedValue, img, obs) {
     function updateName<!--{$id|default:''|escape:'html'}-->(selectedValue, img, obs) {
         searchInp.value = "";
         searchInp<!--{$id|default:''|escape:'html'}-->.value = "";
         addOptions(selectedValue);
         addOptions<!--{$id|default:''|escape:'html'}-->(selectedValue);
         wrapper.classList.remove("active");
         wrapper<!--{$id|default:''|escape:'html'}-->.classList.remove("active");
         document.querySelector('#img-select-search').src = window.location.origin + img;
         document.querySelector('#img-select-search-<!--{$id|default:''|escape:'html'}-->').src = img;
         document.querySelector('#img-select-search').classList.remove('d-none');
         document.querySelector('#img-select-search-<!--{$id|default:''|escape:'html'}-->').classList.remove('d-none');
         document.querySelector('#img-select-search').classList.add('d-block');
         document.querySelector('#img-select-search-<!--{$id|default:''|escape:'html'}-->').classList.add('d-block');
         document.querySelector('#obs-select-search').innerHTML = obs;
         document.querySelector('#obs-select-search-<!--{$id|default:''|escape:'html'}-->').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 = optionsImage<!--{$id|default:''|escape:'html'}-->.filter(data => {
             return data.phrases.filter(curr => curr.toLowerCase().startsWith(searchWord)).length > 0;
             return data.label.toLowerCase().indexOf(searchWord) > -1;
         }).map(option => {
         }).map(option => {
             let isSelected = option.group === selectBtn.firstElementChild.innerText ? "selected" : "";
             let isSelected = option.label === selectBtn<!--{$id|default:''|escape:'html'}-->.firstElementChild.innerText ? "selected" : "";
             let html = "";
             let html = "";


             html += `<li onclick="updateName('${option.label}', '${option.img}', '${option.obs}')" class="${isSelected}"> ${option.group} </li>`;
             html += `<li onclick="updateName<!--{$id|default:''|escape:'html'}-->('${option.label}', '${option.image}', '${option.obs}')" class="${isSelected}"> ${option.label} </li>`;


             return html;
             return html;
         }).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<!--{$id|default:''|escape:'html'}-->.classList.toggle("active"));
</script>
</script>

Edição atual tal como às 19h07min de 20 de fevereiro de 2024

         
       <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-search-" />

    <script defer> 

       document.addEventListener("click", function() {
if (
     !event.target.closest(".selectwithSearch__container")
   ) {
     const element = document.querySelector(".selectwithSearch__container.active");
      if(element)  document.querySelector(".selectwithSearch__container.active").classList.remove('active');
   }
   }, false);

       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 = "";

           optionsImage.forEach(option => {
           let isSelected = option.label === selectedOpt ? "selected" : "";

    let liItem = `

  • ${option.label}

    • `; options.insertAdjacentHTML("beforeend", liItem); }); } addOptions(); function updateName(selectedValue, img, obs) { searchInp.value = ""; addOptions(selectedValue); wrapper.classList.remove("active"); document.querySelector('#img-select-search-').src = img; document.querySelector('#img-select-search-').classList.remove('d-none'); document.querySelector('#img-select-search-').classList.add('d-block'); document.querySelector('#obs-select-search-').innerHTML = obs; selectBtn.firstElementChild.innerText = selectedValue; } searchInp.addEventListener("keyup", () => { let arr = []; let searchWord = searchInp.value.toLowerCase(); arr = optionsImage.filter(data => { return data.label.toLowerCase().indexOf(searchWord) > -1; }).map(option => { let isSelected = option.label === selectBtn.firstElementChild.innerText ? "selected" : ""; let html = ""; html += `

  • ${option.label}

    • `; 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:SelectSearch&oldid=76215”