fix: collapse sidebar on small-screen load
This commit is contained in:
@@ -6,6 +6,7 @@ const DWELLING_PARCEL_LAYER_NAME = "xpro:parcelas_habitacao";
|
|||||||
const FEATURE_INFO_LAYER_NAMES = new Set(["parcelas", "predios"]);
|
const FEATURE_INFO_LAYER_NAMES = new Set(["parcelas", "predios"]);
|
||||||
const DEVICE_ORIENTATION_EVENTS = ["deviceorientationabsolute", "deviceorientation"];
|
const DEVICE_ORIENTATION_EVENTS = ["deviceorientationabsolute", "deviceorientation"];
|
||||||
const COMPASS_HEADING_DEADBAND = 2;
|
const COMPASS_HEADING_DEADBAND = 2;
|
||||||
|
const SMALL_SCREEN_MEDIA_QUERY = "(max-width: 920px)";
|
||||||
|
|
||||||
const els = {
|
const els = {
|
||||||
appShell: document.querySelector(".app-shell"),
|
appShell: document.querySelector(".app-shell"),
|
||||||
@@ -140,6 +141,12 @@ map.addInteraction(areaZoomInteraction);
|
|||||||
let availableLayers = [];
|
let availableLayers = [];
|
||||||
let selectedLayers = [];
|
let selectedLayers = [];
|
||||||
|
|
||||||
|
// Keep the existing responsive breakpoint as the source of truth for the
|
||||||
|
// initial panel state. The menu remains available through the open control.
|
||||||
|
if (window.matchMedia(SMALL_SCREEN_MEDIA_QUERY).matches) {
|
||||||
|
setSidebarCollapsed(true, { focus: false });
|
||||||
|
}
|
||||||
|
|
||||||
els.parcelSearchForm.addEventListener("submit", searchParcela);
|
els.parcelSearchForm.addEventListener("submit", searchParcela);
|
||||||
els.backgroundSelect.addEventListener("change", syncBackground);
|
els.backgroundSelect.addEventListener("change", syncBackground);
|
||||||
els.sidebarOpen.addEventListener("click", () => setSidebarCollapsed(false));
|
els.sidebarOpen.addEventListener("click", () => setSidebarCollapsed(false));
|
||||||
@@ -176,12 +183,12 @@ areaZoomInteraction.on("boxcancel", () => {
|
|||||||
|
|
||||||
loadLayers();
|
loadLayers();
|
||||||
|
|
||||||
function setSidebarCollapsed(collapsed) {
|
function setSidebarCollapsed(collapsed, { focus = true } = {}) {
|
||||||
els.appShell.classList.toggle("sidebar-is-collapsed", collapsed);
|
els.appShell.classList.toggle("sidebar-is-collapsed", collapsed);
|
||||||
els.sidebar.inert = collapsed;
|
els.sidebar.inert = collapsed;
|
||||||
els.sidebarOpen.setAttribute("aria-expanded", String(!collapsed));
|
els.sidebarOpen.setAttribute("aria-expanded", String(!collapsed));
|
||||||
|
|
||||||
if (collapsed) {
|
if (collapsed && focus) {
|
||||||
els.sidebarOpen.focus();
|
els.sidebarOpen.focus();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user