2022-12-25 01:45:24 +00:00
const gifSearchBar = document . getElementById ( 'gifSearch' )
const loadGIFs = document . getElementById ( 'gifs-load-more' ) ;
const noGIFs = document . getElementById ( 'no-gifs-found' ) ;
const container = document . getElementById ( 'GIFs' ) ;
2022-07-16 21:00:02 +00:00
let commentFormID ;
2022-12-25 01:45:24 +00:00
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 ) ;
} ) ;
document . getElementById ( 'gifModal' ) . addEventListener ( 'shown.bs.modal' , function ( ) {
gifSearchBar . focus ( ) ;
setTimeout ( ( ) => {
gifSearchBar . focus ( ) ;
} , 200 ) ;
setTimeout ( ( ) => {
gifSearchBar . focus ( ) ;
} , 1000 ) ;
} ) ;
async function getGifs ( form ) {
2022-07-16 21:00:02 +00:00
commentFormID = form ;
2022-12-25 01:45:24 +00:00
gifSearchBar . value = null ;
noGIFs . innerHTML = null ;
loadGIFs . innerHTML = null ;
2022-12-19 22:16:06 +00:00
2022-12-26 01:57:09 +00:00
container . innerHTML = `
< div class = "card" >
< div class = "gif-cat-overlay" > < div > Agree < / d i v > < / d i v >
2023-01-01 08:10:06 +00:00
< img loading = "lazy" src = "https://media.giphy.com/media/wGhYz3FHaRJgk/giphy.webp" >
2022-12-26 01:57:09 +00:00
< / d i v >
< div class = "card" >
< div class = "gif-cat-overlay" > < div > Laugh < / d i v > < / d i v >
2023-01-01 08:10:06 +00:00
< img loading = "lazy" src = "https://media.giphy.com/media/O5NyCibf93upy/giphy.webp" >
2022-12-26 01:57:09 +00:00
< / d i v >
< div class = "card" >
< div class = "gif-cat-overlay" > < div > Confused < / d i v > < / d i v >
2023-01-01 08:10:06 +00:00
< img loading = "lazy" src = "https://media.giphy.com/media/3o7btPCcdNniyf0ArS/giphy.webp" >
2022-12-26 01:57:09 +00:00
< / d i v >
< div class = "card" >
< div class = "gif-cat-overlay" > < div > Sad < / d i v > < / d i v >
2023-01-01 08:10:06 +00:00
< img loading = "lazy" src = "https://media.giphy.com/media/ISOckXUybVfQ4/giphy.webp" >
2022-12-26 01:57:09 +00:00
< / d i v >
< div class = "card" >
< div class = "gif-cat-overlay" > < div > Happy < / d i v > < / d i v >
2023-01-01 08:10:06 +00:00
< img loading = "lazy" src = "https://media.giphy.com/media/XR9Dp54ZC4dji/giphy.webp" >
2022-12-26 01:57:09 +00:00
< / d i v >
< div class = "card" >
< div class = "gif-cat-overlay" > < div > Awesome < / d i v > < / d i v >
2023-01-01 08:10:06 +00:00
< img loading = "lazy" src = "https://media.giphy.com/media/3ohzdIuqJoo8QdKlnW/giphy.webp" >
2022-12-26 01:57:09 +00:00
< / d i v >
< div class = "card" >
< div class = "gif-cat-overlay" > < div > Yes < / d i v > < / d i v >
2023-01-01 08:10:06 +00:00
< img loading = "lazy" src = "https://media.giphy.com/media/J336VCs1JC42zGRhjH/giphy.webp" >
2022-12-26 01:57:09 +00:00
< / d i v >
< div class = "card" >
< div class = "gif-cat-overlay" > < div > No < / d i v > < / d i v >
2023-01-01 08:10:06 +00:00
< img loading = "lazy" src = "https://media.giphy.com/media/1zSz5MVw4zKg0/giphy.webp" >
2022-12-26 01:57:09 +00:00
< / d i v >
< div class = "card" >
< div class = "gif-cat-overlay" > < div > Love < / d i v > < / d i v >
2023-01-01 08:10:06 +00:00
< img loading = "lazy" src = "https://media.giphy.com/media/4N1wOi78ZGzSB6H7vK/giphy.webp" >
2022-12-26 01:57:09 +00:00
< / d i v >
< div class = "card" >
< div class = "gif-cat-overlay" > < div > Please < / d i v > < / d i v >
2023-01-01 08:10:06 +00:00
< img loading = "lazy" src = "https://media.giphy.com/media/qUIm5wu6LAAog/giphy.webp" >
2022-12-26 01:57:09 +00:00
< / d i v >
< div class = "card" >
< div class = "gif-cat-overlay" > < div > Scared < / d i v > < / d i v >
2023-01-01 08:10:06 +00:00
< img loading = "lazy" src = "https://media.giphy.com/media/bEVKYB487Lqxy/giphy.webp" >
2022-12-26 01:57:09 +00:00
< / d i v >
< div class = "card" >
< div class = "gif-cat-overlay" > < div > Angry < / d i v > < / d i v >
2023-01-01 08:10:06 +00:00
< img loading = "lazy" src = "https://media.giphy.com/media/12Pb87uq0Vwq2c/giphy.webp" >
2022-12-26 01:57:09 +00:00
< / d i v >
< div class = "card" >
< div class = "gif-cat-overlay" > < div > Awkward < / d i v > < / d i v >
2023-01-01 08:10:06 +00:00
< img loading = "lazy" src = "https://media.giphy.com/media/unFLKoAV3TkXe/giphy.webp" >
2022-12-26 01:57:09 +00:00
< / d i v >
< div class = "card" >
< div class = "gif-cat-overlay" > < div > Cringe < / d i v > < / d i v >
2023-01-01 08:10:06 +00:00
< img loading = "lazy" src = "https://media.giphy.com/media/1jDvQyhGd3L2g/giphy.webp" >
2022-12-26 01:57:09 +00:00
< / d i v >
< div class = "card" >
< div class = "gif-cat-overlay" > < div > OMG < / d i v > < / d i v >
2023-01-01 08:10:06 +00:00
< img loading = "lazy" src = "https://media.giphy.com/media/3o72F8t9TDi2xVnxOE/giphy.webp" >
2022-12-26 01:57:09 +00:00
< / d i v >
< div class = "card" >
< div class = "gif-cat-overlay" > < div > Why < / d i v > < / d i v >
2023-01-01 08:10:06 +00:00
< img loading = "lazy" src = "https://media.giphy.com/media/1M9fmo1WAFVK0/giphy.webp" >
2022-12-26 01:57:09 +00:00
< / d i v >
< div class = "card" >
< div class = "gif-cat-overlay" > < div > Gross < / d i v > < / d i v >
2023-01-01 08:10:06 +00:00
< img loading = "lazy" src = "https://media.giphy.com/media/pVAMI8QYM42n6/giphy.webp" >
2022-12-26 01:57:09 +00:00
< / d i v >
< div class = "card" >
< div class = "gif-cat-overlay" > < div > Meh < / d i v > < / d i v >
2023-01-01 08:10:06 +00:00
< img loading = "lazy" src = "https://media.giphy.com/media/xT77XTpyEzJ4OJO06c/giphy.webp" >
2022-12-26 01:57:09 +00:00
< / d i v > `
2022-12-25 01:45:24 +00:00
}
async function searchGifs ( searchTerm ) {
2022-07-16 21:00:02 +00:00
if ( searchTerm !== undefined ) {
2022-12-19 22:16:06 +00:00
gifSearchBar . value = searchTerm ;
2022-07-16 21:00:02 +00:00
}
else {
2022-12-19 22:16:06 +00:00
gifSearchBar . value = null ;
2022-07-16 21:00:02 +00:00
}
container . innerHTML = '' ;
2022-12-25 01:45:24 +00:00
let response = await fetch ( "/giphy?searchTerm=" + searchTerm + "&limit=48" ) ;
let data = await response . json ( )
const max = data . length - 1
data = data . data
const gifURL = [ ] ;
2022-07-16 21:00:02 +00:00
2022-12-25 01:45:24 +00:00
if ( max <= 0 ) {
2022-12-26 01:57:09 +00:00
noGIFs . innerHTML = '<div class="text-center py-3 mt-3"></div><div class="mb-3"><i class="fas fa-frown text-gray-500" style="font-size: 3.5rem"></i></div><p class="font-weight-bold text-gray-500 mb-0">Aw shucks. No GIFs found...</p></div>' ;
2022-12-25 01:45:24 +00:00
container . innerHTML = null ;
2022-07-16 21:00:02 +00:00
loadGIFs . innerHTML = null ;
}
else {
2022-12-25 01:45:24 +00:00
for ( let i = 0 ; i < 48 ; i ++ ) {
2023-01-01 08:10:06 +00:00
gifURL [ i ] = "https://media.giphy.com/media/" + data [ i ] . id + "/giphy.webp" ;
2022-12-27 01:01:27 +00:00
const insert = ` <img class="giphy" loading="lazy" data-bs-dismiss="modal" src=" ${ gifURL [ i ] } "></div> `
2022-12-25 01:45:24 +00:00
container . insertAdjacentHTML ( 'beforeend' , insert ) ;
2022-07-16 21:00:02 +00:00
noGIFs . innerHTML = null ;
2022-12-28 09:03:58 +00:00
loadGIFs . innerHTML = '<div class="text-center py-3"></div><div class="mb-3"><i class="fas fa-grin-beam-sweat text-gray-500" style="font-size: 3.5rem"></i></div><p class="font-weight-bold text-gray-500 mb-0">Thou hast reached the end of the list!</p></div>' ;
2022-07-16 21:00:02 +00:00
}
}
}
2023-01-01 09:47:59 +00:00
document . getElementById ( 'gifs-back-btn' ) . onclick = getGifs ;
document . getElementById ( 'gifs-cancel-btn' ) . onclick = getGifs ;