Use translate for strings exposed to users

This commit is contained in:
Yohan Boniface
2024-02-27 17:44:22 +01:00
parent 83682efbd8
commit 25c9473334
3 changed files with 35 additions and 6 deletions

View File

@ -1,4 +1,5 @@
import {locale, setLocale, registerLocale, translate} from 'leaflet';
import {locale, setLocale, registerLocale, translate, Map} from 'leaflet';
import {createContainer, removeMapContainer} from '../SpecHelper.js';
describe('I18n', () => {
beforeEach(() => {
@ -61,3 +62,25 @@ describe('I18n', () => {
});
});
describe('Map.I18n', () => {
it('should be possible to translate Leaflet strings', () => {
const container = createContainer();
const fr = {
'Zoom in': 'Zoomer',
'Zoom out': 'Dézoomer',
'A JavaScript library for interactive maps': 'Bibliothèque JavaScript pour cartes interactives',
};
registerLocale('fr', fr);
setLocale('fr');
const map = new Map(container);
map.setView([0, 0], 0);
expect(document.querySelector('.leaflet-control-zoom-in').title).to.eql('Zoomer');
expect(document.querySelector('.leaflet-control-zoom-out').title).to.eql('Dézoomer');
expect(document.querySelector('.leaflet-control-attribution a').title).to.include('Bibliothèque JavaScript pour cartes interactives');
removeMapContainer(map, container);
});
});

View File

@ -4,6 +4,7 @@ import {Map} from '../map/Map.js';
import * as Util from '../core/Util.js';
import * as DomEvent from '../dom/DomEvent.js';
import * as DomUtil from '../dom/DomUtil.js';
import {translate} from '../core/I18n.js';
const ukrainianFlag = '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" class="leaflet-attribution-flag"><path fill="#4C7BE1" d="M0 0h12v4H0z"/><path fill="#FFD500" d="M0 4h12v3H0z"/><path fill="#E0BC00" d="M0 7h12v1H0z"/></svg>';
@ -27,11 +28,15 @@ export const Attribution = Control.extend({
// @option prefix: String|false = 'Leaflet'
// The HTML text shown before the attributions. Pass `false` to disable.
prefix: `<a href="https://leafletjs.com" title="A JavaScript library for interactive maps">${ukrainianFlag}Leaflet</a>`
prefix: null
},
initialize(options) {
Util.setOptions(this, options);
if (this.options.prefix === null) {
const title = translate('A JavaScript library for interactive maps');
this.options.prefix = `<a href="https://leafletjs.com" title="${title}">${ukrainianFlag}Leaflet</a>`;
}
this._attributions = {};
},

View File

@ -3,6 +3,7 @@ import {Control} from './Control.js';
import {Map} from '../map/Map.js';
import * as DomUtil from '../dom/DomUtil.js';
import * as DomEvent from '../dom/DomEvent.js';
import {translate} from '../core/I18n.js';
/*
* @class Control.Zoom
@ -27,7 +28,7 @@ export const Zoom = Control.extend({
// @option zoomInTitle: String = 'Zoom in'
// The title set on the 'zoom in' button.
zoomInTitle: 'Zoom in',
zoomInTitle: '',
// @option zoomOutText: String = '<span aria-hidden="true">&#x2212;</span>'
// The text set on the 'zoom out' button.
@ -35,7 +36,7 @@ export const Zoom = Control.extend({
// @option zoomOutTitle: String = 'Zoom out'
// The title set on the 'zoom out' button.
zoomOutTitle: 'Zoom out'
zoomOutTitle: ''
},
onAdd(map) {
@ -43,9 +44,9 @@ export const Zoom = Control.extend({
container = DomUtil.create('div', `${zoomName} leaflet-bar`),
options = this.options;
this._zoomInButton = this._createButton(options.zoomInText, options.zoomInTitle,
this._zoomInButton = this._createButton(options.zoomInText, options.zoomInTitle || translate('Zoom in'),
`${zoomName}-in`, container, this._zoomIn);
this._zoomOutButton = this._createButton(options.zoomOutText, options.zoomOutTitle,
this._zoomOutButton = this._createButton(options.zoomOutText, options.zoomOutTitle || translate('Zoom out'),
`${zoomName}-out`, container, this._zoomOut);
this._updateDisabled();