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 @@