From 9655f8a092633302939e95ca2c349b4df6e8c876 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Thu, 11 Jan 2024 04:00:56 +0100 Subject: [PATCH] A11y: reset zoom (chromium-browsers only) when getting back to the map or when opening a picture --- public/css/index-tailwind-output.css | 5 ++ public/css/tagrendering.css | 4 +- src/Logic/Web/ThemeViewStateHashActor.ts | 9 +++ src/Models/MenuState.ts | 54 +++++++++++++----- src/Models/ThemeViewState.ts | 12 +++- src/UI/Image/ImagePreview.svelte | 6 +- src/UI/Map/RasterLayerPicker.svelte | 2 +- src/UI/ThemeViewGUI.svelte | 2 +- src/UI/Zoomcontrol.ts | 70 ++++++++++++++++++++++++ theme.html | 2 +- 10 files changed, 145 insertions(+), 21 deletions(-) create mode 100644 src/UI/Zoomcontrol.ts diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css index 96988f98f..1069683f1 100644 --- a/public/css/index-tailwind-output.css +++ b/public/css/index-tailwind-output.css @@ -891,6 +891,11 @@ video { margin-right: 3rem; } +.mx-4 { + margin-left: 1rem; + margin-right: 1rem; +} + .mb-4 { margin-bottom: 1rem; } diff --git a/public/css/tagrendering.css b/public/css/tagrendering.css index 4c63a909b..ce1d6c3b8 100644 --- a/public/css/tagrendering.css +++ b/public/css/tagrendering.css @@ -66,7 +66,7 @@ width: 3rem; max-height: 3rem; margin-right: 1rem; - margin-left: 1rem; + margin-left: 0.5rem; } .mapping-icon-large { @@ -76,7 +76,7 @@ margin-top: 0.5rem; margin-bottom: 0.5rem; margin-right: 1.5rem; - margin-left: 1.5rem; + margin-left: 0.5rem; } diff --git a/src/Logic/Web/ThemeViewStateHashActor.ts b/src/Logic/Web/ThemeViewStateHashActor.ts index 8527d8d79..df38edce1 100644 --- a/src/Logic/Web/ThemeViewStateHashActor.ts +++ b/src/Logic/Web/ThemeViewStateHashActor.ts @@ -50,6 +50,11 @@ export default class ThemeViewStateHashActor { if (!!hash) { // There is still a hash // We _only_ have to (at most) close the overlays in this case + if (state.previewedImage.data) { + state.previewedImage.setData(undefined) + return + } + const parts = hash.split(";") if (parts.indexOf("background") < 0) { state.guistate.backgroundLayerSelectionIsOpened.setData(false) @@ -176,6 +181,10 @@ export default class ThemeViewStateHashActor { private back() { const state = this._state + if (state.previewedImage.data) { + state.previewedImage.setData(undefined) + return + } // history.pushState(null, null, window.location.pathname); if (state.selectedElement.data) { state.selectedElement.setData(undefined) diff --git a/src/Models/MenuState.ts b/src/Models/MenuState.ts index 55a9084e7..b3ef6ac2e 100644 --- a/src/Models/MenuState.ts +++ b/src/Models/MenuState.ts @@ -3,6 +3,7 @@ import { UIEventSource } from "../Logic/UIEventSource" import UserRelatedState from "../Logic/State/UserRelatedState" import { Utils } from "../Utils" import { LocalStorageSource } from "../Logic/Web/LocalStorageSource" +import Zoomcontrol from "../UI/Zoomcontrol" export type ThemeViewTabStates = (typeof MenuState._themeviewTabs)[number] export type MenuViewTabStates = (typeof MenuState._menuviewTabs)[number] @@ -114,7 +115,36 @@ export class MenuState { name: "background", showOverOthers: true, }, + { + toggle: this.communityIndexPanelIsOpened, + name: "community", + showOverOthers: true, + }, + { + toggle: this.privacyPanelIsOpened, + name: "privacy", + showOverOthers: true, + }, + { + toggle: this.filtersPanelIsOpened, + name: "filters", + showOverOthers: true, + }, ] + for (const toggle of this.allToggles) { + toggle.toggle.addCallback((isOpen) => { + if (!isOpen) { + this.resetZoomIfAllClosed() + } + }) + } + } + + private resetZoomIfAllClosed() { + if (this.isSomethingOpen()) { + return + } + Zoomcontrol.resetzoom() } public openFilterView(highlightLayer?: LayerConfig | string) { @@ -146,27 +176,23 @@ export class MenuState { this.highlightedUserSetting.setData(highlightTagRendering) } + public isSomethingOpen(): boolean { + return this.allToggles.some((t) => t.toggle.data) + } + /** * Close all floatOvers. * Returns 'true' if at least one menu was opened */ public closeAll(): boolean { - const toggles = [ - this.communityIndexPanelIsOpened, - this.privacyPanelIsOpened, - this.backgroundLayerSelectionIsOpened, - this.filtersPanelIsOpened, - this.menuIsOpened, - this.themeIsOpened, - ] - let somethingIsOpen = false - for (const t of toggles) { - somethingIsOpen = t.data - t.setData(false) - if (somethingIsOpen) { + let somethingWasOpen = false + for (const t of this.allToggles) { + somethingWasOpen = t.toggle.data + t.toggle.setData(false) + if (somethingWasOpen) { break } } - return somethingIsOpen + return somethingWasOpen } } diff --git a/src/Models/ThemeViewState.ts b/src/Models/ThemeViewState.ts index 41515bb2f..011cf335a 100644 --- a/src/Models/ThemeViewState.ts +++ b/src/Models/ThemeViewState.ts @@ -61,6 +61,7 @@ import NearbyFeatureSource from "../Logic/FeatureSource/Sources/NearbyFeatureSou import FavouritesFeatureSource from "../Logic/FeatureSource/Sources/FavouritesFeatureSource" import { ProvidedImage } from "../Logic/ImageProviders/ImageProvider" import { GeolocationControlState } from "../UI/BigComponents/GeolocationControl" +import Zoomcontrol from "../UI/Zoomcontrol" /** * @@ -481,6 +482,12 @@ export default class ThemeViewState implements SpecialVisualizationState { this.lastClickObject.features.setData([]) }) + this.selectedElement.addCallback((selected) => { + if (selected === undefined) { + Zoomcontrol.resetzoom() + } + }) + if (this.layout.customCss !== undefined && window.location.pathname.indexOf("theme") >= 0) { Utils.LoadCustomCss(this.layout.customCss) } @@ -524,7 +531,10 @@ export default class ThemeViewState implements SpecialVisualizationState { } this.selectedElement.setData(undefined) this.guistate.closeAll() - this.focusOnMap() + if (!this.guistate.isSomethingOpen()) { + Zoomcontrol.resetzoom() + this.focusOnMap() + } }) Hotkeys.RegisterHotkey({ nomod: "f" }, docs.selectFavourites, () => { diff --git a/src/UI/Image/ImagePreview.svelte b/src/UI/Image/ImagePreview.svelte index 63e1c3054..2876b70b7 100644 --- a/src/UI/Image/ImagePreview.svelte +++ b/src/UI/Image/ImagePreview.svelte @@ -5,12 +5,16 @@ import panzoom from "panzoom" import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider" import { UIEventSource } from "../../Logic/UIEventSource" + import Zoomcontrol from "../Zoomcontrol" + import { onDestroy, onMount } from "svelte" export let image: ProvidedImage let panzoomInstance = undefined let panzoomEl: HTMLElement export let isLoaded: UIEventSource = undefined - + + onDestroy(Zoomcontrol.createLock()) + $: { if (panzoomEl) { panzoomInstance = panzoom(panzoomEl, { diff --git a/src/UI/Map/RasterLayerPicker.svelte b/src/UI/Map/RasterLayerPicker.svelte index a26568e90..272a8d871 100644 --- a/src/UI/Map/RasterLayerPicker.svelte +++ b/src/UI/Map/RasterLayerPicker.svelte @@ -76,7 +76,7 @@ {#if hasLayers} -
+ {}}>