Migration from webL10n to i18next

js/activity.js

@@ -305,17 +305,17 @@ class Activity {
         }
 
         try {
-            let lang = "en";
-            if (this.storage.languagePreference !== undefined) {
-                lang = this.storage.languagePreference;
-                document.webL10n.setLanguage(lang);
-            } else {
-                lang = navigator.language;
-                if (lang.includes("-")) {
-                    lang = lang.slice(0, lang.indexOf("-"));
-                    document.webL10n.setLanguage(lang);
-                }
-            }
+            // let lang = "en";
+            // if (this.storage.languagePreference !== undefined) {
+            //     lang = this.storage.languagePreference;
+            //     document.webL10n.setLanguage(lang);
+            // } else {
+            //     lang = navigator.language;
+            //     if (lang.includes("-")) {
+            //         lang = lang.slice(0, lang.indexOf("-"));
+            //         document.webL10n.setLanguage(lang);
+            //     }
+            // }
         } catch (e) {
             // eslint-disable-next-line no-console
             console.error(e);

js/js-export/constraints.js

@@ -1191,3 +1191,6 @@ JSInterface._methodArgConstraints = {
         ]
     ]
 };
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { JSInterface }; 
+}

js/loader.js

@@ -27,9 +27,95 @@ requirejs.config({
         prefixfree: "../bower_components/prefixfree/prefixfree.min",
         samples: "../sounds/samples",
         planet: "../js/planet",
-        tonejsMidi: "../node_modules/@tonejs/midi/dist/Midi"
+        tonejsMidi: "../node_modules/@tonejs/midi/dist/Midi",
+        i18next: "../node_modules/i18next/dist/umd/i18next.min",
+        i18nextHttpBackend: "../node_modules/i18next-http-backend/i18nextHttpBackend.min"
     },
     packages: []
 });
 
+requirejs(['i18next', 'i18nextHttpBackend'], function(i18next, i18nextHttpBackend) {
+
+    function updateContent() {
+        console.log('updateContent() called');  // Debugging line
+        const elements = document.querySelectorAll("[data-i18n]");
+
+        elements.forEach((element) => {
+            const key = element.getAttribute("data-i18n");
+            const translation = i18next.t(key);
+            element.textContent = translation;
+        });
+    }
+
+    async function initializeI18next() {
+        return new Promise((resolve, reject) => {
+            i18next
+                .use(i18nextHttpBackend)
+                .init({
+                    lng: 'hi',
+                    fallbackLng: 'en',
+                    keySeparator: false,
+                    nsSeparator: false,
+                    interpolation: {
+                        escapeValue: false
+                    },
+                    backend: {
+                        loadPath: '../locales/{{lng}}.json'
+                    }
+                }, function(err, t) {
+                    if (err) {
+                        console.error('i18next init failed:', err);
+                        reject(err);
+                    } else {
+                        console.log('i18next initialized');
+                        window.i18next = i18next;
+                        console.log('i18next Store:', i18next.store.data);
+                        resolve(i18next);
+                    }
+                });
+
+
+            i18next.on('initialized', function() {
+                console.log('i18next initialized');
+            });
+
+            i18next.on('loaded', function(loaded) {
+                console.log('i18next loaded:', loaded);
+            });
+
+
+
+
+        });
+    }
+
+    async function main() {
+        try {
+            await initializeI18next();
+
+            if (document.readyState === 'loading') {  
+                document.addEventListener("DOMContentLoaded", function() {
+                    console.log('DOMContentLoaded event triggered'); 
+                    updateContent();
+                });
+            } else {  // DOM is already fully loaded
+                console.log('DOM already loaded, updating content immediately'); 
+                updateContent();
+            }
+        } catch (error) {
+            console.error('Error initializing i18next:', error);
+        }
+    }
+
+    main();
+
+    i18next.on('languageChanged', function() {
+        updateContent();
+    });
+});
+
+
+
+
+
 requirejs(["utils/utils", "activity/activity"]);

js/utils/utils.js

@@ -100,48 +100,48 @@ function _(text) {
         for (let p = 0; p < replace.length; p++) {
             replaced = replaced.split(replace[p]).join(""); // Efficient replacement
         }
-        
-        //the replaced version is the version WITHOUT the unwanted characters.
+
+        // the replaced version is the version WITHOUT the unwanted characters.
         replaced = replaced.replace(/ /g, "-");
 
         if (localStorage.kanaPreference === "kana") {
-            const lang = document.webL10n.getLanguage();
+            const lang = i18next.language;
             if (lang === "ja") {
                 replaced = "kana-" + replaced;
             }
         }
 
         // first, we actually tried to find out if there was an existing translation with SAME case
-        let translated = document.webL10n.get(text);
+        let translated = i18next.t(text);
 
         // Takes, for example
         if ((!translated || translated === text) && replaced !== text) {
-            translated = document.webL10n.get(replaced);
+            translated = i18next.t(replaced);
         }
 
         // If still no translation is found, try the lowercase version
         if (!translated || translated === text) {
-            translated = document.webL10n.get(text.toLowerCase());
+            translated = i18next.t(text.toLowerCase());
         }
 
-        //if still no translation is found, try the initial caps translation too
+        // if still no translation is found, try the initial caps translation too
         if (!translated || translated === text) {
             const initialCaps = text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
-            translated = document.webL10n.get(initialCaps);
+            translated = i18next.t(initialCaps);
         }
 
-        //function returns the ORIGINAL case without any translation if no translation exists
+        // function returns the ORIGINAL case without any translation if no translation exists
         translated = translated || text;
 
         // this if ensures Correct LETTER CASING, for example, "Search" -> "Buscar" and "SEARCH" -> "BUSCAR" and "search" -> "buscar"
         if (text === text.toUpperCase()) {
-            //if the input is all uppercase, then we will return the translation in uppercase
+            // if the input is all uppercase, then we will return the translation in uppercase
             return translated.toUpperCase();
         } else if (text === text.toLowerCase()) {
-            //if the input is all lowercase,then return the translation in lowercase
+            // if the input is all lowercase, then return the translation in lowercase
             return translated.toLowerCase();
         } else if (text.charAt(0).toUpperCase() + text.slice(1).toLowerCase() === text) {
-            //if the input is in title case, then return the translation in title case
+            // if the input is in title case, then return the translation in title case
             return translated.charAt(0).toUpperCase() + translated.slice(1).toLowerCase();
         }
 
@@ -153,6 +153,7 @@ function _(text) {
     }
 }
 
+
 /**
  * A string formatting function using placeholder substitution.
  * @function