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

Ir para navegação Ir para pesquisar
sem sumário de edição
(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="selectwithSearch_...')
 
Sem resumo de edição
Linha 1: Linha 1:
<div class="selectwithSearch__container">
<div class="selectwithSearch__container<!--{$id|default:''|escape:'html'}-->">
     <div class="selectwithSearch__selectBtn">
     <div class="selectwithSearch__selectBtn<!--{$id|default:''|escape:'html'}-->">
       <span>Selecione a frase desejada</span>
       <span>Selecione a frase desejada</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">
Linha 15: Linha 15:
         </svg>
         </svg>


         <input spellcheck="false" type="text" placeholder="Pesquisa">
         <input id="input-<!--{$id|default:''|escape:'html'}-->" spellcheck="false" type="text" placeholder="Pesquisa">
       </div>
       </div>


       <ul class="selectwithSearch__options"></ul>
       <ul class="selectwithSearch__options<!--{$id|default:''|escape:'html'}-->"></ul>
     </div>
     </div>
</div>
</div>


<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" />
<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"></p>
</div>
</div>


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


function addOptions(selectedOpt) {
function addOptions(selectedOpt) {
     options.innerHTML = "";
     options.innerHTML = "";


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


Linha 55: Linha 55:
     addOptions(selectedValue);
     addOptions(selectedValue);
     wrapper.classList.remove("active");
     wrapper.classList.remove("active");
     document.querySelector('#img-select').src = window.location.origin + img;
     document.querySelector('#img-select<!--{$id|default:''|escape:'html'}-->').src = window.location.origin + img;
     document.querySelector('#img-select').classList.remove('d-none');
     document.querySelector('#img-select<!--{$id|default:''|escape:'html'}-->').classList.remove('d-none');
     document.querySelector('#img-select').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').innerHTML = obs;
     selectBtn.firstElementChild.innerText = selectedValue;
     selectBtn.firstElementChild.innerText = selectedValue;

Menu de navegação