Merge branch 'pr/1452' into dev

activities/XOEditor.activity/index.html

@@ -13,7 +13,6 @@
   <link rel="stylesheet" href="./css/activity.css">
 	<link rel="stylesheet" href="./css/introjs.css">
 	<script src="./lib/intro.js"></script>
-  <link rel="prefetch" type="application/l10n" href="locale.ini">
   <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
 
 

activities/XOEditor.activity/js/activity.js

@@ -4,15 +4,15 @@ define(["sugar-web/activity/activity",'easeljs','tweenjs','activity/editor','act
 	requirejs(['domReady!'], function (doc) {
 
 		// Initialize the activity.
-		requirejs(['sugar-web/graphics/xocolor',"sugar-web/env","sugar-web/datastore","tutorial","webL10n"], function(xocol,env,datastore,tutorial,webL10n) {
+		requirejs(['sugar-web/graphics/xocolor',"sugar-web/env","sugar-web/datastore","tutorial","l10n"], function(xocol,env,datastore,tutorial,l10n) {
 			act.setup();
 			env.getEnvironment(function(err, environment) {
 				currentenv = environment;
 
 				// Set current language to Sugarizer
 				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);
 			});
 			act.getXOColor(function (error, colors) {
 				runactivity(act,xocol,doc,colors,env,datastore,tutorial);
@@ -69,7 +69,7 @@ function runactivity(act,xocolor,doc,colors,env,datastore,tutorial){
         document.getElementById("stop-button").addEventListener('click', function (event) {
 	        e.stop();
 		});
-		
+
 		// Full screen.
         document.getElementById("fullscreen-button").addEventListener('click', function() {
             document.getElementById("main-toolbar").style.opacity = 0;
@@ -100,4 +100,3 @@ function runactivity(act,xocolor,doc,colors,env,datastore,tutorial){
 	}
 	init();
 }
-

activities/XOEditor.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;
+});

activities/XOEditor.activity/lib/sugar-web/activity/activity.js

@@ -1,12 +1,11 @@
-define(["webL10n",
-        "sugar-web/activity/shortcut",
+define(["sugar-web/activity/shortcut",
         "sugar-web/bus",
         "sugar-web/env",
         "sugar-web/datastore",
 		"sugar-web/presence",
         "sugar-web/graphics/icon",
         "sugar-web/graphics/activitypalette"], function (
-    l10n, shortcut, bus, env, datastore, presence, icon, activitypalette) {
+    shortcut, bus, env, datastore, presence, icon, activitypalette) {
 
     'use strict';
 
@@ -22,8 +21,6 @@ define(["webL10n",
     activity.setup = function () {
         bus.listen();
 
-        l10n.start();
-
         function sendPauseEvent() {
 			var pauseEvent = document.createEvent("CustomEvent");
 			pauseEvent.initCustomEvent('activityPause', false, false, {

activities/XOEditor.activity/lib/sugar-web/package.json

@@ -2,7 +2,6 @@
   "volo": {
     "baseUrl": "lib",
     "dependencies": {
-      "webL10n": "github:sugarlabs/webL10n",
       "mustache": "github:janl/mustache.js/0.7.2",
       "text": "github:requirejs/text"
     }

activities/XOEditor.activity/lib/sugar-web/test/loader.js

@@ -9,8 +9,7 @@ requirejs.config({
     paths: {
         "sugar-web": ".",
         "mustache": "lib/mustache",
-        "text": "lib/text",
-        "webL10n": "lib/webL10n"
+        "text": "lib/text"
     },
 
     // ask Require.js to load these files (all our tests)

activities/XOEditor.activity/lib/tutorial.js

@@ -1,4 +1,4 @@
-define(["webL10n"], function(l10n) {
+define(["l10n"], function(l10n) {
 	var tutorial = {};
 
 	tutorial.start = function() {
@@ -36,7 +36,7 @@ define(["webL10n"], function(l10n) {
 				document.querySelector(step.element).style.display != "none" &&
 				document.querySelector(step.element).getBoundingClientRect().y != 0)
 		  );
-	
+
 		  introJs()
 		  .setOptions({
 			tooltipClass: "customTooltip",