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 |
||
| (6 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) | |||
| 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 51: | Linha 60: | ||
addOptions<!--{$id|default:''|escape:'html'}-->(); | 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<!--{$id|default:''|escape:'html'}-->(selectedValue); | addOptions<!--{$id|default:''|escape:'html'}-->(selectedValue); | ||
| Linha 67: | Linha 76: | ||
arr = optionsValues<!--{$OptId|default:$id|escape:'html'}-->.filter(data => { | arr = optionsValues<!--{$OptId|default:$id|escape:'html'}-->.filter(data => { | ||
return data.phrases.filter(curr => curr.toLowerCase().indexOf(searchWord) > -1); | 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 74: | Linha 83: | ||
html += `<li class="groupTitle ${isSelected}"> ${option.group} </li>`; | html += `<li class="groupTitle ${isSelected}"> ${option.group} </li>`; | ||
option.phrases.filter(curr => curr.toLowerCase().indexOf(searchWord) > -1).map(phrase => { | 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>`; | ||
}); | }); | ||