From 5c3b8410d9d44244b11fa593e8a32fdd6d7299d4 Mon Sep 17 00:00:00 2001 From: Bogdan Bruma Date: Mon, 7 Dec 2020 14:56:59 +0200 Subject: [PATCH] feat(map): weglot support [EP-3441] --- packages/earth-map/.env.sample | 1 + packages/earth-map/README.md | 1 + packages/earth-map/public/index.html | 3 + .../map/legend/legend-info/component.tsx | 2 +- .../src/components/widget/component.tsx | 6 +- packages/earth-map/src/config/index.tsx | 1 + packages/earth-map/src/locales/index.ts | 13 +++- packages/earth-map/src/locales/weglot.ts | 68 +++++++++++++++++++ 8 files changed, 91 insertions(+), 4 deletions(-) create mode 100644 packages/earth-map/src/locales/weglot.ts diff --git a/packages/earth-map/.env.sample b/packages/earth-map/.env.sample index 34f71734..74c434c5 100644 --- a/packages/earth-map/.env.sample +++ b/packages/earth-map/.env.sample @@ -14,6 +14,7 @@ REACT_APP_AUTH0_AUDIENCE='' # required REACT_APP_AUTH0_NAMESPACE='https://marapp.org' # required REACT_APP_GTM_TAG='' # optional +REACT_APP_WEGLOT_API_KEY='' # optional REACT_APP_ENABLE_PUBLIC_ACCESS='false' # optional REACT_APP_EXTERNAL_IDP_URL='' # optional diff --git a/packages/earth-map/README.md b/packages/earth-map/README.md index dc265e06..a41feeef 100755 --- a/packages/earth-map/README.md +++ b/packages/earth-map/README.md @@ -38,6 +38,7 @@ The following environment variables are required by the application. | `REACT_APP_GTM_TAG` | Google Tag Manager ID | | `REACT_APP_ENABLE_PUBLIC_ACCESS` | Enable unauthenticated access | | `REACT_APP_EXTERNAL_IDP_URL` | External Identity Provider URL | +| `REACT_APP_WEGLOT_API_KEY` | https://weglot.com/ - Weglot API Key | ## Getting started diff --git a/packages/earth-map/public/index.html b/packages/earth-map/public/index.html index cfe786aa..e59c0a94 100755 --- a/packages/earth-map/public/index.html +++ b/packages/earth-map/public/index.html @@ -29,6 +29,9 @@ --> %REACT_APP_NAME% + <% if (process.env.REACT_APP_WEGLOT_API_KEY) { %> + + <% } %> diff --git a/packages/earth-map/src/components/map/legend/legend-info/component.tsx b/packages/earth-map/src/components/map/legend/legend-info/component.tsx index 5ba3570b..dea58956 100644 --- a/packages/earth-map/src/components/map/legend/legend-info/component.tsx +++ b/packages/earth-map/src/components/map/legend/legend-info/component.tsx @@ -33,7 +33,7 @@ class LegendInfoComponent extends React.Component { return (

{title}

- +
); } diff --git a/packages/earth-map/src/components/widget/component.tsx b/packages/earth-map/src/components/widget/component.tsx index d960d626..3c3f6f5c 100644 --- a/packages/earth-map/src/components/widget/component.tsx +++ b/packages/earth-map/src/components/widget/component.tsx @@ -282,7 +282,7 @@ class Widget extends React.PureComponent { {/* CONTENT || INFO */} -
+
{children({ ...this.props, ...data, @@ -311,7 +311,9 @@ class Widget extends React.PureComponent { onRequestClose={() => this.setState({ activeInfo: !activeInfo })} >

{name}

- {widgetDescription && } + {widgetDescription && ( + + )}
); diff --git a/packages/earth-map/src/config/index.tsx b/packages/earth-map/src/config/index.tsx index 7ce017b2..c9c092cc 100644 --- a/packages/earth-map/src/config/index.tsx +++ b/packages/earth-map/src/config/index.tsx @@ -28,6 +28,7 @@ export const FULLPAGE_LICENSE = process.env.REACT_APP_FULLPAGE_LICENSE; export const ADMIN_URL = process.env.REACT_APP_ADMIN_URL; export const APP_NAME = process.env.REACT_APP_NAME; export const MAPBOX_TOKEN = process.env.REACT_APP_MAPBOX_TOKEN; +export const WEGLOT_API_KEY = process.env.REACT_APP_WEGLOT_API_KEY; export const GTM_TAG = process.env.REACT_APP_GTM_TAG; export const ENABLE_PUBLIC_ACCESS = yn(process.env.REACT_APP_ENABLE_PUBLIC_ACCESS, { diff --git a/packages/earth-map/src/locales/index.ts b/packages/earth-map/src/locales/index.ts index 476a9fc8..9893fbbc 100644 --- a/packages/earth-map/src/locales/index.ts +++ b/packages/earth-map/src/locales/index.ts @@ -26,8 +26,15 @@ import translationEN from './en/translation.json'; import translationES from './es/translation.json'; import translationFR from './fr/translation.json'; +import * as weglot from './weglot'; + const lang = SessionStorage.get('lang') || Elang.EN; +i18n.on('initialized', async (options) => { + await weglot.init(); + weglot.changeLanguage(options.lng); +}); + i18n.use(initReactI18next).init({ resources: { [Elang.EN]: { @@ -48,4 +55,8 @@ i18n.use(initReactI18next).init({ keySeparator: false, }); -i18n.on('languageChanged', (lng) => SessionStorage.add('lang', lng)); +i18n.on('languageChanged', (lng) => { + weglot.changeLanguage(lng); + + SessionStorage.add('lang', lng); +}); diff --git a/packages/earth-map/src/locales/weglot.ts b/packages/earth-map/src/locales/weglot.ts new file mode 100644 index 00000000..26a4dd26 --- /dev/null +++ b/packages/earth-map/src/locales/weglot.ts @@ -0,0 +1,68 @@ +/* + * Copyright 2018-2020 National Geographic Society + * + * Use of this software does not constitute endorsement by National Geographic + * Society (NGS). The NGS name and NGS logo may not be used for any purpose without + * written permission from NGS. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not use + * this file except in compliance with the License. You may obtain a copy of the + * License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed + * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR + * CONDITIONS OF ANY KIND, either express or implied. See the License for the + * specific language governing permissions and limitations under the License. + */ + +import { WEGLOT_API_KEY } from '../config'; + +const Weglot = window['Weglot']; + +export function init(): Promise { + if (!Weglot) { + return; + } + + const resolver = new Promise((resolve) => Weglot.on('initialized', resolve)); + + Weglot.initialize({ + api_key: WEGLOT_API_KEY, + dynamic: '.translate-content', + exceptions: '.translate-content-ignore', + hide_switcher: true, + cache: true, + }); + + return resolver; +} + +export function getAvailableLanguages(): string[] { + if (!Weglot) { + return []; + } + + return [ + Weglot.options.language_from, + ...Weglot.options.languages.map((lang) => lang.language_to), + ]; +} + +export function changeLanguage(lang: string): void { + if (!Weglot) { + return; + } + + const availableLanguages = getAvailableLanguages(); + + if (availableLanguages.includes(lang)) { + Weglot.switchTo(lang); + } else { + const fallbackLang = Weglot.options.language_from; + Weglot.switchTo(fallbackLang); + + console.error(`Language ${lang} is not available. Fallback to ${fallbackLang}`); + } +}