diff --git a/files/assets/css/main.css b/files/assets/css/main.css index e0e3de8a2..a4194fcce 100644 --- a/files/assets/css/main.css +++ b/files/assets/css/main.css @@ -1807,6 +1807,11 @@ button.close { .modal-open { overflow: hidden !important; } +@media (min-width: 768px) { + .modal-open { + padding-right: 21px; + } +} .modal-open .modal { overflow-x: hidden; overflow-y: auto; @@ -5851,11 +5856,15 @@ html { padding: 12px; padding-bottom: 4px; } +[id^="m-"]:target { + display: block !important; + background: rgba(33,38,45,.8) !important; +} .mod { padding: 2px 5px 3px 5px; border-radius: 5px; - color:white!important; + color:white !important; background: -moz-linear-gradient(180deg, red, orange, yellow, green, blue, indigo, violet); background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet ); text-shadow:-1px -1px 0 black,1px -1px 0 black,-1px 1px 0 black,1px 1px 0 black; diff --git a/files/assets/js/bottom.js b/files/assets/js/bottom.js index 2647f0671..0a3a34767 100644 --- a/files/assets/js/bottom.js +++ b/files/assets/js/bottom.js @@ -116,6 +116,24 @@ for (const element of TH) { element.addEventListener('click', () => {sort_table(element)}); } +const dismiss_modal = document.querySelectorAll("[dismiss_modal]"); +for (const element of dismiss_modal) { + element.addEventListener('click', (e) => { + if (location.hash.startsWith("#m-")) { + history.back(); + } + }); +} + +const modals = document.getElementsByClassName("modal"); +for (const element of modals) { + element.addEventListener('click', (e) => { + if (location.hash.startsWith("#m-") && e.target == element) { + history.back(); + } + }); +} + function register_new_elements(e) { const oninput = e.querySelectorAll('[data-oninput]'); for (const element of oninput) { diff --git a/files/assets/js/comments_v.js b/files/assets/js/comments_v.js index 09e59fb15..9963aeda4 100644 --- a/files/assets/js/comments_v.js +++ b/files/assets/js/comments_v.js @@ -8,7 +8,6 @@ reason_comment.addEventListener('keydown', (e) => { if (!(targetDOM instanceof HTMLInputElement)) return; reportCommentButton.click() - bootstrap.Modal.getOrCreateInstance(document.getElementById('reportCommentModal')).hide() }); diff --git a/files/assets/js/core.js b/files/assets/js/core.js index d8dd3a712..02cae3ab2 100644 --- a/files/assets/js/core.js +++ b/files/assets/js/core.js @@ -129,11 +129,10 @@ if (!location.pathname.endsWith('/submit')) } const submitButtonDOMs = formDOM.querySelectorAll('input[type=submit], .btn-primary'); - if (submitButtonDOMs.length === 0) - throw new TypeError("I am unable to find the submit button :(. Contact the head custodian immediately.") - - const btn = submitButtonDOMs[0] - btn.click(); + if (submitButtonDOMs) { + const btn = submitButtonDOMs[0] + btn.click(); + } }); } @@ -182,8 +181,6 @@ function formkey() { else return null; } -const expandImageModal = document.getElementById('expandImageModal') - function expandImage(url) { const e = this.event if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) @@ -201,7 +198,7 @@ function expandImage(url) { document.getElementById("desktop-expanded-image").src = url.replace("200w.webp", "giphy.webp"); document.getElementById("desktop-expanded-image-wrap-link").href = url.replace("200w.webp", "giphy.webp"); - bootstrap.Modal.getOrCreateInstance(expandImageModal).show(); + location.hash = 'm-expandImage' }; function bs_trigger(e) { @@ -405,6 +402,12 @@ function focusSearchBar(element) { if (screen_width >= 768) { element.focus(); + setTimeout(() => { + element.focus(); + }, 200); + setTimeout(() => { + element.focus(); + }, 1000); } } @@ -634,35 +637,6 @@ function handleUploadProgress(e, upload_prog) { } } - -if (screen_width <= 768) { - let object - if (gbrowser == 'iphone' && expandImageModal) - object = expandImageModal - if (gbrowser != 'iphone') - object = document - - if (object) { - object.addEventListener('shown.bs.modal', function (e) { - const new_href = `${location.href.split('#')[0]}#m-${e.target.id}` - history.pushState({}, '', new_href) - }); - - object.addEventListener('hide.bs.modal', function (e) { - if (location.hash == `#m-${e.target.id}`) { - history.back(); - } - }); - - addEventListener('hashchange', function () { - if (!location.hash.startsWith("#m-")) { - const curr_modal = bootstrap.Modal.getInstance(document.getElementsByClassName('show')[0]) - if (curr_modal) curr_modal.hide() - } - }); - } -} - document.querySelectorAll('form').forEach(form => { form.addEventListener('submit', (e) => { if (form.classList.contains('is-submitting')) { @@ -719,3 +693,13 @@ function enablePushNotifications() { console.error(e) }) } + +const body = document.getElementsByTagName('body')[0] +function body_fix() { + if (location.hash.startsWith("#m-")) + body.classList.add('modal-open') + else + body.classList.remove('modal-open') +} +body_fix() +addEventListener('hashchange', body_fix) diff --git a/files/assets/js/emoji_modal.js b/files/assets/js/emoji_modal.js index bb261a8a0..4fd14af9e 100644 --- a/files/assets/js/emoji_modal.js +++ b/files/assets/js/emoji_modal.js @@ -221,8 +221,8 @@ function fetchEmojis() { let classSelectorDOM = document.createElement("li"); classSelectorDOM.classList.add("nav-item"); - let classSelectorLinkDOM = document.createElement("a"); - classSelectorLinkDOM.href = "#"; + let classSelectorLinkDOM = document.createElement("button"); + classSelectorLinkDOM.type = "button"; classSelectorLinkDOM.classList.add("nav-link", "emojitab"); classSelectorLinkDOM.dataset.bsToggle = "tab"; classSelectorLinkDOM.dataset.className = className; @@ -256,7 +256,7 @@ function switchEmojiTab(e) const className = e.currentTarget.dataset.className; emojiSearchBarDOM.value = ""; - focusSearchBar(emojiSearchBarDOM); + emojiSearchBarDOM.focus(); emojiNotFoundDOM.hidden = true; // Special case: favorites @@ -559,12 +559,8 @@ function loadEmojis(inputTargetIDName) } } -document.getElementById('emojiModal').addEventListener('shown.bs.modal', function () { - focusSearchBar(emojiSearchBarDOM); - setTimeout(() => { +addEventListener('hashchange', function () { + if (location.hash == "#m-emoji") { focusSearchBar(emojiSearchBarDOM); - }, 200); - setTimeout(() => { - focusSearchBar(emojiSearchBarDOM); - }, 1000); + } }); diff --git a/files/assets/js/gif_modal.js b/files/assets/js/gif_modal.js index f3c047589..823be848a 100644 --- a/files/assets/js/gif_modal.js +++ b/files/assets/js/gif_modal.js @@ -15,16 +15,6 @@ function insertGIF(url) { if (typeof checkForRequired === "function") checkForRequired(); } -document.getElementById('gifModal').addEventListener('shown.bs.modal', function () { - focusSearchBar(gifSearchBar); - setTimeout(() => { - focusSearchBar(gifSearchBar); - }, 200); - setTimeout(() => { - focusSearchBar(gifSearchBar); - }, 1000); -}); - async function getGifs(form) { commentFormID = form; @@ -126,7 +116,7 @@ async function searchGifs(searchTerm) { if (data.length) { for (const e of data) { const url = "https://media.giphy.com/media/" + e.id + "/giphy.webp"; - const insert = `` + const insert = `` container.insertAdjacentHTML('beforeend', insert); } @@ -141,3 +131,9 @@ async function searchGifs(searchTerm) { } gifSearchBar.addEventListener('change', () => {searchGifs(gifSearchBar.value)}); + +addEventListener('hashchange', function () { + if (location.hash == "#m-gif") { + focusSearchBar(gifSearchBar); + } +}); diff --git a/files/assets/js/report_post_modal.js b/files/assets/js/report_post_modal.js index 8068a85f5..2d93f368d 100644 --- a/files/assets/js/report_post_modal.js +++ b/files/assets/js/report_post_modal.js @@ -8,7 +8,6 @@ reason_post.addEventListener('keydown', (e) => { if (!(targetDOM instanceof HTMLInputElement)) return; reportPostButton.click() - bootstrap.Modal.getOrCreateInstance(document.getElementById('reportPostModal')).hide() }); function report_postModal(id) { diff --git a/files/assets/js/settings_security.js b/files/assets/js/settings_security.js index 6a0778e87..565791fdf 100644 --- a/files/assets/js/settings_security.js +++ b/files/assets/js/settings_security.js @@ -3,10 +3,11 @@ document.getElementById('new_email').addEventListener('input', function () { document.getElementById("email-password-label").classList.remove("d-none"); document.getElementById("emailpasswordRequired").classList.remove("d-none"); }); -const twoStepModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('2faModal')) function emailVerifyText() { document.getElementById("email-verify-text").innerHTML = "Verification email sent! Please check your inbox."; } -document.getElementById('2faToggle').addEventListener('change', () => {twoStepModal.show()}) +document.getElementById('2faToggle').addEventListener('change', () => { + location.hash = 'm-2fa' +}) diff --git a/files/templates/comments.html b/files/templates/comments.html index 6069c229f..94220154f 100644 --- a/files/templates/comments.html +++ b/files/templates/comments.html @@ -282,7 +282,7 @@ @@ -740,12 +740,12 @@ {% include "modals/punish.html" %} {% endif %} - -