From e6803f93e922031b89827f7564d9e075d599cacd Mon Sep 17 00:00:00 2001 From: Aevann Date: Sun, 25 Dec 2022 03:45:24 +0200 Subject: [PATCH] rework gif modal --- files/assets/css/main.css | 10 +- files/assets/js/core.js | 2 + files/assets/js/gif_modal.js | 144 +++++++++++++-------------- files/templates/comments.html | 2 +- files/templates/modals/gif.html | 2 +- files/templates/settings/common.html | 2 +- files/templates/submission.html | 2 +- files/templates/submit.html | 2 +- files/templates/util/macros.html | 2 +- 9 files changed, 83 insertions(+), 85 deletions(-) diff --git a/files/assets/css/main.css b/files/assets/css/main.css index df5db7d62..8aa41d671 100644 --- a/files/assets/css/main.css +++ b/files/assets/css/main.css @@ -4418,10 +4418,6 @@ pre .str, code .str { pre .com, code .com { color: #ab4bc3; } -.gif-categories .card { - overflow: hidden; - border: none; -} .gif-categories img { border-radius: 0.35rem; width: 100%; @@ -6520,3 +6516,9 @@ div.markdown { column-count: 11 !important; } } + +.giphy { + overflow: hidden; + background-color: var(--gray-600); + cursor: pointer; +} diff --git a/files/assets/js/core.js b/files/assets/js/core.js index 515e13776..6e244c8ae 100644 --- a/files/assets/js/core.js +++ b/files/assets/js/core.js @@ -451,4 +451,6 @@ document.addEventListener("click", function(e){ expandDesktopImage() else if (element.tagName == "TH") sort_table(element) + else if (element.classList.contains('giphy')) + insertGIF(e.target.src); }); diff --git a/files/assets/js/gif_modal.js b/files/assets/js/gif_modal.js index 4a14f0c2e..f9f6a3f23 100644 --- a/files/assets/js/gif_modal.js +++ b/files/assets/js/gif_modal.js @@ -1,80 +1,14 @@ +const gifSearchBar = document.getElementById('gifSearch') +const loadGIFs = document.getElementById('gifs-load-more'); +const noGIFs = document.getElementById('no-gifs-found'); +const container = document.getElementById('GIFs'); +const backBtn = document.getElementById('gifs-back-btn'); +const cancelBtn = document.getElementById('gifs-cancel-btn'); + let commentFormID; -function commentForm(form) { - commentFormID = form; -}; - -const gifSearchBar = document.getElementById('gifSearch') - -async function getGif(searchTerm) { - - if (searchTerm !== undefined) { - gifSearchBar.value = searchTerm; - } - else { - gifSearchBar.value = null; - } - - const loadGIFs = document.getElementById('gifs-load-more'); - - const noGIFs = document.getElementById('no-gifs-found'); - - const container = document.getElementById('GIFs'); - - const backBtn = document.getElementById('gifs-back-btn'); - - const cancelBtn = document.getElementById('gifs-cancel-btn'); - - container.innerHTML = ''; - - if (searchTerm == undefined) { - container.innerHTML = '
Agree
Laugh
Confused
Sad
Happy
Awesome
Yes
No
Love
Please
Scared
Angry
Awkward
Cringe
OMG
Why
Gross
Meh
' - - backBtn.innerHTML = null; - - cancelBtn.innerHTML = null; - - noGIFs.innerHTML = null; - - loadGIFs.innerHTML = null; - } - else { - backBtn.innerHTML = ''; - - cancelBtn.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) { - noGIFs.innerHTML = '

Aw shucks. No GIFs found...

'; - container.innerHTML = null; - loadGIFs.innerHTML = null; - } - else { - for (let i = 0; i < 48; i++) { - gifURL[i] = "https://media.giphy.com/media/" + data[i].id + "/giphy.webp"; - if (data[i].username==''){ - const insert = '
' - container.insertAdjacentHTML('beforeend', insert); - } - else { - const insert = '
' - container.insertAdjacentHTML('beforeend', insert); - } - noGIFs.innerHTML = null; - loadGIFs.innerHTML = '

Thou've reached the end of the list!

'; - } - } - } -} - -function insertGIF(url,form) { - - const commentBox = document.getElementById(form); +function insertGIF(url) { + const commentBox = document.getElementById(commentFormID); const old = commentBox.value; if (old) commentBox.value = `${old}\n${url}`; @@ -92,3 +26,63 @@ document.getElementById('gifModal').addEventListener('shown.bs.modal', function 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) { + commentFormID = form; + + gifSearchBar.value = null; + backBtn.innerHTML = null; + cancelBtn.innerHTML = null; + noGIFs.innerHTML = null; + loadGIFs.innerHTML = null; + + container.innerHTML = '
Agree
Laugh
Confused
Sad
Happy
Awesome
Yes
No
Love
Please
Scared
Angry
Awkward
Cringe
OMG
Why
Gross
Meh
' +} + +async function searchGifs(searchTerm) { + + if (searchTerm !== undefined) { + gifSearchBar.value = searchTerm; + } + else { + gifSearchBar.value = null; + } + + container.innerHTML = ''; + + backBtn.innerHTML = ''; + + cancelBtn.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) { + noGIFs.innerHTML = '

Aw shucks. No GIFs found...

'; + container.innerHTML = null; + loadGIFs.innerHTML = null; + } + else { + for (let i = 0; i < 48; i++) { + gifURL[i] = "https://media.giphy.com/media/" + data[i].id + "/200w_d.webp"; + const insert = `` + container.insertAdjacentHTML('beforeend', insert); + noGIFs.innerHTML = null; + loadGIFs.innerHTML = '

Thou've reached the end of the list!

'; + } + } +} diff --git a/files/templates/comments.html b/files/templates/comments.html index c458ca608..30800d735 100644 --- a/files/templates/comments.html +++ b/files/templates/comments.html @@ -286,7 +286,7 @@
- +     diff --git a/files/templates/modals/gif.html b/files/templates/modals/gif.html index d2472b7aa..b79f6b081 100644 --- a/files/templates/modals/gif.html +++ b/files/templates/modals/gif.html @@ -4,7 +4,7 @@
- +
diff --git a/files/templates/settings/common.html b/files/templates/settings/common.html index 75b3fb54c..db356a6f3 100644 --- a/files/templates/settings/common.html +++ b/files/templates/settings/common.html @@ -81,7 +81,7 @@ {% if show_extras %}
- +     diff --git a/files/templates/submission.html b/files/templates/submission.html index bbce12e73..cbcb95ecc 100644 --- a/files/templates/submission.html +++ b/files/templates/submission.html @@ -186,7 +186,7 @@
- +