Add grunt plugin to generate locale, localeFr keys for DefaultMapOptions.js

Author: prushforth

Gruntfile.js

@@ -1,7 +1,8 @@
 module.exports = function(grunt) {
-  const Diff = require('diff');
-  const nodeResolve = require('@rollup/plugin-node-resolve');
-  grunt.initConfig({
+const Diff = require('diff');
+const nodeResolve = require('@rollup/plugin-node-resolve');
+const loadLocalePlugin = require('./load-locales.js');
+grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
     cssmin: {
       options: {
@@ -193,7 +194,7 @@ module.exports = function(grunt) {
     rollup: {
       options: {
         format: 'es',
-        plugins: [nodeResolve()],
+        plugins: [nodeResolve(),loadLocalePlugin()],
         external: './pmtilesRules.js'
       },
       main: {

load-locales.js

@@ -0,0 +1,45 @@
+// load-locales.js
+const fs = require('fs');
+const path = require('path');
+
+function loadLocalePlugin() {
+  return {
+    name: 'load-locale',
+    resolveId(source) {
+      if (source === 'generated-locale') return source;
+      return null;
+    },
+    load(id) {
+      if (id === 'generated-locale') {
+        // Load and process each language's messages.json file
+        const enMessagesPath = path.resolve(__dirname, 'node_modules/mapml-extension/src/_locales/en/messages.json');
+        const frMessagesPath = path.resolve(__dirname, 'node_modules/mapml-extension/src/_locales/fr/messages.json');
+
+        const enMessages = JSON.parse(fs.readFileSync(enMessagesPath, 'utf-8'));
+        const frMessages = JSON.parse(fs.readFileSync(frMessagesPath, 'utf-8'));
+
+        // Function to transform messages.json content to the desired structure
+        const transformMessages = (messages) => {
+          return Object.keys(messages).reduce((acc, key) => {
+            if (key !== 'extName' && key !== 'extDescription') {
+              acc[key] = messages[key].message;
+            }
+            return acc;
+          }, {});
+        };
+
+        // Generate locale objects
+        const locale = transformMessages(enMessages);
+        const localeFr = transformMessages(frMessages);
+
+        // Export the transformed objects
+        return `export const locale = ${JSON.stringify(locale)};
+                export const localeFr = ${JSON.stringify(localeFr)};`;
+      }
+      return null;
+      
+    }
+  };
+}
+
+module.exports = loadLocalePlugin;

package-lock.json

@@ -37,6 +37,7 @@
   "devDependencies": {
     "@playwright/test": "^1.39.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
+    "mapml-extension": "git+https://github.com/Maps4HTML/mapml-extension",
     "diff": "^5.1.0",
     "express": "^4.17.1",
     "grunt": "^1.4.0",

package.json

@@ -1,139 +1,11 @@
+import { locale, localeFr } from 'generated-locale';
+
 export var Options = {
   featureIndexOverlayOption: false,
   announceMovement: false,
   announceScale: { metric: true, imperial: false },
   defaultExtCoor: 'pcrs',
   defaultLocCoor: 'gcrs',
-  locale: {
-    cmBack: 'Back',
-    cmForward: 'Forward',
-    cmReload: 'Reload',
-    cmToggleControls: 'Toggle Controls',
-    cmCopyCoords: 'Copy',
-    cmCopyMapML: 'Map',
-    cmCopyExtent: 'Extent',
-    cmCopyLocation: 'Location',
-    cmToggleDebug: 'Toggle Debug Mode',
-    cmPasteLayer: 'Paste',
-    cmViewSource: 'View Map Source',
-    lmZoomToLayer: 'Zoom To Layer',
-    lmCopyLayer: 'Copy Layer',
-    lmLayerSettings: 'Layer Settings',
-    lmRemoveLayer: 'Remove Layer',
-    lmZoomToExtent: 'Zoom To Sub-layer',
-    lmCopyExtent: 'Copy Sub-layer',
-    lmExtentSettings: 'Sub-layer Settings',
-    lmRemoveExtent: 'Remove Sub-layer',
-    lmStyle: 'Style',
-    lcOpacity: 'Opacity',
-    btnAttribution: 'Map data attribution',
-    btnZoomIn: 'Zoom in',
-    btnZoomOut: 'Zoom out',
-    btnFullScreen: 'View Fullscreen',
-    btnExitFullScreen: 'Exit Fullscreen',
-    btnLocTrackOn: 'Show my location - location tracking on',
-    btnMyLocTrackOn: 'My current location, shown on map',
-    btnLocTrackOff: 'Show my location - location tracking off',
-    btnLocTrackLastKnown: 'Show my location - last known location shown',
-    btnMyLastKnownLocTrackOn: 'My last known location, shown on map',
-    amZoom: 'zoom level',
-    amColumn: 'column',
-    amRow: 'row',
-    amMaxZoom: 'At maximum zoom level, zoom in disabled',
-    amMinZoom: 'At minimum zoom level, zoom out disabled',
-    amZoomedOut: 'Zoomed out of bounds, returning to',
-    amDraggedOut: 'Dragged out of bounds, returning to',
-    amEastBound: 'Reached east bound, panning east disabled',
-    amWestBound: 'Reached west bound, panning west disabled',
-    amNorthBound: 'Reached north bound, panning north disabled',
-    amSouthBound: 'Reached south bound, panning south disabled',
-    kbdShortcuts: 'Keyboard shortcuts',
-    kbdMovement: 'Movement keys',
-    kbdFeature: 'Feature navigation keys',
-    kbdPanUp: 'Pan up',
-    kbdPanDown: 'Pan down',
-    kbdPanLeft: 'Pan left',
-    kbdPanRight: 'Pan right',
-    kbdPanIncrement: 'pan increment',
-    kbdZoom: 'Zoom in/out 3 levels',
-    kbdFocusMap: 'Focus map',
-    kbdFocusControls: 'Focus controls',
-    kbdPrevFeature: 'Previous feature',
-    kbdNextFeature: 'Next feature',
-    dfLayer: 'Layer',
-    dfExtent: 'Sub-layer',
-    dfPastedLayer: 'Pasted layer',
-    dfFeatureCaption: 'Feature',
-    popupZoom: 'Zoom to here',
-    popupPropName: 'Property name',
-    popupPropValue: 'Property value',
-    fIndexNoFeatures: 'No features found'
-  },
-  localeFr: {
-    cmBack: 'Retour',
-    cmForward: "Vers l'avant",
-    cmReload: 'Rechargez',
-    cmToggleControls: 'Basculer les contrôles',
-    cmCopyCoords: 'Copie',
-    cmToggleDebug: 'Basculer le mode de débogage',
-    cmCopyMapML: 'Carte',
-    cmCopyExtent: 'Étendue',
-    cmCopyLocation: 'Localisation',
-    cmPasteLayer: 'Coller',
-    cmViewSource: 'Voir la source de la carte',
-    lmZoomToLayer: 'Zoomer sur la couche',
-    lmCopyLayer: 'Copier (la couche)',
-    lmLayerSettings: 'Paramètres de la couche',
-    lmRemoveLayer: 'Supprimer la couche',
-    lmZoomToExtent: 'Zoomer sur la sous-couche',
-    lmCopyExtent: 'Copier (la sous-couche)',
-    lmExtentSettings: 'Paramètres de la sous-couche',
-    lmRemoveExtent: 'Supprimer la sous-couche',
-    lmStyle: 'Style',
-    lcOpacity: 'Opacité',
-    btnZoomIn: 'Zoomer',
-    btnZoomOut: 'Dézoomer',
-    btnAttribution: 'Attribution des données cartographiques',
-    btnFullScreen: 'Affichage plein écran',
-    btnExitFullScreen: 'Quitter le plein écran',
-    btnLocTrackOn: 'Afficher ma position - suivi de la position activé',
-    btnMyLocTrackOn: 'Ma position actuelle, affichée sur la carte',
-    btnLocTrackOff: 'Afficher ma position - suivi de la position désactivé',
-    btnMyLastKnownLocTrackOn:
-      'Ma dernière position connue, indiquée sur la carte',
-    btnLocTrackLastKnown:
-      'Afficher ma position - dernière position connue affichée',
-    amZoom: 'Niveau de zoom',
-    amColumn: 'Colonne',
-    amRow: 'Rangée',
-    amMaxZoom: 'Au niveau de zoom maximal, le zoom avant est désactivé',
-    amMinZoom: 'Niveau de zoom minimum, le zoom arrière désactivé',
-    amZoomedOut: 'Zoomé en dehors des limites, retour à',
-    amDraggedOut: 'Traîné hors des limites, retour à',
-    amEastBound: "Atteint la limite est, déplacement ver l'est désactivé",
-    amWestBound: "Atteint la limite ouest, déplacement ver l'ouest désactivé",
-    amNorthBound: 'Atteint la limite nord, déplacement vers le nord désactivé',
-    amSouthBound: 'Atteint la limite sud, déplacement vers le sud désactivé',
-    kbdShortcuts: 'Raccourcis clavier',
-    kbdMovement: 'Touches de mouvement',
-    kbdFeature: 'Touches de navigation dans les éléments géographiques',
-    kbdPanUp: 'Panoramique vers le haut',
-    kbdPanDown: 'Panoramique en bas',
-    kbdPanLeft: 'Panoramique vers la gauche',
-    kbdPanRight: 'Panoramique vers la droite',
-    kbdPanIncrement: 'Incrémenter le panoramique',
-    kbdZoom: 'Zoom avant/arrière 3 niveaux',
-    kbdFocusMap: 'Centrer la carte',
-    kbdFocusControls: 'Centrer les contrôles',
-    kbdPrevFeature: 'Élément géographique précédente',
-    kbdNextFeature: 'Élément géographique suivante',
-    dfLayer: 'Couche',
-    dfExtent: 'Sous-couche',
-    dfPastedLayer: 'Couche collée',
-    dfFeatureCaption: 'Élément géographique',
-    popupZoom: 'Zoomer ici',
-    popupPropName: 'Nom de la propriété',
-    popupPropValue: 'Valeur de la propriété',
-    fIndexNoFeatures: 'Aucun élément géographique trouvé'
-  }
+  locale,
+  localeFr
 };

src/mapml/DefaultMapOptions.js

@@ -109,7 +109,6 @@ test.describe('Multiple Extent Queries with heterogeneous response content types
     );
   });
   test('Enusre extents that are unchecked or removed are not included in query results', async () => {
-    await page.pause();
     // starting conditions
     let firstExtentInLayerControl = await page.$eval(
       'fieldset.mapml-layer-grouped-extents > fieldset:nth-child(1) span',

test/e2e/layers/multipleHeterogeneousQueryExtents.test.js

@@ -1,11 +1,11 @@
-<!doctype html>
+  <!doctype html>
 <html lang="en"><!-- default locale = en -->
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>localization.html</title>
-    <template data-testid="map-options"><map-options>{"locale":{"cmBack":"Повернутися назад","cmForward":"Перейти вперед","cmReload":"Перезавантажити","cmToggleControls":"Увімкнути/вимкнути елементи керування","cmCopyCoords":"Копіювати","cmToggleDebug":"Перемкнути на режим діагностики","cmCopyMapML":"Мапа","cmCopyExtent":"Межа екрану","cmCopyLocation":"Місцеположення","cmPasteLayer":"Вставити","cmViewSource":"Переглянути джерело мапи","lmZoomToLayer":"Збільшити до шару","lmCopyLayer":"Копіювати шар","lmLayerSettings":"Налаштування шару","lmRemoveLayer":"Видалити шар","lmZoomToExtent":"Збільшити до підшару","lmCopyExtent":"Копіювати підшар","lmExtentSettings":"Налаштування підшару","lmRemoveExtent":"Видалити підшар","lmStyle":"Стиль","lcOpacity":"Прозорість","btnAttribution":"Авторські права на дані карти","btnZoomIn":"Збільшити","btnZoomOut":"Зменшити","btnFullScreen":"Повноекранний режим","btnExitFullScreen":"Вихід з повноекранного режиму","btnLocTrackOn":"Показувати моє місцезнаходження - відстеження місцезнаходження увімкнено","btnMyLocTrackOn":"Моє поточне місцезнаходження на карті","btnLocTrackOff":"Показувати моє місцезнаходження - відстеження місцезнаходження вимкнено","btnLocTrackLastKnown":"Показати моє місцезнаходження - показано останнє відоме місцезнаходження","btnMyLastKnownLocTrackOn":"Моє останнє відоме місцезнаходження на карті","amZoom":"рівень масштабування","amColumn":"стовпчик","amRow":"рядок","amMaxZoom":"На максимальному рівні масштабування наближення вимкнено","amMinZoom":"На мінімальному рівні масштабування зменшення масштабу вимкнено","amZoomedOut":"Збільшення за межами, повернутись до","amDraggedOut":"Розширення за межами, повернутись до","amEastBound":"Досягнуто східного напрямку, панорамування на схід вимкнено","amWestBound":"Досягнуто західного напрямку, панорамування на захід вимкнено","amNorthBound":"Досягнуто північного напрямку, панорамування на північ вимкнено","amSouthBound":"Досягнуто південного напрямку, панорамування на південь вимкнено","kbdShortcuts":"Комбінації клавіш","kbdMovement":"Клавіші переміщення","kbdFeature":"Функціональні клавіші навігації","kbdPanUp":"Переміщення вгору","kbdPanDown":"Переміщення вниз","kbdPanLeft":"Переміщення ліворуч","kbdPanRight":"Переміщення праворуч","kbdPanIncrement":"крок переміщення зображення","kbdZoom":"Збільшення/зменшення на 3 рівні","kbdFocusMap":"Сфокусувати карту","kbdFocusControls":"Сфокусувати елементи керування","kbdPrevFeature":"Попередній об'єкт","kbdNextFeature":"Наступний об'єкт","dfLayer":"Шар","dfExtent":"Підшар","dfPastedLayer":"Вставлений шар","popupZoom":"Наблизити сюди","popupPropName":"Назва властивості","popupPropValue":"Значення властивості","fIndexNoFeatures":"Об'єктів не знайдено", "dfFeatureCaption": "Об'єкт"}}</map-options></template>
-    <script>
+    <template data-testid="map-options"><map-options>{"locale":{"cmBack":"Повернутися назад","cmForward":"Перейти вперед","cmReload":"Перезавантажити","cmToggleControls":"Увімкнути/вимкнути елементи керування","cmCopyCoords":"Копіювати","cmToggleDebug":"Перемкнути на режим діагностики","cmCopyMapML":"Мапа","cmCopyExtent":"Межа екрану","cmCopyLocation":"Місцеположення","cmPasteLayer":"Вставити","cmViewSource":"Переглянути джерело мапи","lmZoomToLayer":"Збільшити до шару","lmCopyLayer":"Копіювати шар","lmLayerSettings":"Налаштування шару","lmRemoveLayer":"Видалити шар","lmZoomToExtent":"Збільшити до підтипу шару","lmCopyExtent":"Копіювати підтип шару","lmExtentSettings":"Налаштування підшару","lmRemoveExtent":"Видалити підшар","lmStyle":"Стиль","lcOpacity":"Прозорість","btnZoomIn":"Збільшити","btnZoomOut":"Зменшити","btnAttribution":"Авторські права","btnFullScreen":"Повноекранний режим","btnExitFullScreen":"Вихід з повноекранного режиму","btnLocTrackOn":"Показувати моє місцезнаходження - відстеження місцезнаходження увімкнено","btnMyLocTrackOn":"Моє поточне місцезнаходження на карті","btnLocTrackOff":"Показувати моє місцезнаходження - відстеження місцезнаходження вимкнено","btnMyLastKnownLocTrackOn":"Моє останнє відоме місцезнаходження на карті","btnLocTrackLastKnown":"Показати моє місцезнаходження - показано останнє відоме місцезнаходження","btnFocusMap":"Карта Фокусування","btnFocusControls":"Елементи Керування Фокусуванням","btnPrevFeature":"Попередня Функція","btnNextFeature":"Наступна Функція","amZoom":"рівень масштабування","amColumn":"стовпчик","amRow":"рядок","amMaxZoom":"На максимальному рівні масштабування наближення вимкнено","amMinZoom":"На мінімальному рівні масштабування зменшення масштабу вимкнено","amZoomedOut":"Збільшення за межами, повернутись до","amDraggedOut":"Розширення за межами, повернутись до","amEastBound":"Досягнуто східного напрямку, панорамування на схід вимкнено","amWestBound":"Досягнуто західного напрямку, панорамування на захід вимкнено","amNorthBound":"Досягнуто північного напрямку, панорамування на північ вимкнено","amSouthBound":"Досягнуто південного напрямку, панорамування на південь вимкнено","kbdShortcuts":"Комбінації клавіш","kbdMovement":"Клавіші переміщення","kbdFeature":"Функціональні клавіші навігації","kbdPanUp":"Переміщення вгору","kbdPanDown":"Переміщення вниз","kbdPanLeft":"Переміщення ліворуч","kbdPanRight":"Переміщення праворуч","kbdPanIncrement":"крок переміщення зображення","kbdZoom":"Збільшення/зменшення на 3 рівні","kbdFocusMap":"Сфокусувати карту","kbdFocusControls":"Сфокусувати елементи керування","kbdPrevFeature":"Попередній об'єкт","kbdNextFeature":"Наступний об'єкт","dfLayer":"Шар","dfExtent":"Підтип шару","dfPastedLayer":"Вставлений шар","dfFeatureCaption":"Об'єкт","popupZoom":"Наблизити сюди","popupPropName":"Назва властивості","popupPropValue":"Значення властивості","fIndexNoFeatures":"Об'єктів не знайдено"}}</map-options></template>
+<script>
 // this is the only way to force the browser to  keep the map-options element in
 // the head, where it is looked for by the mapml-viewer...
     let options = document.querySelector("template").content.firstChild.cloneNode(true);

test/e2e/mapml-viewer/localization.html

@@ -96,6 +96,10 @@ test.describe('<mapml-viewer> localization tests', () => {
         const button = buttons.nth(i);
         const text = await button.textContent();
         expect(text).toBeTruthy();
+        // need to use startsWith because the runtime hard-codes some english
+        // strings onto the localized string (which should be incorporated
+        // into the localized string.  e.g. "Alt+Left Arrow" and similar here:
+        // https://github.com/Maps4HTML/MapML.js/blob/37d69c106d35f06d3592183ff999c7168626e261/src/mapml/handlers/ContextMenu.js#L53)
         expect(text.startsWith(locale[cmLocaleList[i]])).toBe(true);
       }
     }