fix(ui): close mobile overlays predictably
This commit is contained in:
@@ -4654,6 +4654,7 @@ function _initMapWhenReady() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function navigateToTab(name, options = {}) {
|
function navigateToTab(name, options = {}) {
|
||||||
|
window.trxUi?.closeMobileOverlays?.();
|
||||||
const { updateHistory = true, replaceHistory = false } = options;
|
const { updateHistory = true, replaceHistory = false } = options;
|
||||||
if (authEnabled && !authRole && name !== "main") {
|
if (authEnabled && !authRole && name !== "main") {
|
||||||
showAuthGate(false);
|
showAuthGate(false);
|
||||||
|
|||||||
@@ -254,6 +254,14 @@
|
|||||||
menu.id = "mobile-more-menu";
|
menu.id = "mobile-more-menu";
|
||||||
menu.className = "mobile-more-menu";
|
menu.className = "mobile-more-menu";
|
||||||
menu.setAttribute("role", "menu");
|
menu.setAttribute("role", "menu");
|
||||||
|
more.setAttribute("aria-controls", menu.id);
|
||||||
|
const closeMore = (restoreFocus = false) => {
|
||||||
|
if (!menu.classList.contains("is-open")) return;
|
||||||
|
menu.classList.remove("is-open");
|
||||||
|
more.setAttribute("aria-expanded", "false");
|
||||||
|
if (restoreFocus) more.focus();
|
||||||
|
};
|
||||||
|
api.closeMobileOverlays = closeMore;
|
||||||
["statistics", "recorder", "settings", "about"].forEach((tabName) => {
|
["statistics", "recorder", "settings", "about"].forEach((tabName) => {
|
||||||
const source = nav.querySelector(`[data-tab="${tabName}"]`);
|
const source = nav.querySelector(`[data-tab="${tabName}"]`);
|
||||||
if (!source) return;
|
if (!source) return;
|
||||||
@@ -264,15 +272,23 @@
|
|||||||
item.textContent = source.textContent.trim();
|
item.textContent = source.textContent.trim();
|
||||||
item.addEventListener("click", () => {
|
item.addEventListener("click", () => {
|
||||||
if (typeof window.navigateToTab === "function") window.navigateToTab(tabName);
|
if (typeof window.navigateToTab === "function") window.navigateToTab(tabName);
|
||||||
menu.classList.remove("is-open");
|
closeMore();
|
||||||
more.setAttribute("aria-expanded", "false");
|
|
||||||
});
|
});
|
||||||
menu.appendChild(item);
|
menu.appendChild(item);
|
||||||
});
|
});
|
||||||
more.addEventListener("click", () => {
|
more.addEventListener("click", () => {
|
||||||
const open = menu.classList.toggle("is-open");
|
const open = menu.classList.toggle("is-open");
|
||||||
more.setAttribute("aria-expanded", String(open));
|
more.setAttribute("aria-expanded", String(open));
|
||||||
|
if (open) menu.querySelector('[role="menuitem"]')?.focus();
|
||||||
});
|
});
|
||||||
|
document.addEventListener("click", (event) => {
|
||||||
|
if (!menu.contains(event.target) && !more.contains(event.target)) closeMore();
|
||||||
|
});
|
||||||
|
document.addEventListener("keydown", (event) => {
|
||||||
|
if (event.key === "Escape") closeMore(true);
|
||||||
|
});
|
||||||
|
window.addEventListener("resize", () => closeMore());
|
||||||
|
window.addEventListener("popstate", () => closeMore());
|
||||||
nav.append(more, menu);
|
nav.append(more, menu);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user