Merge branch 'pr/1408' into dev

activities/Falabracman.activity/index.html

@@ -5,7 +5,6 @@
 	<meta charset="utf-8" />
 	<title>Falabracman Activity</title>
 	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover" />
-	<link rel="prefetch" type="application/l10n" href="locale.ini">
 	<link rel="stylesheet" media="not screen and (device-width: 1200px) and (device-height: 900px)" href="lib/sugar-web/graphics/css/sugar-96dpi.css">
 	<link rel="stylesheet" media="screen and (device-width: 1200px) and (device-height: 900px)" href="lib/sugar-web/graphics/css/sugar-200dpi.css">
 	<link rel="stylesheet" href="css/activity.css">

activities/Falabracman.activity/js/activity.js

@@ -1,4 +1,4 @@
-define(["sugar-web/activity/activity", "sugar-web/env", "activity/game", "activity/resources", "activity/paladict", "data/en/dict.js", "webL10n", "tutorial"], function(activity, env, Game, Resources, Paladict, dictEn, webL10n, tutorial) {
+define(["sugar-web/activity/activity", "sugar-web/env", "activity/game", "activity/resources", "activity/paladict", "data/en/dict.js", "l10n", "tutorial"], function(activity, env, Game, Resources, Paladict, dictEn, l10n, tutorial) {
 
   // Manipulate the DOM only when it is ready.
   requirejs(['domReady!'], function(doc) {
@@ -48,19 +48,19 @@ define(["sugar-web/activity/activity", "sugar-web/env", "activity/game", "activi
     canvas.height = window.innerHeight - toolbarElem.offsetHeight - 3;
 
     var paladict = new Paladict(dictEn);
-    var game = new Game(canvas, resources, paladict, webL10n);
+    var game = new Game(canvas, resources, paladict, l10n);
 
     env.getEnvironment(function(env, environment) {
       currentEnv = environment;
 
       var defaultLanguage = (typeof chrome != 'undefined' && chrome.app && chrome.app.runtime) ? chrome.i18n.getUILanguage() : navigator.language;
       var language = environment.user ? environment.user.language : defaultLanguage;
-      webL10n.language.code = language;
+      l10n.init(language);
 
       //translating for setting Screen
       window.addEventListener('localized', function() {
-        document.getElementById('WordHeading').innerHTML = webL10n.get('Word');
-        document.getElementById('DictHeading').innerHTML = webL10n.get('Dictionary');
+        document.getElementById('WordHeading').innerHTML = l10n.get('Word');
+        document.getElementById('DictHeading').innerHTML = l10n.get('Dictionary');
 
         resources.onReady(function() {
           if (!environment.objectId) {
@@ -355,7 +355,7 @@ define(["sugar-web/activity/activity", "sugar-web/env", "activity/game", "activi
     deleteAllWordsButton.addEventListener('click', function() {
       if (!game.customDictWordEdit) {
         game.menuAudio.play();
-        var firstWord = webL10n.get('Play');
+        var firstWord = l10n.get('Play');
         game.customDict = [firstWord];
         wordInputElem.value = "";
         game.wordInSetting = null;

activities/Falabracman.activity/js/game.js

@@ -19,7 +19,7 @@ const framesSequence = {
   'DOWN': [0, 7, 0, 8],
 }
 
-function Game(canvas, resources, paladict, webL10n) {
+function Game(canvas, resources, paladict, l10n) {
 
   this.homeScreen = true;
   this.playScreen = false;
@@ -227,7 +227,7 @@ function Game(canvas, resources, paladict, webL10n) {
           ctx.fillStyle = "Black";
         }
         ctx.font = _this.homeScreenFontSize + "px ds_moster";
-        var text = webL10n.get(menu[i]);
+        var text = l10n.get(menu[i]);
         var menuTextObj = {
           x: canvas.width / 4,
           y: canvas.height / 2 + i * _this.homeScreenFontSize + i * 10,
@@ -260,12 +260,12 @@ function Game(canvas, resources, paladict, webL10n) {
 
   this.initializeCustomDict = function(customDict) {
     this.customDict = [];
-    this.customDictLang = webL10n.language.code;
+    this.customDictLang = l10n.language.code;
     var dict;
     if (customDict == null) {
       var len = paladict.defaultDict.length;
       for (var i = 0; i < len; i++) {
-        var word = webL10n.get(paladict.defaultDict[i]);
+        var word = l10n.get(paladict.defaultDict[i]);
         this.customDict.push(word);
       }
     } else {
@@ -499,7 +499,7 @@ function Game(canvas, resources, paladict, webL10n) {
     if (this.useCustomDict) {
       this.targetWord = targetWord.toUpperCase();
     } else {
-      this.targetWord = webL10n.get(targetWord).toUpperCase();
+      this.targetWord = l10n.get(targetWord).toUpperCase();
     }
 
     var tempArr = this.targetWord.split('');

activities/Falabracman.activity/lib/l10n.js

@@ -0,0 +1,55 @@
+define(['i18next.min', 'axios.min'], function (i18next, axios) {
+	const l10n = {language: {direction: "ltr"}};
+
+	l10n.init = async (lang) => {
+		await i18next.init({
+			lng: lang,
+			fallbackLng: "en",
+			resources: {}
+		}).then(() => {
+			l10n.language.direction = i18next.dir();
+			l10n.switchTo(lang);
+		});
+	};
+
+	l10n.get = (key, parameter) => {
+		return i18next.t(key, parameter);
+	};
+
+	l10n.loadLanguageResource = (lang) => {
+		return new Promise((resolve, reject) => {
+			axios.get("./locales/" + lang + ".json").then((response) => {
+				resolve(response.data);
+			}).catch((error) => {
+				console.log("Failed to load " + lang + " language: " + error);
+				resolve(null); // Resolve with null to indicate failure
+			});
+		});
+	};
+
+	l10n.switchTo = (lang) => {
+		if (!i18next.hasResourceBundle(lang, "translation")) {
+			console.log("Loading " + lang + " language");
+			l10n.loadLanguageResource(lang).then((locales) => {
+				if (locales !== null) {
+					i18next.addResourceBundle(lang, "translation", locales);
+					i18next.changeLanguage(lang);
+					triggerLocalizedEvent();
+				} else {
+					l10n.init("en");
+				}
+			});
+		} else {
+			i18next.changeLanguage(lang);
+			triggerLocalizedEvent();
+		}
+	};
+
+
+	function triggerLocalizedEvent() {
+		const event = new Event("localized");
+		window.dispatchEvent(event);
+	};
+
+	return l10n;
+});