Widget:Agatha-test: mudanças entre as edições
Sem resumo de edição |
Sem resumo de edição |
||
| (16 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) | |||
| Linha 1: | Linha 1: | ||
<div class=" | <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__search"> | |||
<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"> | |||
</div> | |||
<ul class="selectwithSearch__options"></ul> | |||
</div> | |||
</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> | |||
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 = `<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> | |||
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 = `
`; options.insertAdjacentHTML("beforeend", liGroup); option.phrases.map(phrase => { let 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 += `
`; option.phrases.filter(curr => curr.toLowerCase().startsWith(searchWord)).map(phrase => { html += `
`; }); return html; }).join(""); options.innerHTML = arr ? arr : `
Nenhuma frase foi encontrada!
`;
});
selectBtn.addEventListener("click", () => wrapper.classList.toggle("active")); </script>