Skip to content

Commit 5453380

Browse files
mistic100mistic100
committed
Fix #1458 improve translation support
1 parent 28a51d2 commit 5453380

File tree

16 files changed

+81
-45
lines changed

16 files changed

+81
-45
lines changed

‎docs/guide/navbar.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,8 @@ Unique identifier of the button, usefull when using the `navbar.getButton()` met
5757

5858
Tooltip displayed when the mouse is over the button.
5959

60+
For translation purposes it can be a key in the main [`lang`](./config.md#lang) object.
61+
6062
#### `className`
6163

6264
- type : `string`

‎docs/plugins/settings.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,8 @@ settings.addSetting({
8181
});
8282
```
8383

84+
For translation purposes, both `label` can be a key in the main [`lang`](../guide/config.md#lang) object.
85+
8486
## Button badge
8587

8688
A setting can also have a `badge` function, which return value will be used as a badge on the settings button itself. **Only one setting can declare a badge.**

‎packages/core/src/buttons/AbstractButton.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,9 @@ export abstract class AbstractButton extends AbstractComponent {
101101
});
102102

103103
this.config = getConfig(config);
104-
this.config.id = (this.constructor as typeof AbstractButton).id;
104+
if (!config.id) {
105+
this.config.id = (this.constructor as typeof AbstractButton).id;
106+
}
105107

106108
if (config.icon) {
107109
this.__setIcon(config.icon);
@@ -110,7 +112,7 @@ export abstract class AbstractButton extends AbstractComponent {
110112
this.state.width = this.container.offsetWidth;
111113

112114
if (this.config.title) {
113-
this.container.title = this.config.title;
115+
this.container.title = this.viewer.config.lang[this.config.title] ?? this.config.title;
114116
} else if (this.id && this.id in this.viewer.config.lang) {
115117
this.container.title = (this.viewer.config.lang as any)[this.id];
116118
}

‎packages/core/src/buttons/CustomButton.ts‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export class CustomButton extends AbstractButton {
77

88
constructor(navbar: Navbar, config: NavbarCustomButton) {
99
super(navbar, {
10+
id: config.id ?? `psvButton-${Math.random().toString(36).substring(2)}`,
1011
className: `psv-custom-button ${config.className || ''}`,
1112
hoverScale: false,
1213
collapsable: config.collapsable !== false,
@@ -16,12 +17,6 @@ export class CustomButton extends AbstractButton {
1617

1718
this.customOnClick = config.onClick;
1819

19-
if (config.id) {
20-
this.config.id = config.id;
21-
} else {
22-
this.config.id = 'psvButton-' + Math.random().toString(36).substring(2);
23-
}
24-
2520
if (config.content) {
2621
if (typeof config.content === 'string') {
2722
this.container.innerHTML = config.content;

‎packages/core/src/model.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -274,6 +274,7 @@ export type NavbarCustomButton = {
274274
id?: string;
275275
/**
276276
* Tooltip displayed when the mouse is over the button
277+
* If can be a key in the global `lang` config
277278
*/
278279
title?: string;
279280
/**

‎packages/map-plugin/src/components/MapCompassButton.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ export class MapCompassButton extends AbstractMapButton {
66
constructor(map: MapComponent) {
77
super(map, ButtonPosition.VERTICAL);
88

9-
this.container.title = this.viewer.config.lang['mapNorth'];
109
this.container.innerHTML = icon;
1110
this.container.querySelector('svg').style.width = '80%';
1211

@@ -19,4 +18,8 @@ export class MapCompassButton extends AbstractMapButton {
1918
rotate(angle: number) {
2019
this.container.querySelector('svg').style.transform = `rotate3d(0, 0, 1, ${-angle}rad)`;
2120
}
21+
22+
override update() {
23+
this.container.title = this.viewer.config.lang['mapNorth'];
24+
}
2225
}

‎packages/map-plugin/src/components/MapComponent.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ export class MapComponent extends AbstractComponent {
9898
window.addEventListener('touchend', this);
9999
canvasContainer.addEventListener('wheel', this);
100100
viewer.addEventListener(events.KeypressEvent.type, this);
101+
viewer.addEventListener(events.ConfigChangedEvent.type, this);
101102

102103
// map canvas
103104
this.canvas = document.createElement('canvas');
@@ -183,6 +184,14 @@ export class MapComponent extends AbstractComponent {
183184
e.preventDefault();
184185
}
185186
break;
187+
case events.ConfigChangedEvent.type:
188+
if ((e as events.ConfigChangedEvent).containsOptions('lang')) {
189+
this.resetButton?.update();
190+
this.closeButton?.update();
191+
this.compassButton?.update();
192+
this.maximizeButton?.update();
193+
}
194+
break;
186195
case 'mousedown': {
187196
const event = e as MouseEvent;
188197
this.state.mouseX = event.clientX;

‎packages/map-plugin/src/components/MapResetButton.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ export class MapResetButton extends AbstractMapButton {
66
constructor(map: MapComponent) {
77
super(map, ButtonPosition.HORIZONTAL);
88

9-
this.container.title = this.viewer.config.lang['mapReset'];
109
this.container.innerHTML = reset;
1110
this.container.querySelector('svg').style.width = '80%';
1211

@@ -15,4 +14,8 @@ export class MapResetButton extends AbstractMapButton {
1514
e.stopPropagation();
1615
});
1716
}
17+
18+
override update() {
19+
this.container.title = this.viewer.config.lang['mapReset'];
20+
}
1821
}

‎packages/plan-plugin/src/components/PlanComponent.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ export class PlanComponent extends AbstractComponent {
6464
});
6565

6666
viewer.addEventListener(events.KeypressEvent.type, this);
67+
viewer.addEventListener(events.ConfigChangedEvent.type, this);
6768

6869
const mapContainer = document.createElement('div');
6970
mapContainer.className = 'psv-plan__container';
@@ -132,6 +133,7 @@ export class PlanComponent extends AbstractComponent {
132133
cancelAnimationFrame(this.state.renderLoop);
133134

134135
this.viewer.removeEventListener(events.KeypressEvent.type, this);
136+
this.viewer.removeEventListener(events.ConfigChangedEvent.type, this);
135137

136138
this.gallery?.removeEventListener('show-gallery', this);
137139
this.gallery?.removeEventListener('hide-gallery', this);
@@ -150,6 +152,14 @@ export class PlanComponent extends AbstractComponent {
150152
e.preventDefault();
151153
}
152154
break;
155+
case events.ConfigChangedEvent.type:
156+
if ((e as events.ConfigChangedEvent).containsOptions('lang')) {
157+
this.resetButton?.update();
158+
this.closeButton?.update();
159+
this.layersButton?.update();
160+
this.maximizeButton?.update();
161+
}
162+
break;
153163
case 'transitionstart':
154164
this.state.forceRender = true;
155165
break;

‎packages/plan-plugin/src/components/PlanLayersButton.ts‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,14 @@ export class PlanLayersButton extends AbstractPlanButton {
88

99
constructor(plan: PlanComponent) {
1010
super(plan, ButtonPosition.VERTICAL);
11-
12-
const title = this.viewer.config.lang['mapLayers'];
13-
14-
this.container.title = title;
11+
1512
this.container.innerHTML = layersIcon;
1613

1714
this.select = document.createElement('select');
1815
this.select.className = 'psv-plan__layers-select';
19-
this.select.setAttribute('aria-label', title)
2016

2117
const placeholder = document.createElement('option');
2218
placeholder.disabled = true;
23-
placeholder.innerText = title;
2419
this.select.appendChild(placeholder);
2520

2621
this.select.addEventListener('change', () => {
@@ -33,6 +28,14 @@ export class PlanLayersButton extends AbstractPlanButton {
3328
this.hide();
3429
}
3530

31+
override update() {
32+
const title = this.viewer.config.lang['mapLayers'];
33+
34+
this.container.title = title;
35+
this.select.setAttribute('aria-label', title);
36+
this.select.querySelector('option').innerText = title;
37+
}
38+
3639
setLayers(layers: string[]) {
3740
this.show();
3841

0 commit comments

Comments
 (0)