Set and preserve focus when showing post overlay

This commit is contained in:
Cadence Ember 2021-08-08 16:29:18 +12:00
parent c5bd24f9d4
commit f14837be44
No known key found for this signature in database
GPG Key ID: BC1C2C61CF521B17
1 changed files with 9 additions and 0 deletions

View File

@ -5,6 +5,7 @@ import {quota} from "./quota.js"
/** @type {PostOverlay[]} */ /** @type {PostOverlay[]} */
const postOverlays = [] const postOverlays = []
const titleHistory = [] const titleHistory = []
const focusHistory = []
titleHistory.push(document.title) titleHistory.push(document.title)
const shortcodeDataMap = new Map() const shortcodeDataMap = new Map()
@ -28,6 +29,10 @@ window.addEventListener("popstate", event => {
titleHistory.pop() titleHistory.pop()
document.title = titleHistory.slice(-1)[0] document.title = titleHistory.slice(-1)[0]
} }
if (focusHistory.length) {
const item = focusHistory.pop()
item.focus()
}
if (postOverlays.length) { if (postOverlays.length) {
popOverlay() popOverlay()
} else { } else {
@ -38,6 +43,7 @@ window.addEventListener("popstate", event => {
function pushOverlay(overlay) { function pushOverlay(overlay) {
postOverlays.push(overlay) postOverlays.push(overlay)
focusHistory.push(document.activeElement)
document.body.style.overflowY = "hidden" document.body.style.overflowY = "hidden"
} }
@ -82,6 +88,9 @@ class PostOverlay extends ElemJS {
this.html(html) this.html(html)
this.loaded = true this.loaded = true
this.removeClass("loading") this.removeClass("loading")
setTimeout(() => {
this.element.focus()
})
} }
showError() { showError() {