2022-07-16 21:00:02 +00:00
let commentFormID ;
function commentForm ( form ) {
commentFormID = form ;
} ;
async function getGif ( searchTerm ) {
if ( searchTerm !== undefined ) {
document . getElementById ( 'gifSearch' ) . value = searchTerm ;
}
else {
document . getElementById ( 'gifSearch' ) . value = null ;
}
var loadGIFs = document . getElementById ( 'gifs-load-more' ) ;
var noGIFs = document . getElementById ( 'no-gifs-found' ) ;
var container = document . getElementById ( 'GIFs' ) ;
var backBtn = document . getElementById ( 'gifs-back-btn' ) ;
var cancelBtn = document . getElementById ( 'gifs-cancel-btn' ) ;
container . innerHTML = '' ;
if ( searchTerm == undefined ) {
2022-10-29 21:42:30 +00:00
container . innerHTML = '<div class="card" onclick="getGif(\'agree\')" style="overflow: hidden"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold">Agree</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/wGhYz3FHaRJgk/giphy.webp"> </div> <div class="card" onclick="getGif(\'laugh\')" style="overflow: hidden"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold">Laugh</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/O5NyCibf93upy/giphy.webp"> </div> <div class="card" onclick="getGif(\'confused\')" style="overflow: hidden"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold">Confused</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/3o7btPCcdNniyf0ArS/giphy.webp"> </div> <div class="card" onclick="getGif(\'sad\')" style="overflow: hidden"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold">Sad</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/ISOckXUybVfQ4/giphy.webp"> </div> <div class="card" onclick="getGif(\'happy\')" style="overflow: hidden"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold">Happy</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/XR9Dp54ZC4dji/giphy.webp"> </div> <div class="card" onclick="getGif(\'awesome\')" style="overflow: hidden"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold">Awesome</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/3ohzdIuqJoo8QdKlnW/giphy.webp"> </div> <div class="card" onclick="getGif(\'yes\')" style="overflow: hidden"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold">Yes</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/J336VCs1JC42zGRhjH/giphy.webp"> </div> <div class="card" onclick="getGif(\'no\')" style="overflow: hidden"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold">No</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/1zSz5MVw4zKg0/giphy.webp"> </div> <div class="card" onclick="getGif(\'love\')" style="overflow: hidden"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold">Love</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/4N1wOi78ZGzSB6H7vK/giphy.webp"> </div> <div class="card" onclick="getGif(\'please\')" style="overflow: hidden"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold">Please</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/qUIm5wu6LAAog/giphy.webp"> </div> <div class="card" onclick="getGif(\'scared\')" style="overflow: hidden"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold">Scared</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/bEVKYB487Lqxy/giphy.webp"> </div> <div class="card" onclick="getGif(\'angry\')" style="overflow: hidden"> <div class="gif-cat-overlay"> <div style="position: relative;top: 50%;transform: translateY(-50%);color: #ffffff;font-weight: bold">Angry</div> </div> <img loading="lazy" class="img-fluid" src="https://media.giphy.com/media/12Pb87uq0Vwq2c/giphy.webp"> </div> <div class="card" onclick="getGif(\'awkward\' ) " style=" overflow : hidden "> <div class=" gif - c
2022-07-16 21:00:02 +00:00
backBtn . innerHTML = null ;
cancelBtn . innerHTML = null ;
noGIFs . innerHTML = null ;
loadGIFs . innerHTML = null ;
}
else {
backBtn . innerHTML = '<button class="btn btn-link pl-0 pr-3" id="gifs-back-btn" onclick="getGif()"><i class="fas fa-long-arrow-left text-muted ml-3"></i></button>' ;
cancelBtn . innerHTML = '<button class="btn btn-link pl-3 pr-0" id="gifs-cancel-btn" onclick="getGif()"><i class="fas fa-times text-muted"></i></button>' ;
let response = await fetch ( "/giphy?searchTerm=" + searchTerm + "&limit=48" ) ;
let data = await response . json ( )
var max = data . length - 1
data = data . data
var gifURL = [ ] ;
if ( max <= 0 ) {
noGIFs . innerHTML = '<div class="text-center py-3 mt-3"><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>' ;
container . innerHTML = null ;
loadGIFs . innerHTML = null ;
}
else {
for ( var i = 0 ; i < 48 ; i ++ ) {
gifURL [ i ] = "https://media.giphy.com/media/" + data [ i ] . id + "/giphy.webp" ;
if ( data [ i ] . username == '' ) {
2022-10-29 21:42:30 +00:00
container . innerHTML += ( '<div class="card bg-white" style="overflow: hidden" data-bs-dismiss="modal" aria-label="Close" onclick="insertGIF(\'' + 'https://media.giphy.com/media/' + data [ i ] . id + '/giphy.webp' + '\',\'' + commentFormID + '\')"><img loading="lazy" class="img-fluid" src="' + gifURL [ i ] + '"></div>' ) ;
2022-07-16 21:00:02 +00:00
}
else {
2022-10-29 21:42:30 +00:00
container . innerHTML += ( '<div class="card bg-white" style="overflow: hidden" data-bs-dismiss="modal" aria-label="Close" title="by ' + data [ i ] . username + ' on GIPHY" onclick="insertGIF(\'' + 'https://media.giphy.com/media/' + data [ i ] . id + '/giphy.webp' + '\',\'' + commentFormID + '\')"><img loading="lazy" class="img-fluid" src="' + gifURL [ i ] + '"></div>' ) ;
2022-07-16 21:00:02 +00:00
}
noGIFs . innerHTML = null ;
loadGIFs . innerHTML = '<div class="text-center py-3"><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've reached the end of the list!</p></div>' ;
}
}
}
}
function insertGIF ( url , form ) {
const commentBox = document . getElementById ( form ) ;
const old = commentBox . value ;
if ( old ) commentBox . value = ` ${ old } \n ${ url } ` ;
else commentBox . value = url
if ( typeof checkForRequired === "function" ) checkForRequired ( ) ;
2022-10-29 21:42:30 +00:00
}