i18n
This commit is contained in:
parent
3e191dbf38
commit
3fd43b09a4
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"overrides": [{ "filename": "**/fr.*", "language": "fr" }]
|
||||
}
|
|
@ -16,6 +16,7 @@
|
|||
"@capacitor/ios": "^3.4.3",
|
||||
"@esbuild-plugins/node-globals-polyfill": "^0.1.1",
|
||||
"@esbuild-plugins/node-modules-polyfill": "^0.1.4",
|
||||
"@solid-primitives/i18n": "^1.1.2",
|
||||
"@solidjs/router": "^0.5.1",
|
||||
"@suid/icons-material": "^0.5.1",
|
||||
"@suid/material": "^0.8.0",
|
||||
|
@ -1011,6 +1012,14 @@
|
|||
"integrity": "sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@solid-primitives/i18n": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@solid-primitives/i18n/-/i18n-1.1.2.tgz",
|
||||
"integrity": "sha512-eLTqmDKorLa99cXrgS4DgTqrk0n/F4rB0YR76A6gr90by5TLE+HSZ0agiZVBIUGs2g5EFeEnLqwxKsM+F5hcJQ==",
|
||||
"peerDependencies": {
|
||||
"solid-js": "^1.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@solidjs/router": {
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@solidjs/router/-/router-0.5.1.tgz",
|
||||
|
|
|
@ -30,6 +30,7 @@
|
|||
"@capacitor/ios": "^3.4.3",
|
||||
"@esbuild-plugins/node-globals-polyfill": "^0.1.1",
|
||||
"@esbuild-plugins/node-modules-polyfill": "^0.1.4",
|
||||
"@solid-primitives/i18n": "^1.1.2",
|
||||
"@solidjs/router": "^0.5.1",
|
||||
"@suid/icons-material": "^0.5.1",
|
||||
"@suid/material": "^0.8.0",
|
||||
|
|
|
@ -3,6 +3,11 @@ import { Feature } from 'ol';
|
|||
import { Geometry } from 'ol/geom';
|
||||
import { Component, createSignal, For } from 'solid-js';
|
||||
import { unwrap } from 'solid-js/store';
|
||||
import {
|
||||
I18nContext,
|
||||
createI18nContext,
|
||||
useI18n,
|
||||
} from '@solid-primitives/i18n';
|
||||
import CloseIcon from '@suid/icons-material/Close';
|
||||
import { tree } from '../map';
|
||||
import style from './Infos.module.css';
|
||||
|
@ -49,6 +54,7 @@ export const clickHandler = (event: any) => {
|
|||
};
|
||||
|
||||
const Infos: Component<{}> = (props) => {
|
||||
const [t, { add, locale, dict }] = useI18n();
|
||||
const handleClickOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
|
@ -59,7 +65,7 @@ const Infos: Component<{}> = (props) => {
|
|||
return (
|
||||
<Dialog onClose={handleClose} open={open()} class={style.dialog}>
|
||||
<DialogTitle class={style.title}>
|
||||
<div class={style['title-text']}>Nearby</div>
|
||||
<div class={style['title-text']}>{t('nearby')}</div>
|
||||
<IconButton onClick={handleClose} class={style.close}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
|
|
|
@ -1,6 +1,11 @@
|
|||
import OSM from 'ol/source/OSM';
|
||||
import XYZ from 'ol/source/XYZ';
|
||||
import { Component, createSignal, For } from 'solid-js';
|
||||
import {
|
||||
I18nContext,
|
||||
createI18nContext,
|
||||
useI18n,
|
||||
} from '@solid-primitives/i18n';
|
||||
|
||||
import style from './MapTileProvider.module.css';
|
||||
import LayersIcon from '@suid/icons-material/Layers';
|
||||
|
@ -84,6 +89,8 @@ const MapTilesProvider: Component<{}> = (props) => {
|
|||
|
||||
const params = useParams();
|
||||
|
||||
const [t] = useI18n();
|
||||
|
||||
const handleChange = (ev: any) => {
|
||||
navigate(
|
||||
`/map/${ev.target.value}/${params.lon}/${params.lat}/${params.zoom}/${params.rotation}`
|
||||
|
@ -100,7 +107,7 @@ const MapTilesProvider: Component<{}> = (props) => {
|
|||
</div>
|
||||
<Dialog onClose={handleClose} open={open()} class={style.dialog}>
|
||||
<DialogTitle class={style.title}>
|
||||
<div class={style['title-text']}>Choose your map</div>
|
||||
<div class={style['title-text']}>{t('chooseYourMap')}</div>
|
||||
<IconButton onClick={handleClose} class={style.close}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
|
|
|
@ -0,0 +1,9 @@
|
|||
const dict = {
|
||||
close: 'Close',
|
||||
|
||||
chooseYourMap: 'Choose your map',
|
||||
|
||||
nearby: 'Nearby',
|
||||
};
|
||||
|
||||
export default dict;
|
|
@ -0,0 +1,11 @@
|
|||
// cSpell:includeRegExp string
|
||||
|
||||
const dict = {
|
||||
close: 'Quitter',
|
||||
|
||||
chooseYourMap: 'Choisissez votre carte',
|
||||
|
||||
nearby: 'À proximité',
|
||||
};
|
||||
|
||||
export default dict;
|
|
@ -0,0 +1,6 @@
|
|||
import en from './en';
|
||||
import fr from './fr';
|
||||
|
||||
export const dict = { en, fr };
|
||||
|
||||
export default dict;
|
|
@ -1,8 +1,15 @@
|
|||
/* @refresh reload */
|
||||
import { render } from 'solid-js/web';
|
||||
import { Router, hashIntegration } from '@solidjs/router';
|
||||
import {
|
||||
I18nContext,
|
||||
createI18nContext,
|
||||
useI18n,
|
||||
} from '@solid-primitives/i18n';
|
||||
import dict from './i18n';
|
||||
|
||||
import App from './App';
|
||||
import { Language } from '@suid/icons-material';
|
||||
|
||||
// See https://stackoverflow.com/questions/71538643/property-wakelock-does-not-exist-on-type-navigator
|
||||
const requestWakeLock = async () => {
|
||||
|
@ -32,10 +39,28 @@ const handleVisibilityChange = () => {
|
|||
document.addEventListener('visibilitychange', handleVisibilityChange, false);
|
||||
requestWakeLock();
|
||||
|
||||
const getLanguage = () => {
|
||||
for (const i in navigator.languages) {
|
||||
const language = navigator.languages[i];
|
||||
if (language in dict) {
|
||||
return language;
|
||||
}
|
||||
const shortLanguage = language.slice(0, 2);
|
||||
if (shortLanguage in dict) {
|
||||
return shortLanguage;
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const i18nDict = createI18nContext(dict, getLanguage());
|
||||
|
||||
render(
|
||||
() => (
|
||||
<Router>
|
||||
<App />
|
||||
<I18nContext.Provider value={i18nDict}>
|
||||
<App />
|
||||
</I18nContext.Provider>
|
||||
</Router>
|
||||
),
|
||||
document.getElementById('root') as HTMLElement
|
||||
|
|
Loading…
Reference in New Issue