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

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>