feature: localize legend control (#2123)

* feature: localize legend control * Fixed tranlations and bugs * Language correction
origo-map · Jan 15, 2025 · 16d54fe · 16d54fe
1 parent 45aac57
commit 16d54fe
Show file tree

Hide file tree

Showing 9 changed files with 137 additions and 54 deletions.
diff --git a/src/controls/legend.js b/src/controls/legend.js
@@ -9,6 +9,12 @@ import LayerProperties from './legend/overlayproperties';
 import PopupMenu from '../ui/popupmenu';
 
 const Legend = function Legend(options = {}) {
+  const localization = options.localization;
+
+  function localize(key) {
+    return localization.getStringByKeys({ targetParentKey: 'legend', targetKey: key });
+  }
+
   const {
     cls: clsSettings = '',
     style: styleSettings = {},
@@ -26,7 +32,7 @@ const Legend = function Legend(options = {}) {
     searchLayersMinLength = 2,
     searchLayersLimit = 10,
     searchLayersParameters = ['name', 'title'],
-    searchLayersPlaceholderText = 'Sök lager'
+    searchLayersPlaceholderText = localize('placeholderText')
   } = options;
 
   let {
@@ -174,7 +180,7 @@ const Legend = function Legend(options = {}) {
 
   const turnOffLayersButton = Button({
     cls: 'round compact icon-small margin-x-smaller',
-    title: 'Släck alla lager',
+    title: localize('turnOffLayersTitle'),
     click() {
       viewer.dispatch('active:turnofflayers');
     },
@@ -190,7 +196,7 @@ const Legend = function Legend(options = {}) {
 
   const showVisibleLayersButton = Button({
     cls: 'compact icon-smaller margin-x-small hidden',
-    title: 'Visa endast tända lager',
+    title: localize('showVisibleTitle'),
     click() {
       viewer.dispatch('active:togglevisibleLayers');
     },
@@ -206,7 +212,7 @@ const Legend = function Legend(options = {}) {
 
   const showAllVisibleLayersButton = Button({
     cls: 'compact icon-smaller margin-x-small hidden',
-    title: 'Visa alla lager',
+    title: localize('showAllVisibleTitle'),
     click() {
       viewer.dispatch('active:togglevisibleLayers');
     },
@@ -247,7 +253,7 @@ const Legend = function Legend(options = {}) {
 
   const turnOnLayersButton = Button({
     cls: 'round compact icon-small margin-x-smaller',
-    title: 'Tänd alla lager utom bakgrundslager',
+    title: localize('turnOnLayersTitle'),
     click() {
       viewer.dispatch('active:turnonlayers');
     },
@@ -328,8 +334,8 @@ const Legend = function Legend(options = {}) {
       'align-self': 'center'
     },
     icon: '#o_add_24px',
-    ariaLabel: 'Lägg till lager',
-    title: 'Lägg till lager',
+    ariaLabel: localize('addLayerTitle'),
+    title: localize('addLayerTitle'),
     tabIndex: -1,
     validStates: ['initial', 'hidden'],
     state: 'hidden'
@@ -390,7 +396,7 @@ const Legend = function Legend(options = {}) {
       layer.setVisible(true);
       document.getElementsByClassName('o-search-layer-field')[0].value = '';
     } else {
-      console.error('Search options are missing');
+      console.error(localize('selectHandlerError'));
     }
   }
 
@@ -478,7 +484,7 @@ const Legend = function Legend(options = {}) {
               found = true;
             }
             if (typeof layer.get('title') === 'undefined') {
-              value = `Titel saknas (${shorten(value, obj.value)})`;
+              value = `${localize('titleMissing')} (${shorten(value, obj.value)})`;
             } else {
               value = `${layer.get('title')} (${shorten(value, obj.value)})`;
             }
@@ -642,16 +648,16 @@ const Legend = function Legend(options = {}) {
       target = document.getElementById(viewer.getMain().getId());
       const maxHeight = calcMaxHeight(getTargetHeight());
       overlaysCmp = Overlays({
-        viewer, cls: contentCls, style: contentStyle, labelOpacitySlider
+        viewer, cls: contentCls, style: contentStyle, labelOpacitySlider, localization
       });
       visibleOverlaysCmp = VisibleOverlays({
-        viewer, cls: `${contentCls} hidden`, style: contentStyle, labelOpacitySlider
+        viewer, cls: `${contentCls} hidden`, style: contentStyle, labelOpacitySlider, localization
       });
       const baselayerCmps = [toggleGroup];
 
       toolsCmp = El({
         cls: 'flex padding-small no-shrink hidden',
-        tooltipText: 'Lagerbytare',
+        tooltipText: localize('layerSwitcher'),
         style: {
           'background-color': '#fff',
           'justify-content': 'flex-end',
@@ -669,7 +675,7 @@ const Legend = function Legend(options = {}) {
         icon: '#ic_close_24px',
         state: closeButtonState,
         validStates: ['initial', 'hidden'],
-        ariaLabel: 'Stäng',
+        ariaLabel: localize('close'),
         click() {
           toggleVisibility();
         }
@@ -739,7 +745,7 @@ const Legend = function Legend(options = {}) {
       const layerButtonCls = isExpanded ? ' faded' : '';
       layerButton = Button({
         icon: '#ic_layers_24px',
-        tooltipText: 'Lager',
+        tooltipText: localize('layer'),
         tooltipPlacement: 'west',
         cls: `control icon-small medium round absolute light bottom-right${layerButtonCls}`,
         click() {

diff --git a/src/controls/legend/group.js b/src/controls/legend/group.js
@@ -28,7 +28,8 @@ const Group = function Group(viewer, options = {}) {
     zIndexStart = 0.1,
     opacityControl = false,
     zoomToExtent = false,
-    description
+    description,
+    localization
   } = options;
 
   const stateCls = {
@@ -79,8 +80,7 @@ const Group = function Group(viewer, options = {}) {
     }
   }) : false;
 
-  const moreInfoButton = (opacityControl || zoomToExtent || description || (abstract && !showAbstractInLegend)) ? createMoreInfoButton({ viewer,
-    group: thisGroup }) : false;
+  const moreInfoButton = (opacityControl || zoomToExtent || description || (abstract && !showAbstractInLegend)) ? createMoreInfoButton({ viewer, group: thisGroup, localization }) : false;
 
   const SubGroupHeader = function SubGroupHeader() {
     const expandButton = Button({
@@ -395,7 +395,7 @@ const Group = function Group(viewer, options = {}) {
             const thisParent = this;
             const label = group.labelOpacitySlider ? group.labelOpacitySlider : '';
             const layerProperties = LayerProperties({
-              group, viewer, thisParent, labelOpacitySlider: label
+              group, viewer, thisParent, labelOpacitySlider: label, localization
             });
             slidenav.setSecondary(layerProperties);
             slidenav.slideToSecondary();

diff --git a/src/controls/legend/moreinfobutton.js b/src/controls/legend/moreinfobutton.js
@@ -6,13 +6,18 @@ export default function createMoreInfoButton(params) {
   const {
     layer,
     group = {},
-    viewer
+    viewer,
+    localization
   } = params;
   const popupMenuItems = [];
   let moreInfoButton;
   let popupMenu;
   const showPopup = group.zoomToExtent && group.extent; // In case of zoomToExtent we always want to show popupmenu
 
+  function localize(key) {
+    return localization.getStringByKeys({ targetParentKey: 'legend', targetKey: key });
+  }
+
   const eventOverlayProps = new CustomEvent('overlayproperties', {
     bubbles: true,
     detail: {
@@ -35,7 +40,7 @@ export default function createMoreInfoButton(params) {
       },
       render() {
         const labelCls = 'text-smaller padding-x-small grow pointer no-select overflow-hidden';
-        return `<li id="${this.getId()}" class="${labelCls}">Visa ${layer ? 'lagerinformation' : 'gruppinformation'}</li>`;
+        return `<li id="${this.getId()}" class="${labelCls}">${localize('showInfoMenuItem')} ${layer ? localize('layerInfoMenuItem') : localize('groupInfoMenuItem')}</li>`;
       }
     });
     popupMenuItems.push(layerInfoMenuItem);
@@ -69,7 +74,7 @@ export default function createMoreInfoButton(params) {
       },
       render() {
         const labelCls = 'text-smaller padding-x-small grow pointer no-select overflow-hidden';
-        return `<li id="${this.getId()}" class="${labelCls}">Zooma till</li>`;
+        return `<li id="${this.getId()}" class="${labelCls}">${localize('zoomToExtentMenuItem')}</li>`;
       }
     });
     popupMenuItems.push(zoomToExtentMenuItem);
@@ -93,7 +98,7 @@ export default function createMoreInfoButton(params) {
             const features = layer.getSource().getFeatures();
             exportToFile(features, format, {
               featureProjection: viewer.getProjection().getCode(),
-              filename: layer.get('title') || 'export'
+              filename: layer.get('title') || localize('exportLayerTitle')
             });
             e.preventDefault();
             e.stopPropagation();
@@ -103,8 +108,8 @@ export default function createMoreInfoButton(params) {
         render() {
           let exportLabel;
           if (exportFormatArray.length > 1) {
-            exportLabel = `Spara lager (.${format})`;
-          } else { exportLabel = 'Spara lager'; }
+            exportLabel = `${localize('exportLayerSave')} (.${format})`;
+          } else { exportLabel = localize('exportLayerSave'); }
           const labelCls = 'text-smaller padding-x-small grow pointer no-select overflow-hidden';
           return `<li id="${this.getId()}" class="${labelCls}">${exportLabel}</li>`;
         }
@@ -118,7 +123,7 @@ export default function createMoreInfoButton(params) {
       onRender() {
         const labelEl = document.getElementById(this.getId());
         labelEl.addEventListener('click', (e) => {
-          const doRemove = (layer.get('promptlessRemoval') === true) || window.confirm('Vill du radera lagret?');
+          const doRemove = (layer.get('promptlessRemoval') === true) || window.confirm(localize('removeLayerQuestion'));
           if (doRemove) {
             viewer.getMap().removeLayer(layer);
             e.preventDefault();
@@ -129,7 +134,7 @@ export default function createMoreInfoButton(params) {
       },
       render() {
         const labelCls = 'text-smaller padding-x-small grow pointer no-select overflow-hidden';
-        return `<li id="${this.getId()}" class="${labelCls}">Ta bort lager</li>`;
+        return `<li id="${this.getId()}" class="${labelCls}">${localize('removeLayer')}</li>`;
       }
     });
     popupMenuItems.push(removeLayerMenuItem);
@@ -188,7 +193,7 @@ export default function createMoreInfoButton(params) {
         'align-self': 'center'
       },
       icon: '#ic_more_vert_24px',
-      ariaLabel: 'Visa lagerinfo',
+      ariaLabel: localize('moreInfoButtonLabel'),
       tabIndex: -1
     });
     moreInfoButton.on('render', function onRenderButton() {

diff --git a/src/controls/legend/overlay.js b/src/controls/legend/overlay.js
@@ -11,16 +11,21 @@ const OverlayLayer = function OverlayLayer(options) {
     layer,
     position = 'top',
     style,
-    viewer
+    viewer,
+    localization
   } = options;
 
+  function localize(key) {
+    return localization.getStringByKeys({ targetParentKey: 'legend', targetKey: key });
+  }
+
   const buttons = [];
   let headerIconClass = headerIconCls;
 
   const hasStylePicker = viewer.getLayerStylePicker(layer).length > 0;
   const layerIconCls = `round compact icon-small relative no-shrink light ${hasStylePicker ? 'style-picker' : ''}`;
   const cls = `${clsSettings} flex row align-center padding-left padding-right-smaller item wrap`.trim();
-  const title = layer.get('title') || 'Titel saknas';
+  const title = layer.get('title') || localize('layerTitleMissing');
   const name = layer.get('name');
   const secure = layer.get('secure');
   let hasExtendedLegend = false;
@@ -96,7 +101,7 @@ const OverlayLayer = function OverlayLayer(options) {
       height: 'calc(1.5rem + 2px)',
       width: 'calc(1.5rem + 2px)'
     },
-    ariaLabel: 'Lager ikon',
+    ariaLabel: localize('layerIcon'),
     icon: headerIcon,
     tabIndex: -1
   });
@@ -115,7 +120,7 @@ const OverlayLayer = function OverlayLayer(options) {
       'padding-left': '.5rem'
     },
     icon: getCheckIcon(layer.getVisible()),
-    ariaLabel: 'Växla lagersynlighet',
+    ariaLabel: localize('toggleLayer'),
     tabIndex: -1
   });
 
@@ -135,7 +140,7 @@ const OverlayLayer = function OverlayLayer(options) {
     }
   });
 
-  const moreInfoButton = createMoreInfoButton({ layer, viewer });
+  const moreInfoButton = createMoreInfoButton({ layer, viewer, localization });
   buttons.push(moreInfoButton);
   const ButtonsHtml = `${layerIcon.render()}${label.render()}${toggleButton.render()}${moreInfoButton.render()}`;
 

diff --git a/src/controls/legend/overlayproperties.js b/src/controls/legend/overlayproperties.js
@@ -7,7 +7,8 @@ const OverlayProperties = function OverlayProperties(options = {}) {
     cls: clsOptions = '',
     group,
     layer,
-    viewer
+    viewer,
+    localization
   } = options;
   let cls = '';
   let title;
@@ -52,6 +53,10 @@ const OverlayProperties = function OverlayProperties(options = {}) {
     label
   });
 
+  function localize(key) {
+    return localization.getStringByKeys({ targetParentKey: 'legend', targetKey: key });
+  }
+
   function hasStylePicker() {
     return stylePicker.length > 0;
   }
@@ -70,7 +75,7 @@ const OverlayProperties = function OverlayProperties(options = {}) {
 
   function renderStyleSelection() {
     if (hasStylePicker()) {
-      const html = `<div class="o-stylepicker-header text-small padding-small">Välj stil</div>${styleSelection.render()}`;
+      const html = `<div class="o-stylepicker-header text-small padding-small">${localize('renderStyleSelect')}</div>${styleSelection.render()}`;
       return html;
     }
     return '';
@@ -173,7 +178,7 @@ const OverlayProperties = function OverlayProperties(options = {}) {
           buttonTextCls: 'text-smaller',
           text: getStyleDisplayName(layer.get('styleName')),
           buttonIconCls: 'black',
-          ariaLabel: 'Välj stil'
+          ariaLabel: localize('renderStyleSelect')
         });
         components.push(styleSelection);
       }

diff --git a/src/controls/legend/overlays.js b/src/controls/legend/overlays.js
@@ -20,9 +20,13 @@ const Overlays = function Overlays(options) {
     expanded = true,
     style: styleSettings = {},
     viewer,
-    labelOpacitySlider
+    labelOpacitySlider,
+    localization
   } = options;
 
+  function localize(key) {
+    return localization.getStringByKeys({ targetParentKey: 'legend', targetKey: key });
+  }
   const cls = `${clsSettings} o-layerswitcher-overlays flex row overflow-hidden`.trim();
   const style = dom.createStyle({
     width: '100%', height: '100%', 'min-width': '220px', ...styleSettings
@@ -36,7 +40,7 @@ const Overlays = function Overlays(options) {
 
   const groupCmps = viewer.getGroups().reduce((acc, group) => {
     if (nonGroupNames.includes(group.name)) return acc;
-    return acc.concat(Group(viewer, group));
+    return acc.concat(Group(viewer, { ...group, localization }));
   }, []);
 
   groupCmps.forEach((groupCmp) => {
@@ -155,7 +159,7 @@ const Overlays = function Overlays(options) {
     const styleName = layer.get('styleName') || null;
     const layerStyle = styleName ? viewer.getStyle(styleName) : undefined;
     const overlay = Overlay({
-      layer, style: layerStyle, position, viewer
+      layer, style: layerStyle, position, viewer, localization
     });
     const groupName = layer.get('group');
     if (rootGroupNames.includes(groupName)) {
@@ -170,7 +174,7 @@ const Overlays = function Overlays(options) {
           updateLegend(groupCmp);
         }
       } else {
-        console.warn(`Group ${groupName} does not exist`);
+        console.warn(`${localize('addLayerWarningGroup')} ${groupName} ${localize('addLayerWarningDNE')}`);
       }
     }
   };
@@ -182,7 +186,7 @@ const Overlays = function Overlays(options) {
   };
 
   const addGroup = function addGroup(groupOptions) {
-    const groupCmp = Group(viewer, groupOptions);
+    const groupCmp = Group(viewer, { ...groupOptions, localization });
     groupCmps.push(groupCmp);
     if (groupCmp.type === 'grouplayer') {
       const parent = groupCmps.find((cmp) => cmp.name === groupCmp.parent);
@@ -269,7 +273,7 @@ const Overlays = function Overlays(options) {
           const layer = evt.detail.layer;
           const parent = this;
           const layerProperties = LayerProperties({
-            layer, viewer, parent, labelOpacitySlider
+            layer, viewer, parent, labelOpacitySlider, localization
           });
           slidenav.setSecondary(layerProperties);
           slidenav.slideToSecondary();