fix gif search

files/assets/js/gif_modal.js

@@ -1,5 +1,4 @@
 const gifSearchBar = document.getElementById('gifSearch')
-const loadGIFs = document.getElementById('gifs-load-more');
 const noGIFs = document.getElementById('no-gifs-found');
 const container = document.getElementById('GIFs');
 
@@ -25,23 +24,11 @@ document.getElementById('gifModal').addEventListener('shown.bs.modal', function
 	}, 1000);
 });
 
-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.innerHTML = null;
+	noGIFs.classList.add("d-none");
-	loadGIFs.innerHTML = null;
 
 	container.innerHTML = `
 	<div class="card">
@@ -118,38 +105,29 @@ async function getGifs(form) {
 	</div>`
 }
 
+document.getElementById('gifs-back-btn').onclick = getGifs;
+document.getElementById('gifs-cancel-btn').onclick = getGifs;
+
 async function searchGifs(searchTerm) {
 
-	if (searchTerm !== undefined) {
+	gifSearchBar.value = searchTerm;
-		gifSearchBar.value = searchTerm;
-	}
-	else {
-		gifSearchBar.value = null;
-	}
 
 	container.innerHTML = '';
 
 	let response = await fetch("/giphy?searchTerm=" + searchTerm + "&limit=48");
 	let data = await response.json()
-	const max = data.length - 1
 	data = data.data
-	const gifURL = [];
 
-	if (max <= 0) {
+	if (data.length) {
-		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>';
+		for (const e of data) {
-		container.innerHTML = null;
+			const url = "https://media.giphy.com/media/" + e.id + "/giphy.webp";
-		loadGIFs.innerHTML = null;
+			const insert = `<img class="giphy" loading="lazy" data-bs-dismiss="modal" src="${url}"></div>`
+			container.insertAdjacentHTML('beforeend', insert);
+		}
 	}
 	else {
-		for (let i = 0; i < 48; i++) {
+		noGIFs.classList.remove('d-none')
-			gifURL[i] = "https://media.giphy.com/media/" + data[i].id + "/giphy.webp";
-			const insert = `<img class="giphy" loading="lazy" data-bs-dismiss="modal" src="${gifURL[i]}"></div>`
-			container.insertAdjacentHTML('beforeend', insert);
-			noGIFs.innerHTML = null;
-			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>';
-		}
 	}
 }
 
-document.getElementById('gifs-back-btn').onclick = getGifs;
+gifSearchBar.onchange = ()=>{searchGifs(gifSearchBar.value)};
-document.getElementById('gifs-cancel-btn').onclick = getGifs;

files/templates/modals/gif.html

@@ -4,22 +4,20 @@
 			<div class="modal-header border-bottom-0 shadow-md p-3">
 				<div class="form-group d-flex align-items-center w-100 mb-0">
 					<div id="gifs-back-btn"><button class="btn btn-link mx-2" id="gifs-back-btn"><i class="fas fa-long-arrow-left text-muted"></i></button></div>
-					<input autocomplete="off" type="text" class="form-control" id="gifSearch" placeholder="Search and press enter" data-nonce="{{g.nonce}}" data-onchange="searchGifs()">
+					<input autocomplete="off" type="text" class="form-control" id="gifSearch" placeholder="Search and press enter">
 					<div id="gifs-cancel-btn"><button class="btn btn-link mx-2" id="gifs-cancel-btn"><i class="fas fa-times text-muted"></i></button></div>
 				</div>
 			</div>
 			<div style="overflow-y: auto;">
 				<div class="modal-body p-0" id="gif-modal-body">
 
-					<div id="no-gifs-found">
+					<div id="no-gifs-found" class="text-center py-3 mt-3">
+						<i class="fas fa-frown text-gray-500 mb-3" style="font-size: 3.5rem"></i>
+						<p class="font-weight-bold text-gray-500">Aw shucks. No GIFs found...</p>
 					</div>
 
 					<div class="gif-categories pt-3 px-3 pb-0" id="GIFs" style="text-align:center">
 					</div>
-
-					<div id="gifs-load-more">
-					</div>
-
 				</div>
 			</div>
 		</div>