natgeosociety · dan-qc · Dec 8, 2020 · Dec 7, 2020
diff --git 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
@@ -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
@@ -29,6 +29,9 @@
     -->
 
     <title>%REACT_APP_NAME%</title>
+    <% if (process.env.REACT_APP_WEGLOT_API_KEY) { %>
+      <script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script>
+    <% } %>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

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
@@ -33,7 +33,7 @@ class LegendInfoComponent extends React.Component<ILegendInfo> {
     return (
       <div className="marapp-qa-layerinfo c-layer-info">
         <h3 className="ng-text-display-m ng-body-color">{title}</h3>
-        <Html className="layer-info--html" html={description} />
+        <Html className="layer-info--html translate-content" html={description} />
       </div>
     );
   }

diff --git 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<IWidgetTemplate, IWidgetState> {
 
           {/* CONTENT || INFO */}
 
-          <div className="widget--content ng-margin-large-bottom">
+          <div className="widget--content ng-margin-large-bottom translate-content">
             {children({
               ...this.props,
               ...data,
@@ -311,7 +311,9 @@ class Widget extends React.PureComponent<IWidgetTemplate, IWidgetState> {
           onRequestClose={() => this.setState({ activeInfo: !activeInfo })}
         >
           <h3 className="ng-text-display-m ng-body-color">{name}</h3>
-          {widgetDescription && <Html html={widgetDescription} className="widget--info" />}
+          {widgetDescription && (
+            <Html html={widgetDescription} className="widget--info translate-content" />
+          )}
         </ModalComponent>
       </div>
     );

diff --git 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
@@ -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
@@ -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<any> {
+  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}`);
+  }
+}