Widget:Agatha-test: mudanças entre as edições

← Edição anterior

Widget:Agatha-test (ver código-fonte)

Edição das 12h49min de 8 de junho de 2023

2 688 bytes adicionados , 8 de junho de 2023

sem sumário de edição

Rag

Burocratas, Administradores da interface, Administradores, Editores de widget

992

edições

@@ 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>
-$(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>