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

Ir para navegação Ir para pesquisar
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
 
(8 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 8: Linha 8:
     </div>
     </div>


     <div class="selectwithSearch__content <!--{$id|default:''|escape:'html'}-->">
     <div class="selectwithSearch__content <!--{$classes|default:''|escape:'html'}--> <!--{$id|default:''|escape:'html'}-->">
         <div class="selectwithSearch__search <!--{$id|default:''|escape:'html'}-->">
         <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">
Linha 29: Linha 29:


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


     function addOptions<!--{$id|default:''|escape:'html'}-->(selectedOpt) {
     function addOptions<!--{$id|default:''|escape:'html'}-->(selectedOpt) {
Linha 40: Linha 49:
             let isSelected = option.label === selectedOpt ? "selected" : "";
             let isSelected = option.label === selectedOpt ? "selected" : "";


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


         arr = optionsImage.filter(data => {
         arr = optionsImage<!--{$id|default:''|escape:'html'}-->.filter(data => {
             return data.label.toLowerCase().indexOf(searchWord) > -1;
             return data.label.toLowerCase().indexOf(searchWord) > -1;
         }).map(option => {
         }).map(option => {
             let isSelected = option.label === selectBtn.firstElementChild.innerText ? "selected" : "";
             let isSelected = option.label === selectBtn<!--{$id|default:''|escape:'html'}-->.firstElementChild.innerText ? "selected" : "";
             let html = "";
             let html = "";


Menu de navegação