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
 
(13 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<div class="select-box">
<div class="selectwithSearch__container">
        <div class="options-container">
    <div class="selectwithSearch__selectBtn">
          <div class="option">
      <span>Selecione a frase desejada</span>
            <input
      <svg width="24" height="24" fill="#000" viewBox="0 0 16 16">
              type="radio"
        <path fill-rule="evenodd"
              class="radio"
          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" />
              id="automobiles"
      </svg>
              name="category"
    </div>
            />
            <label for="automobiles">Automobiles</label>
          </div>


          <div class="option">
    <div class="selectwithSearch__content">
            <input type="radio" class="radio" id="film" name="category" />
      <div class="selectwithSearch__search">
             <label for="film">Film & Animation</label>
        <svg width="18" height="18" viewBox="0 0 16 16">
          </div>
          <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>


          <div class="option">
        <input spellcheck="false" type="text" placeholder="Pesquisa">
            <input type="radio" class="radio" id="science" name="category" />
      </div>
            <label for="science">Science & Technology</label>
          </div>


          <div class="option">
      <ul class="selectwithSearch__options"></ul>
            <input type="radio" class="radio" id="art" name="category" />
    </div>
            <label for="art">Art</label>
</div>
          </div>


          <div class="option">
<div class="mt-2">
            <input type="radio" class="radio" id="music" name="category" />
<img src="" class="margin-center d-none" style="border-radius: 6px" alt="Imagem do resultado da pesquisa" id="img-select" />
            <label for="music">Music</label>
<p class="text-center" id="obs-select"></p>
          </div>
</div>


          <div class="option">
<script>
            <input type="radio" class="radio" id="travel" name="category" />
const wrapper = document.querySelector(".selectwithSearch__container"),
            <label for="travel">Travel & Events</label>
    selectBtn = wrapper.querySelector(".selectwithSearch__selectBtn"),
          </div>
    searchInp = wrapper.querySelector("input"),
    options = wrapper.querySelector(".selectwithSearch__options");


          <div class="option">
function addOptions(selectedOpt) {
            <input type="radio" class="radio" id="sports" name="category" />
    options.innerHTML = "";
            <label for="sports">Sports</label>
          </div>


          <div class="option">
    optionsValues.forEach(option => {
            <input type="radio" class="radio" id="news" name="category" />
        let isSelected = option.group === selectedOpt ? "selected" : "";
            <label for="news">News & Politics</label>
          </div>


          <div class="option">
        let liGroup = `<li class="groupTitle ${isSelected}"> ${option.group} </li>`;
            <input type="radio" class="radio" id="tutorials" name="category" />
        options.insertAdjacentHTML("beforeend", liGroup);
            <label for="tutorials">Tutorials</label>
          </div>
        </div>


         <div class="selected">
         option.phrases.map(phrase => {
          Select Video Category
            let li = `<li onclick="updateName('${option.group}', '${option.img}', '${option.obs}')"> ${phrase} </li>`;
         </div>
            options.insertAdjacentHTML("beforeend", li);
         });
    });
}


        <div class="search-box">
addOptions();
          <input type="text" placeholder="Start Typing..." />
        </div>
      </div>


<script>
function updateName(selectedValue, img, obs) {
const selected = document.querySelector(".selected");
    searchInp.value = "";
const optionsContainer = document.querySelector(".options-container");
    addOptions(selectedValue);
const searchBox = document.querySelector(".search-box input");
    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;
}


const optionsList = document.querySelectorAll(".option");
searchInp.addEventListener("keyup", () => {
    let arr = [];
    let searchWord = searchInp.value.toLowerCase();


selected.addEventListener("click", () => {
    arr = optionsValues.filter(data => {
  optionsContainer.classList.toggle("active");
        return data.phrases.filter(curr => curr.toLowerCase().startsWith(searchWord)).length > 0;
    }).map(option => {
        let isSelected = option.group === selectBtn.firstElementChild.innerText ? "selected" : "";
        let html = "";


  searchBox.value = "";
        html += `<li class="groupTitle ${isSelected}"> ${option.group} </li>`;
  filterList("");
        option.phrases.filter(curr => curr.toLowerCase().startsWith(searchWord)).map(phrase => {
            html += `<li onclick="updateName('${option.group}', '${option.img}', '${option.obs}')"> ${phrase} </li>`;
        });


  if (optionsContainer.classList.contains("active")) {
        return html;
     searchBox.focus();
     }).join("");
  }
});
 
optionsList.forEach(o => {
  o.addEventListener("click", () => {
    selected.innerHTML = o.querySelector("label").innerHTML;
    optionsContainer.classList.remove("active");
  });
});


searchBox.addEventListener("keyup", function(e) {
    options.innerHTML = arr ? arr : `<p style="margin-top: 10px;">Nenhuma frase foi encontrada!</p>`;
  filterList(e.target.value);
});
});


const filterList = searchTerm => {
selectBtn.addEventListener("click", () => wrapper.classList.toggle("active"));
  searchTerm = searchTerm.toLowerCase();
  optionsList.forEach(option => {
    let label = option.firstElementChild.nextElementSibling.innerText.toLowerCase();
    if (label.indexOf(searchTerm) != -1) {
      option.style.display = "block";
    } else {
      option.style.display = "none";
    }
  });
};
</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”