992
edições
Widget:GroupSelect: mudanças entre as edições
Ir para navegação
Ir para pesquisar
sem sumário de edição
Sem resumo de edição |
Sem resumo de edição |
||
| (11 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) | |||
| Linha 1: | Linha 1: | ||
<div class="selectwithSearch__container <!--{$id|default:''|escape:'html'}-->"> | <div class="selectwithSearch__container <!--{$id|default:''|escape:'html'}-->"> | ||
<div class="selectwithSearch__selectBtn <!--{$id|default:''|escape:'html'}-->"> | <div class="selectwithSearch__selectBtn <!--{$id|default:''|escape:'html'}-->"> | ||
<span>Selecione a frase desejada</span> | <span><!--{$title|default:'Selecione a frase desejada'|escape:'html'}--></span> | ||
<svg width="24" height="24" fill="#000" viewBox="0 0 16 16"> | <svg width="24" height="24" fill="#000" viewBox="0 0 16 16"> | ||
<path fill-rule="evenodd" | <path fill-rule="evenodd" | ||
| Linha 8: | Linha 8: | ||
</div> | </div> | ||
<div class="selectwithSearch__content"> | <div class="selectwithSearch__content <!--{$classes|default:''|escape:'html'}-->"> | ||
<div class="selectwithSearch__search"> | <div class="selectwithSearch__search"> | ||
<svg width="18" height="18" viewBox="0 0 16 16"> | <svg width="18" height="18" viewBox="0 0 16 16"> | ||
| Linha 28: | Linha 28: | ||
<script> | <script> | ||
document.addEventListener("click", function() { | |||
if ( | |||
!event.target.closest(".selectwithSearch__container") | |||
) { | |||
const element = document.querySelector(".selectwithSearch__container.active"); | |||
if(element) document.querySelector(".selectwithSearch__container.active").classList.remove('active'); | |||
} | |||
}, false); | |||
const wrapper<!--{$id|default:''|escape:'html'}--> = document.querySelector(".selectwithSearch__container.<!--{$id|default:''|escape:'html'}-->"), | const wrapper<!--{$id|default:''|escape:'html'}--> = document.querySelector(".selectwithSearch__container.<!--{$id|default:''|escape:'html'}-->"), | ||
selectBtn<!--{$id|default:''|escape:'html'}--> = wrapper<!--{$id|default:''|escape:'html'}-->.querySelector(".selectwithSearch__selectBtn.<!--{$id|default:''|escape:'html'}-->"), | selectBtn<!--{$id|default:''|escape:'html'}--> = wrapper<!--{$id|default:''|escape:'html'}-->.querySelector(".selectwithSearch__selectBtn.<!--{$id|default:''|escape:'html'}-->"), | ||
| Linha 33: | Linha 42: | ||
options<!--{$id|default:''|escape:'html'}--> = wrapper<!--{$id|default:''|escape:'html'}-->.querySelector(".selectwithSearch__options.<!--{$id|default:''|escape:'html'}-->"); | options<!--{$id|default:''|escape:'html'}--> = wrapper<!--{$id|default:''|escape:'html'}-->.querySelector(".selectwithSearch__options.<!--{$id|default:''|escape:'html'}-->"); | ||
function addOptions(selectedOpt) { | function addOptions<!--{$id|default:''|escape:'html'}-->(selectedOpt) { | ||
options<!--{$id|default:''|escape:'html'}-->.innerHTML = ""; | options<!--{$id|default:''|escape:'html'}-->.innerHTML = ""; | ||
optionsValues<!--{$ | optionsValues<!--{$OptId|default:$id|escape:'html'}-->.forEach(option => { | ||
let isSelected = option.group === selectedOpt ? "selected" : ""; | let isSelected = option.group === selectedOpt ? "selected" : ""; | ||
| Linha 43: | Linha 52: | ||
option.phrases.map(phrase => { | option.phrases.map(phrase => { | ||
let li = `<li onclick="updateName('${option.group}', '${option.img}', '${option.obs}')"> ${phrase} </li>`; | let li = `<li onclick="updateName<!--{$id|default:''|escape:'html'}-->('${option.group}', '${option.img}', '${option.obs}')"> ${phrase} </li>`; | ||
options<!--{$id|default:''|escape:'html'}-->.insertAdjacentHTML("beforeend", li); | options<!--{$id|default:''|escape:'html'}-->.insertAdjacentHTML("beforeend", li); | ||
}); | }); | ||
| Linha 49: | Linha 58: | ||
} | } | ||
addOptions(); | addOptions<!--{$id|default:''|escape:'html'}-->(); | ||
var updateName<!--{$id|default:''|escape:'html'}--> = (selectedValue, img, obs) => { | |||
searchInp<!--{$id|default:''|escape:'html'}-->.value = ""; | searchInp<!--{$id|default:''|escape:'html'}-->.value = ""; | ||
addOptions(selectedValue); | addOptions<!--{$id|default:''|escape:'html'}-->(selectedValue); | ||
wrapper<!--{$id|default:''|escape:'html'}-->.classList.remove("active"); | wrapper<!--{$id|default:''|escape:'html'}-->.classList.remove("active"); | ||
document.querySelector('#img-select<!--{$id|default:''|escape:'html'}-->').src = window.location.origin + img; | document.querySelector('#img-select<!--{$id|default:''|escape:'html'}-->').src = window.location.origin + img; | ||
| Linha 66: | Linha 75: | ||
let searchWord = searchInp<!--{$id|default:''|escape:'html'}-->.value.toLowerCase(); | let searchWord = searchInp<!--{$id|default:''|escape:'html'}-->.value.toLowerCase(); | ||
arr = optionsValues<!--{$ | arr = optionsValues<!--{$OptId|default:$id|escape:'html'}-->.filter(data => { | ||
return data.phrases.filter(curr => curr.toLowerCase(). | return data.phrases.filter(curr => curr.toLowerCase().indexOf(searchWord) > -1).length > 0; | ||
}).map(option => { | }).map(option => { | ||
let isSelected = option.group === selectBtn<!--{$id|default:''|escape:'html'}-->.firstElementChild.innerText ? "selected" : ""; | let isSelected = option.group === selectBtn<!--{$id|default:''|escape:'html'}-->.firstElementChild.innerText ? "selected" : ""; | ||
| Linha 73: | Linha 82: | ||
html += `<li class="groupTitle ${isSelected}"> ${option.group} </li>`; | html += `<li class="groupTitle ${isSelected}"> ${option.group} </li>`; | ||
option.phrases.filter(curr => curr.toLowerCase(). | option.phrases.filter(curr => curr.toLowerCase().indexOf(searchWord) > -1).map(phrase => { | ||
html += `<li onclick="updateName('${option.group}', '${option.img}', '${option.obs}')"> ${phrase} </li>`; | html += `<li onclick="updateName<!--{$id|default:''|escape:'html'}-->('${option.group}', '${option.img}', '${option.obs}')"> ${phrase} </li>`; | ||
}); | }); | ||