From a1ca906069b1fc5f9569d82119d3fc6e6f4cbd6b Mon Sep 17 00:00:00 2001 From: Harel M Date: Sun, 28 Jan 2024 16:10:01 +0200 Subject: [PATCH] Move all string to locale class (#3621) * Move all string to the same place * Update changelog * Fix lint * add partial according to code review * Update CHANGELOG.md Co-authored-by: Bart Louwers * Update CHANGELOG.md * Update CHANGELOG.md --------- Co-authored-by: Bart Louwers --- CHANGELOG.md | 2 ++ src/ui/control/attribution_control.ts | 2 +- src/ui/control/navigation_control.ts | 2 +- src/ui/control/terrain_control.ts | 4 ++-- src/ui/default_locale.ts | 7 ++++-- src/ui/handler/cooperative_gestures.ts | 31 ++++++------------------- src/ui/map.ts | 6 ++--- test/examples/cooperative-gestures.html | 9 +++---- 8 files changed, 26 insertions(+), 37 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8f950fa746..4e77ec3618 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ### ✨ Features and improvements +- ⚠️ Changed cooperative gesture config and removed the strings from it in favor of the locale variable ([#3621](https://github.com/maplibre/maplibre-gl-js/issues/3621)) +- ⚠️ Changed the terrain enable disable locale key to match the other keys' styles, updated the typings to allow using locale with more ease ([#3621](https://github.com/maplibre/maplibre-gl-js/issues/3621)) - Add "opacity" option and "setOpacity" method to Marker ([#3620](https://github.com/maplibre/maplibre-gl-js/pull/3620)) - _...Add new stuff here..._ diff --git a/src/ui/control/attribution_control.ts b/src/ui/control/attribution_control.ts index 815c8e6d02..c08456dfeb 100644 --- a/src/ui/control/attribution_control.ts +++ b/src/ui/control/attribution_control.ts @@ -91,7 +91,7 @@ export class AttributionControl implements IControl { this._attribHTML = undefined; } - _setElementTitle(element: HTMLElement, title: string) { + _setElementTitle(element: HTMLElement, title: 'ToggleAttribution' | 'MapFeedback') { const str = this._map._getUIString(`AttributionControl.${title}`); element.title = str; element.setAttribute('aria-label', str); diff --git a/src/ui/control/navigation_control.ts b/src/ui/control/navigation_control.ts index bceed89c2d..2546948886 100644 --- a/src/ui/control/navigation_control.ts +++ b/src/ui/control/navigation_control.ts @@ -146,7 +146,7 @@ export class NavigationControl implements IControl { return a; } - _setButtonTitle = (button: HTMLButtonElement, title: string) => { + _setButtonTitle = (button: HTMLButtonElement, title: 'ZoomIn' | 'ZoomOut' | 'ResetBearing') => { const str = this._map._getUIString(`NavigationControl.${title}`); button.title = str; button.setAttribute('aria-label', str); diff --git a/src/ui/control/terrain_control.ts b/src/ui/control/terrain_control.ts index aac4f454be..9f453c079b 100644 --- a/src/ui/control/terrain_control.ts +++ b/src/ui/control/terrain_control.ts @@ -62,10 +62,10 @@ export class TerrainControl implements IControl { this._terrainButton.classList.remove('maplibregl-ctrl-terrain-enabled'); if (this._map.terrain) { this._terrainButton.classList.add('maplibregl-ctrl-terrain-enabled'); - this._terrainButton.title = this._map._getUIString('TerrainControl.disableTerrain'); + this._terrainButton.title = this._map._getUIString('TerrainControl.Disable'); } else { this._terrainButton.classList.add('maplibregl-ctrl-terrain'); - this._terrainButton.title = this._map._getUIString('TerrainControl.enableTerrain'); + this._terrainButton.title = this._map._getUIString('TerrainControl.Enable'); } }; } diff --git a/src/ui/default_locale.ts b/src/ui/default_locale.ts index 59e703650e..62d0834360 100644 --- a/src/ui/default_locale.ts +++ b/src/ui/default_locale.ts @@ -14,6 +14,9 @@ export const defaultLocale = { 'ScaleControl.Kilometers': 'km', 'ScaleControl.Miles': 'mi', 'ScaleControl.NauticalMiles': 'nm', - 'TerrainControl.enableTerrain': 'Enable terrain', - 'TerrainControl.disableTerrain': 'Disable terrain' + 'TerrainControl.Enable': 'Enable terrain', + 'TerrainControl.Disable': 'Disable terrain', + 'CooperativeGesturesHandler.WindowsHelpText': 'Use Ctrl + scroll to zoom the map', + 'CooperativeGesturesHandler.MacHelpText': 'Use ⌘ + scroll to zoom the map', + 'CooperativeGesturesHandler.MobileHelpText': 'Use two fingers to move the map', }; diff --git a/src/ui/handler/cooperative_gestures.ts b/src/ui/handler/cooperative_gestures.ts index c574ad91ce..9bb0494b8e 100644 --- a/src/ui/handler/cooperative_gestures.ts +++ b/src/ui/handler/cooperative_gestures.ts @@ -5,21 +5,8 @@ import type {Map} from '../map'; /** * The {@link CooperativeGesturesHandler} options object for the gesture settings - * - * @example - * ```ts - * let options = { - * windowsHelpText: "Use Ctrl + scroll to zoom the map", - * macHelpText: "Use ⌘ + scroll to zoom the map", - * mobileHelpText: "Use two fingers to move the map", - * } - * ``` */ -export type GestureOptions = { - windowsHelpText?: string; - macHelpText?: string; - mobileHelpText?: string; -}; +export type GestureOptions = boolean; /** * A `CooperativeGestureHandler` is a control that adds cooperative gesture info when user tries to zoom in/out. @@ -29,17 +16,13 @@ export type GestureOptions = { * @example * ```ts * const map = new Map({ - * cooperativeGestures: { - * windowsHelpText: "Use Ctrl + scroll to zoom the map", - * macHelpText: "Use ⌘ + scroll to zoom the map", - * mobileHelpText: "Use two fingers to move the map", - * } + * cooperativeGestures: true * }); * ``` * @see [Example: cooperative gestures](https://maplibre.org/maplibre-gl-js-docs/example/cooperative-gestures/) **/ export class CooperativeGesturesHandler implements Handler { - _options: boolean | GestureOptions; + _options: GestureOptions; _map: Map; _container: HTMLElement; /** @@ -48,7 +31,7 @@ export class CooperativeGesturesHandler implements Handler { _bypassKey: 'metaKey' | 'ctrlKey' = navigator.userAgent.indexOf('Mac') !== -1 ? 'metaKey' : 'ctrlKey'; _enabled: boolean; - constructor(map: Map, options: boolean | GestureOptions = {}) { + constructor(map: Map, options: GestureOptions) { this._map = map; this._options = options; this._enabled = false; @@ -64,11 +47,11 @@ export class CooperativeGesturesHandler implements Handler { // Add a cooperative gestures class (enable touch-action: pan-x pan-y;) mapCanvasContainer.classList.add('maplibregl-cooperative-gestures'); this._container = DOM.create('div', 'maplibregl-cooperative-gesture-screen', mapCanvasContainer); - let desktopMessage = typeof this._options !== 'boolean' && this._options.windowsHelpText ? this._options.windowsHelpText : 'Use Ctrl + scroll to zoom the map'; + let desktopMessage = this._map._getUIString('CooperativeGesturesHandler.WindowsHelpText'); if (this._bypassKey === 'metaKey') { - desktopMessage = typeof this._options !== 'boolean' && this._options.macHelpText ? this._options.macHelpText : 'Use ⌘ + scroll to zoom the map'; + desktopMessage = this._map._getUIString('CooperativeGesturesHandler.MacHelpText'); } - const mobileMessage = typeof this._options !== 'boolean' && this._options.mobileHelpText ? this._options.mobileHelpText : 'Use two fingers to move the map, three to pitch'; + const mobileMessage = this._map._getUIString('CooperativeGesturesHandler.MobileHelpText'); // Create and append the desktop message div const desktopDiv = document.createElement('div'); desktopDiv.className = 'maplibregl-desktop-message'; diff --git a/src/ui/map.ts b/src/ui/map.ts index d8fd19962a..6af3369287 100644 --- a/src/ui/map.ts +++ b/src/ui/map.ts @@ -197,7 +197,7 @@ export type MapOptions = { * If `true` or set to an options object, the map is only accessible on desktop while holding Command/Ctrl and only accessible on mobile with two fingers. Interacting with the map using normal gestures will trigger an informational screen. With this option enabled, "drag to pitch" requires a three-finger gesture. Cooperative gestures are disabled when a map enters fullscreen using {@link FullscreenControl}. * @defaultValue undefined */ - cooperativeGestures?: boolean | GestureOptions; + cooperativeGestures?: GestureOptions; /** * If `true`, the map will automatically resize when the browser window resizes. * @defaultValue true @@ -468,7 +468,7 @@ export class Map extends Camera { _localIdeographFontFamily: string; _validateStyle: boolean; _requestManager: RequestManager; - _locale: any; + _locale: Partial; _removed: boolean; _clickTolerance: number; _overridePixelRatio: number | null; @@ -1721,7 +1721,7 @@ export class Map extends Camera { return this; } - _getUIString(key: string) { + _getUIString(key: keyof typeof defaultLocale) { const str = this._locale[key]; if (str == null) { throw new Error(`Missing UI string '${key}'`); diff --git a/test/examples/cooperative-gestures.html b/test/examples/cooperative-gestures.html index be5d44e457..d62509a952 100644 --- a/test/examples/cooperative-gestures.html +++ b/test/examples/cooperative-gestures.html @@ -20,10 +20,11 @@ container: 'map', style: 'https://demotiles.maplibre.org/style.json', center: [-74.5, 40], - cooperativeGestures: { - windowsHelpText: 'Utilice Ctrl + desplazamiento para hacer zoom en el mapa.', - macHelpText: 'Use ⌘ + desplazamiento para hacer zoom en el mapa.', - mobileHelpText: 'Usa dos dedos para mover el mapa.', + cooperativeGestures: true, + locale: { + 'CooperativeGesturesHandler.WindowsHelpText': 'Utilice Ctrl + desplazamiento para hacer zoom en el mapa.', + 'CooperativeGesturesHandler.MacHelpText': 'Usa ⌘ + desplazamiento para hacer zoom en el mapa.', + 'CooperativeGesturesHandler.MobileHelpText': 'Usa dos dedos para mover el mapa.', }, zoom: 4 });