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);
insertText(commentBox, url)
}
const gifModal = document.getElementById('gifModal')
gifModal.addEventListener('shown.bs.modal', function () {
focusSearchBar(gifSearchBar);
setTimeout(() => {
focusSearchBar(gifSearchBar);
}, 200);
setTimeout(() => {
focusSearchBar(gifSearchBar);
}, 1000);
});
async function show_gif_categories(t, form) {
if (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)});
}
if (t) {
if (t.dataset.previousModal) {
gifModal.addEventListener('hide.bs.modal', () => {
bootstrap.Modal.getOrCreateInstance(document.getElementById(t.dataset.previousModal)).show()
}, {once : true});
}
}
}
document.getElementById('gifs-back-btn').addEventListener('click', () => show_gif_categories(null, null));
async function searchGifs(searchTerm) {
gifSearchBar.value = searchTerm;
noGIFs.classList.add("d-none");
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)});
