Merge pull request #1069 from jitsi/update-i18next

Updates i18next and bundles default translations.

app.js

@@ -29,6 +29,7 @@ import API from './modules/API/API';
 
 import UIEvents from './service/UI/UIEvents';
 import getTokenData from "./modules/TokenData/TokenData";
+import translation from "./modules/translation/translation";
 
 /**
  * Tries to push history state with the following parameters:
@@ -95,6 +96,7 @@ const APP = {
     UI,
     settings,
     conference,
+    translation,
     /**
      * After the APP has been initialized provides utility methods for dealing
      * with the conference room URL(address).
@@ -106,7 +108,6 @@ const APP = {
     init () {
         this.keyboardshortcut =
             require("./modules/keyboardshortcut/keyboardshortcut");
-        this.translation = require("./modules/translation/translation");
         this.configFetch = require("./modules/config/HttpConfigFetch");
         this.tokenData = getTokenData();
     }

lang/languages.json

@@ -1,6 +1,5 @@
 {
     "en": "English",
-
     "bg": "Bulgarian",
     "de": "German",
     "es": "Spanish",

modules/UI/side_pannels/settings/SettingsMenu.js

@@ -105,6 +105,9 @@ export default {
 
             APP.translation.translateElement(selectEl);
 
+            APP.translation.addLanguageChangedListener(
+                lng => selectInput[0].dataset.i18n = `languages:${lng}`);
+
             UIUtil.showElement(wrapperId);
         }
         // DEVICES LIST

modules/translation/translation.js

@@ -1,15 +1,16 @@
 /* global $, require, config, interfaceConfig */
-var i18n = require("i18next-client");
-var languages = require("../../service/translation/languages");
-var DEFAULT_LANG = languages.EN;
+import i18n from 'i18next';
+import XHR from 'i18next-xhr-backend';
+import jqueryI18next from 'jquery-i18next';
+import languagesR from "../../lang/languages.json";
+import mainR from "../../lang/main.json";
+import languages from "../../service/translation/languages";
 
-i18n.addPostProcessor(
-    "resolveAppName",
-    value => value.replace("__app__", interfaceConfig.APP_NAME));
+const DEFAULT_LANG = languages.EN;
 
-var defaultOptions = {
-    detectLngQS: "lang",
-    useCookie: false,
+const defaultOptions = {
+    compatibilityAPI: 'v1',
+    compatibilityJSON: 'v1',
     fallbackLng: DEFAULT_LANG,
     load: "unspecific",
     resGetPath: 'lang/__ns__-__lng__.json',
@@ -21,48 +22,11 @@ var defaultOptions = {
     fallbackOnNull: true,
     fallbackOnEmpty: true,
     useDataAttrOptions: true,
-    app: interfaceConfig.APP_NAME,
-    getAsync: true,
-    defaultValueFromContent: false,
-    customLoad: function(lng, ns, options, done) {
-        var resPath = "lang/__ns__-__lng__.json";
-        if(lng === languages.EN)
-            resPath = "lang/__ns__.json";
-        var url = i18n.functions.applyReplacement(resPath,
-                                                 { lng: lng, ns: ns });
-        i18n.functions.ajax({
-            url: url,
-            success: function(data) {
-                i18n.functions.log('loaded: ' + url);
-                done(null, data);
-            },
-            error : function(xhr, status, error) {
-                if ((status && status == 200) ||
-                    (xhr && xhr.status && xhr.status == 200)) {
-                    // file loaded but invalid json, stop waste time !
-                    i18n.functions.error('There is a typo in: ' + url);
-                } else if ((status && status == 404) ||
-                    (xhr && xhr.status && xhr.status == 404)) {
-                    i18n.functions.log('Does not exist: ' + url);
-                } else {
-                    var theStatus = status ? status :
-                        ((xhr && xhr.status) ? xhr.status : null);
-                    i18n.functions.log(theStatus + ' when loading ' + url);
-                }
-
-                done(error, {});
-            },
-            dataType: "json",
-            async : options.getAsync
-        });
-    }
-    //              options for caching
-//                useLocalStorage: true,
-//                localStorageExpirationTime: 86400000 // in ms, default 1 week
+    app: interfaceConfig.APP_NAME
 };
 
 function initCompleted() {
-    $("[data-i18n]").i18n();
+    $("[data-i18n]").localize();
 }
 
 function getLangFromQuery() {
@@ -78,8 +42,8 @@ function getLangFromQuery() {
     return null;
 }
 
-module.exports = {
-    init: function (settingsLang) {
+class Translation {
+    init (settingsLang) {
         let options = defaultOptions;
 
         let lang = getLangFromQuery() || settingsLang || config.defaultLanguage;
@@ -98,31 +62,48 @@ module.exports = {
             options.lng = lang;
         }
 
-        i18n.init(options, initCompleted);
-    },
-    setLanguage: function (lang) {
+        i18n.use(XHR)
+            .use({
+                type: 'postProcessor',
+                name: "resolveAppName",
+                process: (res, key) => {
+                    return i18n.t(key, {app: options.app});
+                }
+            })
+            .init(options, initCompleted);
+        // adds default language which is preloaded from code
+        i18n.addResourceBundle(DEFAULT_LANG, 'main', mainR, true, true);
+        i18n.addResourceBundle(
+            DEFAULT_LANG, 'languages', languagesR, true, true);
+        jqueryI18next.init(i18n, $, {useOptionsAttr: true});
+    }
+
+    setLanguage (lang) {
         if(!lang)
             lang = DEFAULT_LANG;
         i18n.setLng(lang, defaultOptions, initCompleted);
-    },
-    getCurrentLanguage: function () {
-        return i18n.lng();
-    },
-    translateElement: function (selector, options) {
-        // i18next expects undefined if options are missing, check if its null
-        selector.i18n(
-            options === null ? undefined : options);
-    },
-    generateTranslationHTML: function (key, options) {
-        var str = "<span data-i18n=\"" + key + "\"";
-        if (options) {
-            str += " data-i18n-options='" + JSON.stringify(options) + "'";
-        }
-        str += ">";
-        // i18next expects undefined if options ARE missing, check if its null
-        str += i18n.t(key, options === null ? undefined : options);
-        str += "</span>";
-        return str;
-
     }
-};
+
+    getCurrentLanguage () {
+        return i18n.lng();
+    }
+
+    translateElement (selector, options) {
+        // i18next expects undefined if options are missing, check if its null
+        selector.localize(
+            options === null ? undefined : options);
+    }
+
+    generateTranslationHTML (key, options) {
+        let optAttr = options
+            ? ` data-i18n-options='${JSON.stringify(options)}'` : "";
+        let text = i18n.t(key, options === null ? undefined : options);
+        return `<span data-i18n="${key}"${optAttr}>${text}</span>`;
+    }
+
+    addLanguageChangedListener(listener) {
+        i18n.on('languageChanged', listener);
+    }
+}
+
+export default new Translation();

package.json

@@ -21,7 +21,10 @@
     "autosize": "^1.18.13",
     "bootstrap": "3.1.1",
     "events": "*",
-    "i18next-client": "1.7.7",
+    "i18next": "3.4.4",
+    "i18next-xhr-backend": "1.1.0",
+    "jquery-i18next": "1.1.0",
+    "json-loader": "0.5.4",
     "jQuery-Impromptu": "trentrichardson/jQuery-Impromptu#v6.0.0",
     "jquery": "~2.1.1",
     "jquery-contextmenu": "*",

service/translation/languages.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
     getLanguages : function () {
         var languages = [];
         for (var lang in this)

webpack.config.js

@@ -58,6 +58,11 @@ var config = {
                 name: '[path][name].[ext]'
             },
             test: /\.(gif|png|svg)$/
+        },{
+            //Adds the ability to import json files.
+            loader: 'json',
+            exclude: __dirname + '/node_modules/',
+            test: /\.json$/
         }],
         noParse: [
             // Do not parse the files of the Strophe.js library or at least