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
 
(5 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
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 28: Linha 28:


<script>
<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<!--{$id|default:''|escape:'html'}--> = document.querySelector(".selectwithSearch__container.<!--{$id|default:''|escape:'html'}-->"),
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'}-->"),
     selectBtn<!--{$id|default:''|escape:'html'}--> = wrapper<!--{$id|default:''|escape:'html'}-->.querySelector(".selectwithSearch__selectBtn.<!--{$id|default:''|escape:'html'}-->"),
Linha 51: Linha 60:
addOptions<!--{$id|default:''|escape:'html'}-->();
addOptions<!--{$id|default:''|escape:'html'}-->();


function updateName<!--{$id|default:''|escape:'html'}-->(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<!--{$id|default:''|escape:'html'}-->(selectedValue);
     addOptions<!--{$id|default:''|escape:'html'}-->(selectedValue);
Linha 67: Linha 76:


     arr = optionsValues<!--{$OptId|default:$id|escape:'html'}-->.filter(data => {
     arr = optionsValues<!--{$OptId|default:$id|escape:'html'}-->.filter(data => {
console.log(data.phrases.filter(curr => curr.toLowerCase().indexOf(searchWord) > -1))
        return data.phrases.filter(curr => curr.toLowerCase().indexOf(searchWord) > -1).length > 0;
        return data.phrases.filter(curr => curr.toLowerCase().indexOf(searchWord) > -1);
     }).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 75: Linha 83:
         html += `<li class="groupTitle ${isSelected}"> ${option.group} </li>`;
         html += `<li class="groupTitle ${isSelected}"> ${option.group} </li>`;
         option.phrases.filter(curr => curr.toLowerCase().indexOf(searchWord) > -1).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>`;
         });
         });



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>