Widget:GroupSelect: 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
 
(14 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<div class="selectwithSearch__container <!--{$id|default:''|escape:'html'}-->">
<div class="selectwithSearch__container <!--{$id|default:''|escape:'html'}-->">
     <div class="selectwithSearch__selectBtn <!--{$id|default:''|escape:'html'}-->">
     <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'}-->">
       <div class="selectwithSearch__search">
       <div class="selectwithSearch__search">
         <svg width="18" height="18" viewBox="0 0 16 16">
         <svg width="18" height="18" viewBox="0 0 16 16">
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" id="img-select<!--{$id|default:''|escape:'html'}-->" />
<img src="" class="margin-center d-none" style="border-radius: 6px" alt="Imagem do resultado da pesquisa" id="img-select<!--{$id|default:''|escape:'html'}-->" />
<p class="text-center" id="obs-select"></p>
<p class="text-center" id="obs-select<!--{$id|default:''|escape:'html'}-->"></p>
</div>
</div>


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


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


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


Linha 43: Linha 52:


         option.phrases.map(phrase => {
         option.phrases.map(phrase => {
             let li = `<li onclick="updateName('${option.group}', '${option.img}', '${option.obs}')"> ${phrase} </li>`;
             let li = `<li onclick="updateName<!--{$id|default:''|escape:'html'}-->('${option.group}', '${option.img}', '${option.obs}')"> ${phrase} </li>`;
             options<!--{$id|default:''|escape:'html'}-->.insertAdjacentHTML("beforeend", li);
             options<!--{$id|default:''|escape:'html'}-->.insertAdjacentHTML("beforeend", li);
         });
         });
Linha 49: Linha 58:
}
}


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


function updateName(selectedValue, img, obs) {
var updateName<!--{$id|default:''|escape:'html'}--> = (selectedValue, img, obs) => {
     searchInp<!--{$id|default:''|escape:'html'}-->.value = "";
     searchInp<!--{$id|default:''|escape:'html'}-->.value = "";
     addOptions(selectedValue);
     addOptions<!--{$id|default:''|escape:'html'}-->(selectedValue);
     wrapper<!--{$id|default:''|escape:'html'}-->.classList.remove("active");
     wrapper<!--{$id|default:''|escape:'html'}-->.classList.remove("active");
     document.querySelector('#img-select<!--{$id|default:''|escape:'html'}-->').src = window.location.origin + img;
     document.querySelector('#img-select<!--{$id|default:''|escape:'html'}-->').src = window.location.origin + img;
     document.querySelector('#img-select<!--{$id|default:''|escape:'html'}-->').classList.remove('d-none');
     document.querySelector('#img-select<!--{$id|default:''|escape:'html'}-->').classList.remove('d-none');
     document.querySelector('#img-select<!--{$id|default:''|escape:'html'}-->').classList.add('d-block');
     document.querySelector('#img-select<!--{$id|default:''|escape:'html'}-->').classList.add('d-block');
     document.querySelector('#obs-select').innerHTML = obs;
     document.querySelector('#obs-select<!--{$id|default:''|escape:'html'}-->').innerHTML = obs;
     selectBtn<!--{$id|default:''|escape:'html'}-->.firstElementChild.innerText = selectedValue;
     selectBtn<!--{$id|default:''|escape:'html'}-->.firstElementChild.innerText = selectedValue;
}
}
Linha 66: Linha 75:
     let searchWord = searchInp<!--{$id|default:''|escape:'html'}-->.value.toLowerCase();
     let searchWord = searchInp<!--{$id|default:''|escape:'html'}-->.value.toLowerCase();


     arr = optionsValues<!--{$id|default:''|escape:'html'}-->.filter(data => {
     arr = optionsValues<!--{$OptId|default:$id|escape:'html'}-->.filter(data => {
         return data.phrases.filter(curr => curr.toLowerCase().startsWith(searchWord)).length > 0;
         return data.phrases.filter(curr => curr.toLowerCase().indexOf(searchWord) > -1).length > 0;
     }).map(option => {
     }).map(option => {
         let isSelected = option.group === selectBtn<!--{$id|default:''|escape:'html'}-->.firstElementChild.innerText ? "selected" : "";
         let isSelected = option.group === selectBtn<!--{$id|default:''|escape:'html'}-->.firstElementChild.innerText ? "selected" : "";
Linha 73: Linha 82:


         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().indexOf(searchWord) > -1).map(phrase => {
             html += `<li onclick="updateName('${option.group}', '${option.img}', '${option.obs}')"> ${phrase} </li>`;
             html += `<li onclick="updateName<!--{$id|default:''|escape:'html'}-->('${option.group}', '${option.img}', '${option.obs}')"> ${phrase} </li>`;
         });
         });


Linha 83: Linha 92:
});
});


selectBtn<!--{$id|default:''|escape:'html'}-->.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 22h00min de 18 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>

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

    <script>

    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 = "";
    
       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(); var 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().indexOf(searchWord) > -1).length > 0; }).map(option => { let isSelected = option.group === selectBtn.firstElementChild.innerText ? "selected" : ""; let html = ""; html += `

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

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

    Nenhuma frase foi encontrada!

    `;

    });

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