Widget:Agatha-test: 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
 
(17 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<nowiki><link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<div class="selectwithSearch__container">
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <div class="selectwithSearch__selectBtn">
</nowiki>
      <span>Selecione a frase desejada</span>
<select class="js-example-basic-single" name="state">
      <svg width="24" height="24" fill="#000" viewBox="0 0 16 16">
  <optgroup label="Item 1">
        <path fill-rule="evenodd"
    <option value="01">The most common colors are brown, blue, green and black</option>
          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" />
  </optgroup>
      </svg>
  <optgroup label="Item 2">
    </div>
    <option value="02">158,987295 liters</option>
 
  </optgroup>
    <div class="selectwithSearch__content">
  <optgroup label="Item 3">
      <div class="selectwithSearch__search">
    <option value="03">It has a powerful poison</option>
        <svg width="18" height="18" viewBox="0 0 16 16">
  </optgroup>
          <path
</select>
            d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
        </svg>
 
        <input spellcheck="false" type="text" placeholder="Pesquisa">
      </div>
 
      <ul class="selectwithSearch__options"></ul>
    </div>
</div>
 
<div class="mt-2">
<img src="" class="margin-center d-none" style="border-radius: 6px" alt="Imagem do resultado da pesquisa" id="img-select" />
<p class="text-center" id="obs-select"></p>
</div>


<script>
<script>
$(document).ready(function() {
const wrapper = document.querySelector(".selectwithSearch__container"),
     $('.js-example-basic-single').select2();
    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 = `<li class="groupTitle ${isSelected}"> ${option.group} </li>`;
        options.insertAdjacentHTML("beforeend", liGroup);
 
        option.phrases.map(phrase => {
            let li = `<li onclick="updateName('${option.group}', '${option.img}', '${option.obs}')"> ${phrase} </li>`;
            options.insertAdjacentHTML("beforeend", li);
        });
    });
}
 
addOptions();
 
function 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().startsWith(searchWord)).length > 0;
    }).map(option => {
        let isSelected = option.group === selectBtn.firstElementChild.innerText ? "selected" : "";
        let html = "";
 
        html += `<li class="groupTitle ${isSelected}"> ${option.group} </li>`;
        option.phrases.filter(curr => curr.toLowerCase().startsWith(searchWord)).map(phrase => {
            html += `<li onclick="updateName('${option.group}', '${option.img}', '${option.obs}')"> ${phrase} </li>`;
        });
 
        return html;
    }).join("");
 
    options.innerHTML = arr ? arr : `<p style="margin-top: 10px;">Nenhuma frase foi encontrada!</p>`;
});
});
selectBtn.addEventListener("click", () => wrapper.classList.toggle("active"));
</script>
</script>

Edição atual tal como às 12h49min de 8 de junho de 2023

     Selecione a frase desejada
     <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>

       <svg width="18" height="18" viewBox="0 0 16 16">
         <path
           d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
       </svg>

       <input spellcheck="false" type="text" placeholder="Pesquisa">

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

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

  • ${option.group}

    • `; option.phrases.filter(curr => curr.toLowerCase().startsWith(searchWord)).map(phrase => { html += `

  • ${phrase}

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

    Nenhuma frase foi encontrada!

    `;

    });

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

    Disponível em “https://wiki.pokexgames.com/index.php?title=Widget:Agatha-test&oldid=65278”