Language Localization UI toolbar

lib/Toolbar.js

@@ -6,9 +6,10 @@ import '@selectize/selectize';
 import '@selectize/selectize/dist/css/selectize.bootstrap4.css';
 
 import { exportFile, exportJsonFile, readFileAsync } from '@/lib/utils/files';
+import { languages } from "@/lib/i18n";
+import i18next, { changeLanguage } from 'i18next';
 
 import template from '@/lib/toolbar.html';
-
 import '@/lib//toolbar.css';
 
 // TODO: this is odd! package.json is a developer file. why should a UI component care about it?
@@ -312,6 +313,24 @@ class Toolbar {
     });
 
     $('#help_reference').on('click', () => this.dh.renderReference());
+
+
+    // language localization controls
+    const language_options = Object.values(languages)
+        .map(el => $("<option>").val(el.langcode).text(el.nativeName));
+
+    $("#select-language-localization")
+        .append(language_options)
+        .select();
+
+    $("#select-language-localization").on("click", function() {
+        const chosenLng = $('#select-language-localization')
+          .find('option:selected')
+          .attr('value');
+        // note: re-renders body!
+        changeLanguage(chosenLng)
+      });
+
   }
 
   async validate() {

lib/i18n.js

@@ -4,10 +4,15 @@ import jqueryI18next from 'jquery-i18next';
 
 import { labels } from '@/lib/utils/translations';
 
-
-const lngs = {
-  en: { nativeName: 'English' },
-  de: { nativeName: 'Deutsch' }
+export const languages = {
+  en: { 
+    nativeName: 'English',
+    langcode: 'en'
+    },
+  de: { 
+    nativeName: 'Deutsch',
+    langcode: 'de'
+    }
 };
 
 const rerender = () => {
@@ -31,26 +36,14 @@ export function initI18n() {
         resources: labels
       }, (err, t) => {
         if (err) return console.error(err);
-
         // for options see
         // https://github.com/i18next/jquery-i18next#initialize-the-plugin
         jqueryI18next.init(i18next, $, { useOptionsAttr: true });
-
-        // fill language switcher
-        Object.keys(lngs).map((lng) => {
-          const opt = new Option(lngs[lng].nativeName, lng);
-          if (lng === i18next.resolvedLanguage) {
-            opt.setAttribute("selected", "selected");
-          }
-          $('#languageSwitcher').append(opt);
-        });
-        $('#languageSwitcher').change((a, b, c) => {
-          const chosenLng = $(this).find("option:selected").attr('value');
-          i18next.changeLanguage(chosenLng, () => {
-            rerender();
-          });
-        });
-
         rerender();
       });
 };
+
+export function changeLanguage(chosenLng) {
+    i18next.changeLanguage(chosenLng);
+    rerender();
+};

lib/toolbar.html

@@ -186,6 +186,20 @@
     </div>
   </div>
 
+  <div class="btn-group" role="group" style="margin-right: 40px">
+    <div class="input-group-prepend">
+      <div class="btn">Language</div>
+    </div>
+    <div class="input-group-append">
+      <!-- <div
+        class="input-group-text"
+        id="file_name_display"
+        style="background-color: transparent"
+      ></div> -->
+      <select class="form-control" id="select-language-localization"></select>
+    </div>
+  </div>
+
   <div class="btn-group" role="group">
     <div class="input-group-append">
       <button class="btn btn-primary" id="next-error-button" type="submit">

lib/utils/templates.js

@@ -62,6 +62,7 @@ function getNestedValue(obj, path) {
  * @returns {Promise<any>} - A promise that resolves with the module's default export
  *                          or the specified default/fallback value on failure.
  */
+// TODO: refactor to readFileAsync
 async function accessFile(folder_path) {
     try {
         const data = await import(`${folder_path}`);

package.json

@@ -79,7 +79,7 @@
     "sifter": "^0.5.4",
     "xlsx": "^0.18.5",
     "jquery-i18next": "^1.2.1",
-    "i18next": "^0.15.1"
+    "i18next": "^23.5.1"
   },
   "jest": {
     "transform": {

yarn.lock

@@ -933,6 +933,13 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
+"@babel/runtime@^7.22.5":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.15.tgz#38f46494ccf6cf020bd4eed7124b425e83e523b8"
+  integrity sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.8.4":
   version "7.18.9"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz"
@@ -3679,6 +3686,13 @@ humanize@^0.0.9:
   resolved "https://registry.npmjs.org/humanize/-/humanize-0.0.9.tgz"
   integrity sha512-bvZZ7vXpr1RKoImjuQ45hJb5OvE2oJafHysiD/AL3nkqTZH2hFCjQ3YZfCd63FefDitbJze/ispUPP0gfDsT2Q==
 
+i18next@^0.15.1:
+  version "23.5.1"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.5.1.tgz#7f7c35ffaa907618d9489f106d5006b09fbca3d3"
+  integrity sha512-JelYzcaCoFDaa+Ysbfz2JsGAKkrHiMG6S61+HLBUEIPaF40WMwW9hCPymlQGrP+wWawKxKPuSuD71WZscCsWHg==
+  dependencies:
+    "@babel/runtime" "^7.22.5"
+
 iconv-lite@0.4.24:
   version "0.4.24"
   resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz"
@@ -5350,6 +5364,11 @@ regenerator-runtime@^0.13.4:
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
   integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
+  integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
+
 regenerator-transform@^0.15.0:
   version "0.15.0"
   resolved "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.0.tgz"