ticket #64 attempt 1

Browse Source
This commit is contained in:
Typosaurus 2026-07-19 20:03:49 +00:00
parent 43c5a948e8
commit df5aa7580a
4 changed files with 34 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
devplacepy/static/js/ModalManager.js
View File

@ -29,6 +29,7 @@ export class ModalManager {
const modal = document.getElementById(modalId); const modal = document.getElementById(modalId);
if (modal) { if (modal) {
modal.classList.add("visible"); modal.classList.add("visible");
window.history.pushState({__overlay: true}, "");
} }
}); });
}); });
@ -37,11 +38,13 @@ export class ModalManager {
modal.addEventListener("click", (e) => { modal.addEventListener("click", (e) => {
if (e.target === modal) { if (e.target === modal) {
modal.classList.remove("visible"); modal.classList.remove("visible");
window.history.back();
} }
}); });
modal.querySelectorAll(".modal-close").forEach((closeBtn) => { modal.querySelectorAll(".modal-close").forEach((closeBtn) => {
closeBtn.addEventListener("click", () => { closeBtn.addEventListener("click", () => {
modal.classList.remove("visible"); modal.classList.remove("visible");
window.history.back();
}); });
}); });
this.enhanceModal(modal); this.enhanceModal(modal);
@ -50,6 +53,14 @@ export class ModalManager {
document.addEventListener("keydown", (e) => { document.addEventListener("keydown", (e) => {
if (e.key !== "Escape") return; if (e.key !== "Escape") return;
const open = [...document.querySelectorAll(".modal-overlay.visible")].pop(); const open = [...document.querySelectorAll(".modal-overlay.visible")].pop();
if (open) {
open.classList.remove("visible");
window.history.back();
}
});
window.addEventListener("popstate", () => {
const open = document.querySelector(".modal-overlay.visible");
if (open) open.classList.remove("visible"); if (open) open.classList.remove("visible");
}); });
} }

7
devplacepy/static/js/components/AppContextMenu.js
View File

@ -51,6 +51,11 @@ export class AppContextMenu extends Component {
document.addEventListener("keydown", (e) => { document.addEventListener("keydown", (e) => {
if (e.key === "Escape") this.close(); if (e.key === "Escape") this.close();
}); });
window.addEventListener("popstate", () => {
if (this.menu.classList.contains("visible")) {
this.menu.classList.remove("visible");
}
});
} }
render(items) { render(items) {
@ -93,6 +98,7 @@ export class AppContextMenu extends Component {
if (!items || !items.length) return; if (!items || !items.length) return;
this.render(items); this.render(items);
this.menu.classList.add("visible"); this.menu.classList.add("visible");
window.history.pushState({__overlay: true}, "");
const rect = this.menu.getBoundingClientRect(); const rect = this.menu.getBoundingClientRect();
const vv = window.visualViewport; const vv = window.visualViewport;
const safeW = vv ? vv.width : window.innerWidth; const safeW = vv ? vv.width : window.innerWidth;
@ -111,6 +117,7 @@ export class AppContextMenu extends Component {
close() { close() {
this.menu.classList.remove("visible"); this.menu.classList.remove("visible");
window.history.back();
} }
suppressNextClick() { suppressNextClick() {

7
devplacepy/static/js/components/AppDialog.js
View File

@ -64,6 +64,11 @@ export class AppDialog extends Component {
this.dismiss(); this.dismiss();
} }
}); });
window.addEventListener("popstate", () => {
if (this.overlay.classList.contains("visible")) {
this.overlay.classList.remove("visible");
}
});
overlay.addEventListener("keydown", (e) => { overlay.addEventListener("keydown", (e) => {
if (e.key !== "Tab") return; if (e.key !== "Tab") return;
const items = [ const items = [
@ -107,6 +112,7 @@ export class AppDialog extends Component {
this.lastFocus = document.activeElement; this.lastFocus = document.activeElement;
this.overlay.classList.add("visible"); this.overlay.classList.add("visible");
window.history.pushState({__overlay: true}, "");
const focusTarget = mode === "prompt" ? this.input : this.confirmBtn; const focusTarget = mode === "prompt" ? this.input : this.confirmBtn;
setTimeout(() => { setTimeout(() => {
focusTarget.focus(); focusTarget.focus();
@ -127,6 +133,7 @@ export class AppDialog extends Component {
close(value) { close(value) {
this.overlay.classList.remove("visible"); this.overlay.classList.remove("visible");
window.history.back();
if (this.lastFocus && this.lastFocus.focus) this.lastFocus.focus(); if (this.lastFocus && this.lastFocus.focus) this.lastFocus.focus();
const resolve = this.resolver; const resolve = this.resolver;
this.resolver = null; this.resolver = null;

9
devplacepy/static/js/components/AppLightbox.js
View File

@ -54,6 +54,7 @@ export class AppLightbox extends Component {
this.close(); this.close();
} }
}); });
window.addEventListener("popstate", () => this._onPopstate());
this.overlay.addEventListener("keydown", (e) => { this.overlay.addEventListener("keydown", (e) => {
if (e.key === "Tab" && this.overlay.classList.contains("visible")) { if (e.key === "Tab" && this.overlay.classList.contains("visible")) {
e.preventDefault(); e.preventDefault();
@ -77,15 +78,23 @@ export class AppLightbox extends Component {
this.bodyOverflow = document.body.style.overflow; this.bodyOverflow = document.body.style.overflow;
document.body.style.overflow = "hidden"; document.body.style.overflow = "hidden";
this.overlay.classList.add("visible"); this.overlay.classList.add("visible");
window.history.pushState({__overlay: true}, "");
setTimeout(() => this.closeBtn.focus(), 20); setTimeout(() => this.closeBtn.focus(), 20);
} }
close() { close() {
this.overlay.classList.remove("visible"); this.overlay.classList.remove("visible");
window.history.back();
this.image.src = ""; this.image.src = "";
document.body.style.overflow = this.bodyOverflow; document.body.style.overflow = this.bodyOverflow;
if (this.lastFocus && this.lastFocus.focus) this.lastFocus.focus(); if (this.lastFocus && this.lastFocus.focus) this.lastFocus.focus();
} }
_onPopstate() {
if (this.overlay.classList.contains("visible")) {
this.overlay.classList.remove("visible");
}
}
} }
customElements.define("dp-lightbox", AppLightbox); customElements.define("dp-lightbox", AppLightbox);