122 lines
3.2 KiB
JavaScript
122 lines
3.2 KiB
JavaScript
"use strict";
|
|
/**
|
|
* Send ajax action to server
|
|
* @param {string} action
|
|
* @param {Object} args
|
|
* @param {Function} onLoad
|
|
* @param {Function} onSuccess
|
|
* @param {Function} onError
|
|
*/
|
|
function sendAjax(action,
|
|
args = [],
|
|
onLoad = () => { },
|
|
onSuccess = (data) => { },
|
|
onError = (error) => { }) {
|
|
|
|
onLoad();
|
|
|
|
fetch('/ajax', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
'action': action,
|
|
'args': args
|
|
})
|
|
})
|
|
.then(response => response.json().then(data => ({ data, response })))
|
|
.then(({ data, response }) => {
|
|
if (!response.ok) {
|
|
throw new Error(data.error || `HTTP error! Status: ${response.status}`);
|
|
}
|
|
|
|
onSuccess(data);
|
|
})
|
|
.catch(error => {
|
|
onError(error);
|
|
});
|
|
}
|
|
function showToastify(message, type = "info") {
|
|
Toastify({
|
|
text: message,
|
|
gravity: "bottom",
|
|
position: "left",
|
|
className: type,
|
|
duration: 3000
|
|
})
|
|
.showToast();
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const toggle = document.getElementById('menu-toggle');
|
|
const nav = document.querySelector('.nav');
|
|
const icon = document.getElementById('menu-icon');
|
|
|
|
toggle.addEventListener('click', function () {
|
|
nav.classList.toggle('nav-open');
|
|
if (nav.classList.contains('nav-open')) {
|
|
icon.classList.remove('fa-bars');
|
|
icon.classList.add('fa-xmark');
|
|
} else {
|
|
icon.classList.remove('fa-xmark');
|
|
icon.classList.add('fa-bars');
|
|
}
|
|
});
|
|
});
|
|
|
|
const searchInput = document.getElementById('search-input');
|
|
const searchResults = document.getElementById('search-results');
|
|
|
|
let searchTimeout;
|
|
|
|
searchInput.addEventListener('input', function () {
|
|
clearTimeout(searchTimeout);
|
|
|
|
searchTimeout = setTimeout(async () => {
|
|
let searchValue = this.value.trim();
|
|
|
|
if (searchValue.length < 3) {
|
|
searchResults.innerHTML = '';
|
|
searchResults.classList.add('hidden');
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData();
|
|
formData.append('action', 'search');
|
|
formData.append('query', searchValue);
|
|
|
|
const response = await fetch('/ajax', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
const json = await response.json();
|
|
|
|
if (!response.ok) {
|
|
const message = json.error || 'Something went wrong.';
|
|
showToastify(message, 'error');
|
|
return;
|
|
}
|
|
|
|
const results = json.result;
|
|
|
|
searchResults.innerHTML = '';
|
|
|
|
if (results.length > 0) {
|
|
results.forEach(result => {
|
|
searchResults.innerHTML += `
|
|
<div class="search-result-item hover-anim">
|
|
<a href="#" class="search-result-link">
|
|
${result.field_title}
|
|
</a>
|
|
</div>
|
|
`;
|
|
});
|
|
searchResults.classList.remove('hidden');
|
|
} else {
|
|
searchResults.innerHTML = `<div class="search-result-item">No recipes found</div>`;
|
|
searchResults.classList.remove('hidden');
|
|
}
|
|
}, 300);
|
|
}); |