From 776d9fc091fe94c9e6b389abac3f9e53a7d70c8b Mon Sep 17 00:00:00 2001 From: Aevann Date: Mon, 2 Oct 2023 09:04:05 +0300 Subject: [PATCH] revert the modal change --- files/assets/css/main.css | 34 +++-- files/assets/css/themes/classic.css | 2 +- files/assets/css/themes/dark.css | 2 +- files/assets/css/themes/dramblr.css | 2 +- files/assets/css/themes/light.css | 2 +- files/assets/js/bottom.js | 18 --- files/assets/js/comments_v.js | 1 + files/assets/js/core.js | 76 ++++++----- files/assets/js/emoji_modal.js | 16 ++- files/assets/js/gif_modal.js | 18 ++- files/assets/js/report_post_modal.js | 1 + files/assets/js/settings_security.js | 5 +- files/templates/comments.html | 123 +++++++++--------- files/templates/errors/WPD/404.html | 8 +- files/templates/errors/WPD/502.html | 8 +- files/templates/errors/rDrama/404.html | 8 +- files/templates/errors/rDrama/502.html | 8 +- files/templates/header.html | 15 +-- files/templates/modals/award.html | 6 +- files/templates/modals/delete_post.html | 8 +- files/templates/modals/emoji.html | 6 +- files/templates/modals/expanded_image.html | 7 +- files/templates/modals/gif.html | 4 +- files/templates/modals/punish.html | 16 +-- files/templates/modals/report_post.html | 8 +- files/templates/post.html | 16 +-- files/templates/post_actions.html | 10 +- files/templates/post_actions_mobile.html | 40 +++--- .../templates/post_admin_actions_mobile.html | 38 +++--- files/templates/post_listing.html | 12 +- files/templates/settings/common.html | 2 +- files/templates/settings/personal.html | 14 +- files/templates/settings/security.html | 6 +- files/templates/submit.html | 2 +- files/templates/userpage/admintools.html | 2 +- files/templates/util/macros.html | 6 +- 36 files changed, 275 insertions(+), 275 deletions(-) diff --git a/files/assets/css/main.css b/files/assets/css/main.css index 841410fb0..88f4d9a41 100644 --- a/files/assets/css/main.css +++ b/files/assets/css/main.css @@ -1804,6 +1804,13 @@ button.close { .toast-body { padding: 0.75rem; } +.modal-open { + overflow: hidden !important; +} +.modal-open .modal { + overflow-x: hidden; + overflow-y: auto; +} .modal { position: fixed; top: 0; @@ -1812,8 +1819,7 @@ button.close { display: none; width: 100%; height: 100%; - overflow-x: hidden; - overflow-y: auto; + overflow: hidden; outline: 0; padding-right: 0 !important; /* fix Safari zoom issue */ } @@ -5840,20 +5846,16 @@ html { padding: 12px; padding-bottom: 4px; } -:not(.modal):target { +*:target { background: rgba(var(--primary_rgb), 0.15) !important; padding: 12px; padding-bottom: 4px; } -.modal: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; @@ -6893,7 +6895,7 @@ div.markdown { margin-bottom: 10px !important; } -#m-expandImage > .modal-dialog { +#expandImageModal > .modal-dialog { max-width: 100% !important; max-height: 100%; height: 100%; @@ -6901,13 +6903,13 @@ div.markdown { margin-bottom: 0 !important; } -#expanded-image { +#desktop-expanded-image { max-width: 90%; max-height: 100vh; border: 5px white solid; } @media (max-width: 768px) { - #expanded-image { + #desktop-expanded-image { max-width: 100%; max-height: 65vh; } @@ -7547,7 +7549,7 @@ th.disable-sort-click[disabled] { box-shadow: inset 0 -4px 0 white; } -#m-expandImage a { +#expandImageModal a { pointer-events: auto; } @@ -7670,11 +7672,17 @@ ul { display: none; } -:not(.modal):target { +*:target { scroll-margin-top: 100px; } @media (min-width: 768px) { + .modal-open { + padding-right: 10px; + } + .modal-open nav { + padding-right: 10px; + } ::-webkit-scrollbar { width: 10px; } diff --git a/files/assets/css/themes/classic.css b/files/assets/css/themes/classic.css index 7db6edb0d..80a3dce9d 100644 --- a/files/assets/css/themes/classic.css +++ b/files/assets/css/themes/classic.css @@ -180,7 +180,7 @@ blockquote a { .unread { background-color: #d9d9d9 !important; } -:not(.modal):target { +*:target { background: rgba(var(--primary_rgb), 0.2) !important; } diff --git a/files/assets/css/themes/dark.css b/files/assets/css/themes/dark.css index 490c4cf1f..f54472dc9 100644 --- a/files/assets/css/themes/dark.css +++ b/files/assets/css/themes/dark.css @@ -101,7 +101,7 @@ pre { color: #bbb !important; } -:not(.modal):target { +*:target { background: rgba(var(--primary_rgb), 0.2) !important; } diff --git a/files/assets/css/themes/dramblr.css b/files/assets/css/themes/dramblr.css index 49c6b6245..c9177ff1a 100644 --- a/files/assets/css/themes/dramblr.css +++ b/files/assets/css/themes/dramblr.css @@ -80,7 +80,7 @@ blockquote { color: var(--gray-400) !important } -#frontpage div#m-expandImage.modal.expanded-image-modal { +#frontpage div#expandImageModal.modal.desktop-expanded-image-modal { background-color: transparent !important; } diff --git a/files/assets/css/themes/light.css b/files/assets/css/themes/light.css index bc97ef34a..7de8bf4f5 100644 --- a/files/assets/css/themes/light.css +++ b/files/assets/css/themes/light.css @@ -79,7 +79,7 @@ blockquote { .unread { background: #dddddd !important; } -:not(.modal):target { +*:target { background: rgba(var(--primary_rgb), 0.2) !important; } diff --git a/files/assets/js/bottom.js b/files/assets/js/bottom.js index 0a3a34767..2647f0671 100644 --- a/files/assets/js/bottom.js +++ b/files/assets/js/bottom.js @@ -116,24 +116,6 @@ 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 8b0e6665b..c572674ae 100644 --- a/files/assets/js/comments_v.js +++ b/files/assets/js/comments_v.js @@ -8,6 +8,7 @@ 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 be9ae5302..d8dd3a712 100644 --- a/files/assets/js/core.js +++ b/files/assets/js/core.js @@ -129,10 +129,11 @@ if (!location.pathname.endsWith('/submit')) } const submitButtonDOMs = formDOM.querySelectorAll('input[type=submit], .btn-primary'); - if (submitButtonDOMs) { - const btn = submitButtonDOMs[0] - btn.click(); - } + 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(); }); } @@ -181,24 +182,26 @@ 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) return; e.preventDefault(); - document.getElementById("expanded-image").src = ''; - document.getElementById("expanded-image-wrap-link").href = ''; + document.getElementById("desktop-expanded-image").src = ''; + document.getElementById("desktop-expanded-image-wrap-link").href = ''; if (!url) { url = e.target.dataset.src if (!url) url = e.target.src } - document.getElementById("expanded-image").src = url.replace("200w.webp", "giphy.webp"); - document.getElementById("expanded-image-wrap-link").href = url.replace("200w.webp", "giphy.webp"); + 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"); - location.hash = 'm-expandImage' + bootstrap.Modal.getOrCreateInstance(expandImageModal).show(); }; function bs_trigger(e) { @@ -402,12 +405,6 @@ function focusSearchBar(element) { if (screen_width >= 768) { element.focus(); - setTimeout(() => { - element.focus(); - }, 200); - setTimeout(() => { - element.focus(); - }, 1000); } } @@ -637,6 +634,35 @@ 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')) { @@ -693,23 +719,3 @@ function enablePushNotifications() { console.error(e) }) } - -addEventListener('wheel', function (e) { - if (location.hash.startsWith("#m-")) { - e.preventDefault(); - e.stopPropagation(); - return false; - } -}, {passive: false}); - -addEventListener('touchmove', function (e) { - if (location.hash.startsWith("#m-")) { - e.preventDefault(); - e.stopPropagation(); - return false; - } -}, {passive: false}); - -if (location.hash.startsWith("#m-")) { - history.replaceState({}, '', location.href.split('#')[0]) -} diff --git a/files/assets/js/emoji_modal.js b/files/assets/js/emoji_modal.js index 4fd14af9e..bb261a8a0 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("button"); - classSelectorLinkDOM.type = "button"; + let classSelectorLinkDOM = document.createElement("a"); + classSelectorLinkDOM.href = "#"; 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 = ""; - emojiSearchBarDOM.focus(); + focusSearchBar(emojiSearchBarDOM); emojiNotFoundDOM.hidden = true; // Special case: favorites @@ -559,8 +559,12 @@ function loadEmojis(inputTargetIDName) } } -addEventListener('hashchange', function () { - if (location.hash == "#m-emoji") { +document.getElementById('emojiModal').addEventListener('shown.bs.modal', function () { + focusSearchBar(emojiSearchBarDOM); + setTimeout(() => { focusSearchBar(emojiSearchBarDOM); - } + }, 200); + setTimeout(() => { + focusSearchBar(emojiSearchBarDOM); + }, 1000); }); diff --git a/files/assets/js/gif_modal.js b/files/assets/js/gif_modal.js index 823be848a..f3c047589 100644 --- a/files/assets/js/gif_modal.js +++ b/files/assets/js/gif_modal.js @@ -15,6 +15,16 @@ 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; @@ -116,7 +126,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); } @@ -131,9 +141,3 @@ 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 2d93f368d..8068a85f5 100644 --- a/files/assets/js/report_post_modal.js +++ b/files/assets/js/report_post_modal.js @@ -8,6 +8,7 @@ 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 565791fdf..6a0778e87 100644 --- a/files/assets/js/settings_security.js +++ b/files/assets/js/settings_security.js @@ -3,11 +3,10 @@ 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', () => { - location.hash = 'm-2fa' -}) +document.getElementById('2faToggle').addEventListener('change', () => {twoStepModal.show()}) diff --git a/files/templates/comments.html b/files/templates/comments.html index 4ec6fd17a..6069c229f 100644 --- a/files/templates/comments.html +++ b/files/templates/comments.html @@ -282,9 +282,9 @@ @@ -743,12 +740,12 @@ {% include "modals/punish.html" %} {% endif %} - - diff --git a/files/templates/errors/WPD/502.html b/files/templates/errors/WPD/502.html index 7e850a72d..48e64c37c 100644 --- a/files/templates/errors/WPD/502.html +++ b/files/templates/errors/WPD/502.html @@ -71,11 +71,11 @@ - diff --git a/files/templates/errors/rDrama/404.html b/files/templates/errors/rDrama/404.html index bfa528b0c..962559ce5 100644 --- a/files/templates/errors/rDrama/404.html +++ b/files/templates/errors/rDrama/404.html @@ -71,11 +71,11 @@ - diff --git a/files/templates/errors/rDrama/502.html b/files/templates/errors/rDrama/502.html index 2b4515c7d..d96baf0d0 100644 --- a/files/templates/errors/rDrama/502.html +++ b/files/templates/errors/rDrama/502.html @@ -71,11 +71,11 @@ - diff --git a/files/templates/header.html b/files/templates/header.html index 604a01fc9..f46a7a285 100644 --- a/files/templates/header.html +++ b/files/templates/header.html @@ -154,16 +154,16 @@ {% if not (v and v.patron) and not (v and v.admin_level) %} {% if v %} - {% else %} - + {% endif %} {% endif %} {% if g.browser == 'webview' %} - + {% endif %} @@ -211,11 +211,10 @@ {% endif %} - + + + +