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 <[email protected]> * Update CHANGELOG.md * Update CHANGELOG.md --------- Co-authored-by: Bart Louwers <[email protected]>
maplibre · Jan 28, 2024 · a1ca906 · a1ca906
1 parent 3c6484d
commit a1ca906
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 37 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<typeof defaultLocale>;
     _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
@@ -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
     });