Language user selectable in app

src/js/localization.js

@@ -6,33 +6,36 @@
 
 var i18n = {}
 
+const languagesAvailables = ['ca', 'de', 'en', 'es', 'fr', 'ko'];
+
 /**
  * Functions that depend on the i18n framework
  */
 i18n.init = function(cb) {
 
-    var defaultLocale = window.navigator.userLanguage || window.navigator.language;
+    getStoredUserLocale(function(userLanguage){
 
-    i18next
-        .use(i18nextXHRBackend)
-        .init({
-            lng: defaultLocale,
-            getAsync: false,
-            debug: true,
-            ns: ['messages'],
-            defaultNS:['messages'],
-            fallbackLng: 'en',
-            backend: { loadPath: '/_locales/{{lng}}/{{ns}}.json' }
-            }, function(err, t) {
-                if (err !== undefined) {
-                    console.error('Error loading i18n ' + err);
-                } else {
-                    console.log('i18n system loaded');
-                }
-                if (cb !== undefined) {
-                    cb();
-                }
-        });
+        i18next
+            .use(i18nextXHRBackend)
+            .init({
+                lng: userLanguage,
+                getAsync: false,
+                debug: true,
+                ns: ['messages'],
+                defaultNS:['messages'],
+                fallbackLng: 'en',
+                backend: { loadPath: '/_locales/{{lng}}/{{ns}}.json' }
+                }, function(err, t) {
+                    if (err !== undefined) {
+                        console.error('Error loading i18n ' + err);
+                    } else {
+                        console.log('i18n system loaded');
+                    }
+                    if (cb !== undefined) {
+                        cb();
+                    }
+            });
+    });
 }
 
 i18n.getMessage = function(messageID, parameters) {
@@ -43,10 +46,12 @@ i18n.getMessage = function(messageID, parameters) {
             translatedString = translatedString.replace('$' + (index + 1), element);
         });
     }
-    
-    return translatedString;
 
-    
+    return translatedString;
+}
+
+i18n.getLanguagesAvailables = function() {
+    return languagesAvailables;
 }
 
 /**
@@ -93,3 +98,28 @@ i18n.localizePage = function() {
 
     return localized;
 }
+
+/*
+ * Reads the chrome config, if DEFAULT or there is no config stored,
+ * returns the current locale to the callback
+ */
+function getStoredUserLocale(cb) {
+    chrome.storage.local.get('userLanguageSelect', function (result) {
+        var userLanguage = 'DEFAULT';
+        if (result.userLanguageSelect) {
+            userLanguage = result.userLanguageSelect
+        } 
+
+        userLanguage = getValidLocale(userLanguage);
+
+        cb(userLanguage);
+    })
+}
+
+function getValidLocale(userLocale) {
+
+    if (userLocale == 'DEFAULT') {
+        userLocale = window.navigator.userLanguage || window.navigator.language;
+    } 
+    return userLocale;
+}

src/js/main.js

@@ -13,6 +13,7 @@ $(document).ready(function () {
 
 //Process to execute to real start the app
 function startProcess() {
+
     // translate to user-selected language
     i18n.localizePage();
 
@@ -232,6 +233,29 @@ function startProcess() {
                     $('div.checkForConfiguratorUnstableVersions').hide();
                 }
 
+                chrome.storage.local.get('userLanguageSelect', function (result) {
+
+                    var userLanguage_e = $('div.userLanguage select');
+                    var languagesAvailables = i18n.getLanguagesAvailables();
+                    userLanguage_e.append('<option value="DEFAULT">' + i18n.getMessage('language_default') + '</option>');
+                    userLanguage_e.append('<option disabled>------</option>');
+                    languagesAvailables.forEach(function(element) {
+                        var languageName = i18n.getMessage('language_' + element);
+                        userLanguage_e.append('<option value="' + element + '">' + languageName + '</option>');
+                    });
+                    
+                    if (result.userLanguageSelect) {
+                        userLanguage_e.val(result.userLanguageSelect);
+                    }
+                    
+                    userLanguage_e.change(function () {
+                        var languageSelected = $(this).val();
+
+                        // Select the new language, a restart is required
+                        chrome.storage.local.set({'userLanguageSelect': languageSelected});
+                    });
+                });
+
                 function close_and_cleanup(e) {
                     if (e.type == 'click' && !$.contains($('div#options-window')[0], e.target) || e.type == 'keyup' && e.keyCode == 27) {
                         $(document).unbind('click keyup', close_and_cleanup);
@@ -364,7 +388,7 @@ function startProcess() {
             }
         }).change();
     });
-}
+};
 
 function checkForConfiguratorUpdates() {
     var releaseChecker = new ReleaseChecker('configurator', 'https://api.github.com/repos/betaflight/betaflight-configurator/releases');
@@ -602,7 +626,6 @@ function getManifestVersion(manifest) {
 }
 
 function openNewWindowsInExternalBrowser() {
- // Open new windows in external browser
     try {
         var gui = require('nw.gui');
 
@@ -615,6 +638,6 @@ function openNewWindowsInExternalBrowser() {
           policy.ignore();
         });
     } catch (ex) {
-        console.warn("require does not exist, maybe inside chrome");
+        console.log("require does not exist, maybe inside chrome");
     }
 }