gerudo
/
rDrama
forked from rDrama/rDrama
1
0
Fork 0
Code Pull Requests Activity

fix gif search

master
Aevann 2023-01-03 13:25:28 +02:00
parent 6c9db512d8
commit cb42953853
2 changed files with 17 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
files/assets/js/gif_modal.js
View File

@ -1,5 +1,4 @@
const gifSearchBar = document.getElementById('gifSearch') const gifSearchBar = document.getElementById('gifSearch')
const loadGIFs = document.getElementById('gifs-load-more');
const noGIFs = document.getElementById('no-gifs-found'); const noGIFs = document.getElementById('no-gifs-found');
const container = document.getElementById('GIFs'); const container = document.getElementById('GIFs');
@ -25,23 +24,11 @@ document.getElementById('gifModal').addEventListener('shown.bs.modal', function
}, 1000); }, 1000);
}); });
document.getElementById('gifModal').addEventListener('shown.bs.modal', function () {
gifSearchBar.focus();
setTimeout(() => {
gifSearchBar.focus();
}, 200);
setTimeout(() => {
gifSearchBar.focus();
}, 1000);
});
async function getGifs(form) { async function getGifs(form) {
commentFormID = form; commentFormID = form;
gifSearchBar.value = null; gifSearchBar.value = null;
noGIFs.innerHTML = null; noGIFs.classList.add("d-none");
loadGIFs.innerHTML = null;
container.innerHTML = ` container.innerHTML = `
<div class="card"> <div class="card">
@ -118,38 +105,29 @@ async function getGifs(form) {
</div>` </div>`
} }
document.getElementById('gifs-back-btn').onclick = getGifs;
document.getElementById('gifs-cancel-btn').onclick = getGifs;
async function searchGifs(searchTerm) { async function searchGifs(searchTerm) {
if (searchTerm !== undefined) { gifSearchBar.value = searchTerm;
gifSearchBar.value = searchTerm;
}
else {
gifSearchBar.value = null;
}
container.innerHTML = ''; container.innerHTML = '';
let response = await fetch("/giphy?searchTerm=" + searchTerm + "&limit=48"); let response = await fetch("/giphy?searchTerm=" + searchTerm + "&limit=48");
let data = await response.json() let data = await response.json()
const max = data.length - 1
data = data.data 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 { 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;

10
files/templates/modals/gif.html
View File

@ -4,22 +4,20 @@
<div class="modal-header border-bottom-0 shadow-md p-3"> <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 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> <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 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> </div>
<div style="overflow-y: auto;"> <div style="overflow-y: auto;">
<div class="modal-body p-0" id="gif-modal-body"> <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>
<div class="gif-categories pt-3 px-3 pb-0" id="GIFs" style="text-align:center"> <div class="gif-categories pt-3 px-3 pb-0" id="GIFs" style="text-align:center">
</div> </div>
<div id="gifs-load-more">
</div>
</div> </div>
</div> </div>
</div> </div>