83 lines
2.9 KiB
JavaScript
Executable File
83 lines
2.9 KiB
JavaScript
Executable File
/******** MODAL BUSQUEDA ********/
|
||
var searchButton = document.getElementById('searchButton');
|
||
var searchModal = document.getElementById('modalBusqueda');
|
||
var firstSearchFocus = searchModal.querySelector('.cerrar');
|
||
var lastSearchFocus = searchModal.querySelector('.btn');
|
||
var searchList = document.getElementById('lista-busqueda');
|
||
var searchListUl = searchList.querySelector('ul');
|
||
var searchInput = searchModal.querySelector('.form-control');
|
||
searchButton.addEventListener('click', function (e) {
|
||
showSearchModal();
|
||
});
|
||
|
||
firstSearchFocus.addEventListener('click', function () {
|
||
closeSearchModal();
|
||
});
|
||
|
||
function showSearchModal() {
|
||
document.querySelector('body').classList.add('no-scroll');
|
||
searchModal.classList.add('active');
|
||
searchInput.focus();
|
||
searchModal.addEventListener('keydown', trapFocus);
|
||
searchModal.querySelector('input.form-control').addEventListener('input', handleSearchWrite);
|
||
searchModal.querySelector('select').addEventListener('change', handleSearchWrite);
|
||
}
|
||
|
||
function trapFocus(e) {
|
||
switch (e.keyCode) {
|
||
case 9:
|
||
if (e.shiftKey) {
|
||
if (document.activeElement === firstSearchFocus) {
|
||
e.preventDefault();
|
||
lastSearchFocus.focus();
|
||
}
|
||
} else {
|
||
if (document.activeElement === lastSearchFocus) {
|
||
e.preventDefault();
|
||
firstSearchFocus.focus();
|
||
}
|
||
}
|
||
break;
|
||
case 27:
|
||
closeSearchModal();
|
||
default:
|
||
break;
|
||
}
|
||
}
|
||
|
||
function handleSearchWrite(e) {
|
||
if (searchInput.value == "") {
|
||
searchModal.classList.remove('writing');
|
||
searchList.classList.add('hidden');
|
||
} else {
|
||
searchModal.classList.add('writing');
|
||
searchList.classList.remove('hidden');
|
||
searchListUl.innerHTML = '';
|
||
var orderBy = searchModal.querySelector('select[name=order]').value;
|
||
fetch(`/productos.php?q=${searchInput.value}&order=${orderBy}`)
|
||
.then((data) => {
|
||
return data.json()
|
||
})
|
||
.then((json) => {
|
||
if (json.query !== searchInput.value) return;
|
||
if (json.mensaje) {
|
||
searchList.querySelector('.message').innerHTML = json.mensaje;
|
||
} else {
|
||
searchList.querySelector('.message').innerHTML = '';
|
||
}
|
||
searchListUl.innerHTML = json.html;
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
});
|
||
}
|
||
}
|
||
|
||
function closeSearchModal() {
|
||
document.querySelector('body').classList.remove('no-scroll');
|
||
searchModal.classList.remove('active');
|
||
searchButton.focus();
|
||
searchModal.removeEventListener('keydown', trapFocus);
|
||
searchModal.querySelector('.form-control').removeEventListener('input', handleSearchWrite);
|
||
}
|