const gifSearchBar = document.getElementById('gifSearch')
const noGIFs = document.getElementById('no-gifs-found');
const container = document.getElementById('GIFs');
let commentFormID;
function insertGIF(url) {
const commentBox = document.getElementById(commentFormID);
const old = commentBox.value;
if (old) commentBox.value = `${old}\n${url}`;
else commentBox.value = url
if (typeof checkForRequired === "function") checkForRequired();
}
document.getElementById('gifModal').addEventListener('shown.bs.modal', function () {
gifSearchBar.focus();
setTimeout(() => {
gifSearchBar.focus();
}, 200);
setTimeout(() => {
gifSearchBar.focus();
}, 1000);
});
async function getGifs(form) {
commentFormID = form;
gifSearchBar.value = null;
noGIFs.classList.add("d-none");
container.innerHTML = `
`
const overlays = document.getElementsByClassName('gif-cat-overlay')
for (const element of overlays) {
element.addEventListener('click', () => {searchGifs(element.firstElementChild.innerHTML)});
}
}
document.getElementById('gifs-back-btn').addEventListener('click', getGifs);
async function searchGifs(searchTerm) {
gifSearchBar.value = searchTerm;
container.innerHTML = '';
let response = await fetch("/giphy?searchTerm=" + searchTerm + "&limit=48");
let data = await response.json()
data = data.data
if (data.length) {
for (const e of data) {
const url = "https://media.giphy.com/media/" + e.id + "/giphy.webp";
const insert = `
`
container.insertAdjacentHTML('beforeend', insert);
}
const giphy = document.getElementsByClassName('giphy')
for (const element of giphy) {
element.addEventListener('click', () => {insertGIF(element.src)});
}
}
else {
noGIFs.classList.remove('d-none')
}
}
gifSearchBar.addEventListener('change', () => {searchGifs(gifSearchBar.value)});
