Widget:SelectSearch: mudanças entre as edições

De PokeXGames
Ir para navegação Ir para pesquisar
(Criou página com '<div class="selectwithSearch__container"> <div class="selectwithSearch__selectBtn"> <span>Selecione a frase desejada</span> <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> </div> <div class="selectwithSearch__content"> <div class=...')
 
Sem resumo de edição
 
(17 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 optionsImage = [
     document.addEventListener("click", function() {
        {
if (
            label: "Texto a ser exibido",
      !event.target.closest(".selectwithSearch__container")
            image: "/images/3/33/Beholder_Eye.png",
    ) {
            obs: "Texto a ser exibido como descrição da imagem a cima"
      const element = document.querySelector(".selectwithSearch__container.active");
        },
      if(element)  document.querySelector(".selectwithSearch__container.active").classList.remove('active');
        {
    }
            label: "Outro texto",
    }, false);
            image: "/images/d/de/Big_Cask.png",
            obs: ""
        },
    ]


     const wrapper = document.querySelector(".selectwithSearch__container"),
     const wrapper<!--{$id|default:''|escape:'html'}--> = document.querySelector(".selectwithSearch__container.<!--{$id|default:'x'|escape:'html'}-->"),
         selectBtn = wrapper.querySelector(".selectwithSearch__selectBtn"),
         selectBtn<!--{$id|default:''|escape:'html'}--> = wrapper<!--{$id|default:''|escape:'html'}-->.querySelector(".selectwithSearch__selectBtn"),
         searchInp = wrapper.querySelector("input"),
         searchInp<!--{$id|default:''|escape:'html'}--> = wrapper<!--{$id|default:''|escape:'html'}-->.querySelector("input"),
         options = wrapper.querySelector(".selectwithSearch__options");         
         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”