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
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">
<script>
            <input type="radio" class="radio" id="music" name="category" />
const wrapper = document.querySelector(".selectwithSearch__container"),
            <label for="music">Music</label>
    selectBtn = wrapper.querySelector(".selectwithSearch__selectBtn"),
          </div>
    searchInp = wrapper.querySelector("input"),
    options = wrapper.querySelector(".selectwithSearch__options");


          <div class="option">
let optionsValues = [
             <input type="radio" class="radio" id="travel" name="category" />
    {
             <label for="travel">Travel & Events</label>
        group: "Wood",
          </div>
        phrases: [
            "Termite Food",
            "Plank",
             "Plant armor"
        ],
        img: "teste.png",
        obs: ""
    },
    {
        group: "Water Pipe",
        phrases: [
             "Take a Water Pipe",
        ],
        img: "teste.png",
        obs: ""
    },
];


          <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}')"> ${phrase} </li>`;
         </div>
            options.insertAdjacentHTML("beforeend", li);
         });
    });
}


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


<script>
function updateName(selectedValue) {
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");
    selectBtn.firstElementChild.innerText = selectedValue;
    console.log(optionsValues.filter(curr => curr.group === 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("");


  if (optionsContainer.classList.contains("active")) {
        option.phrases.filter(curr => curr.toLowerCase().startsWith(searchWord)).map(phrase => {
    searchBox.focus();
            html += `<li onclick="updateName('${option.group}')"> ${phrase} </li>`;
  }
        });
});


optionsList.forEach(o => {
        return html;
  o.addEventListener("click", () => {
     }).join("");
     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 das 15h43min de 20 de maio 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">

    <script> const wrapper = document.querySelector(".selectwithSearch__container"), 

       selectBtn = wrapper.querySelector(".selectwithSearch__selectBtn"),
   searchInp = wrapper.querySelector("input"),
   options = wrapper.querySelector(".selectwithSearch__options");

    let optionsValues = [ 

       {
       group: "Wood",
       phrases: [
           "Termite Food",
           "Plank",
           "Plant armor"
       ],
       img: "teste.png",
       obs: ""
   },
   {
       group: "Water Pipe",
       phrases: [
           "Take a Water Pipe",
       ],
       img: "teste.png",
       obs: ""
   },

    ];

    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) { searchInp.value = ""; addOptions(selectedValue); wrapper.classList.remove("active"); selectBtn.firstElementChild.innerText = selectedValue; console.log(optionsValues.filter(curr => curr.group === 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=64236”