Merge branch 'pr/1509' into dev

llaske · Feb 3, 2024 · a5984a6 · a5984a6
2 parents fa24135 + 3dfd318
commit a5984a6
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 25 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -34,6 +34,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Misaligned button in Speak activity #1504
 - Added pause functionality to Blockrain activity #1501
 - Fraction Bounce Activity, trick to cheat the score #1511
+- Tooltips not localized in Reflection activity #1508
 
 ## [1.7.0] - 2023-03-28
 ### Added

diff --git a/activities/Reflection.activity/index.html b/activities/Reflection.activity/index.html
@@ -23,26 +23,39 @@
 
 <body>
 <div id="main-toolbar" class="toolbar">
-  <button class="toolbutton" id="activity-button" title="My Activity"></button>
-  <button class="toolbutton" id="buddy-button" title="New Game with Buddy Colours"></button>
-  <button class="toolbutton" id="rainbow-button" title="New Game with Rainbow Colours"></button>
-  <button class="toolbutton" id="horizontal-button" title="New Game with Horizontal Symmetry"></button>
-  <button class="toolbutton" id="vertical-button" title="New Game with Vertical Symmetry"></button>
-  <button class="toolbutton" id="bilateral-button" title="New Game with
-  Bilateral Symmetry"></button>
-  <button class="toolbutton" id="robot-button" title="Turn on the Robot"></button>
+  <button class="toolbutton" id="activity-button" data-i18n="activity-button"></button>
+  <button class="toolbutton" id="buddy-button" data-i18n="buddy-button"></button>
+  <button class="toolbutton" id="rainbow-button" data-i18n="rainbow-button"></button>
+  <button class="toolbutton" id="horizontal-button" data-i18n="horizontal-button"></button>
+  <button class="toolbutton" id="vertical-button" data-i18n="vertical-button"></button>
+  <button class="toolbutton" id="bilateral-button" data-i18n="bilateral-button"></button>
+  <button class="toolbutton" id="robot-button" data-i18n="robot-button"></button>
   <!-- Add more buttons here --->
   <!-- Buttons with class="pull-right" will be right aligned -->
-  <button class="toolbutton pull-right" id="stop-button" title="Stop"></button>
-  <button class="toolbutton pull-right" id="fullscreen-button" title="Fullscreen"></button>
-  <button class="toolbutton pull-right" id="help-button" title="Tutorial"></button>
+  <button class="toolbutton pull-right" id="stop-button" data-i18n="stop-button"></button>
+  <button class="toolbutton pull-right" id="fullscreen-button" data-i18n="fullscreen-button"></button>
+  <button class="toolbutton pull-right" id="help-button" data-i18n="help-button"></button>
 </div>
 
 <!-- The content of your activity goes inside the canvas -->
 <div id="canvas">
 <canvas id="actualcanvas"></canvas>
 </div>
-<button class="toolbutton pull-right" id="unfullscreen-button" title="UnFullscreen"></button>
+<button class="toolbutton pull-right" id="unfullscreen-button" data-i18n="unfullscreen-button"></button>
 </body>
-
+<script type="text/javascript">
+	requirejs.config({
+		baseUrl: "js",
+		paths: {
+			activity: "../js"
+		}
+	});
+	var l10n = null;
+	requirejs(["../lib/l10n"], function (il10n) {
+		l10n = il10n;
+	});
+	window.addEventListener('localized', function() {
+		l10n.updateDocument();
+	}, false);
+</script>
 </html>
diff --git a/activities/Reflection.activity/js/activity.js b/activities/Reflection.activity/js/activity.js
@@ -15,14 +15,14 @@ define(["sugar-web/activity/activity", 'easeljs', 'tweenjs', 'activity/game', 'a
 				l10n.init(language);
 			});
 			act.getXOColor(function (error, colors) {
-				runactivity(act, doc, colors, env, datastore, tutorial);
+				runactivity(act, doc, colors, env, datastore, tutorial, l10n);
 			});
 		});
 	});
 
 });
 
-function runactivity(act, doc, colors, env, datastore, tutorial) {
+function runactivity(act, doc, colors, env, datastore, tutorial, l10n) {
 	var canvas;
 	var stage;
 	var g;
@@ -41,7 +41,7 @@ function runactivity(act, doc, colors, env, datastore, tutorial) {
 		function handleTick() {
 			stage.update();
 		}
-		g = new Game(stage,colors,doc,datastore,act);
+		g = new Game(stage,colors,doc,datastore,act,l10n);
 		setTimeout(function(){ g.init(); }, 500);
 		var hasBeenResized = false;
 		window.addEventListener('resize', resizeCanvas, false);

diff --git a/activities/Reflection.activity/js/game.js b/activities/Reflection.activity/js/game.js
@@ -1,4 +1,4 @@
-function Game(stage,xocolor,doc,datastore,activity){
+function Game(stage,xocolor,doc,datastore,activity,l10n){
 	this.margin = 0;
 	//These must be even
 	this.gridwidth = 10;
@@ -291,14 +291,14 @@ function Game(stage,xocolor,doc,datastore,activity){
 
 	this.robotOff = function(){
 		var robo = doc.getElementById("robot-button");
-		robo.title="Turn on the Robot";
+		robo.title=l10n.get("robot-button.title");
 		robo.style.backgroundImage = "url('./icons/robot-off.svg')";
 		this.robot = false;
 	}
 
 	this.robotOn = function(){
 		var robo = doc.getElementById("robot-button");
-		robo.title="Turn off the Robot";
+		robo.title=l10n.get("robot-button-off.title");
 		robo.style.backgroundImage = "url('./icons/robot-on.svg')";
 		this.robot = true;
 	}

diff --git a/activities/Reflection.activity/lib/l10n.js b/activities/Reflection.activity/lib/l10n.js
@@ -45,6 +45,21 @@ define(['i18next.min', 'axios.min'], function (i18next, axios) {
         }
     };
 
+    l10n.updateDocument = () => {
+        const elements = document.getElementsByTagName("*");
+        for (let i = 0; i < elements.length; i++) {
+            const element = elements[i];
+            const key = element.getAttribute("data-i18n");
+            //handle innerHTML
+            if (key !== null && i18next.exists(key)) {
+                element.innerHTML = i18next.t(key);
+            }
+            //handle tooltips
+            if (key !== null && i18next.exists(key+".title")) {
+                element.setAttribute('title', i18next.t(key+".title"));
+            }
+        }
+    };
 
     function triggerLocalizedEvent() {
         const event = new Event("localized");

diff --git a/activities/Reflection.activity/locales/en.json b/activities/Reflection.activity/locales/en.json
@@ -17,5 +17,17 @@
 	"TutoRobotTitle": "Robot mode",
 	"TutoRobotContent": "Click here to toggle Robot mode. In Robot mode when you click on a token the symmetric token color is changed at the same time. Too easy!",
 	"TutoCanvasTitle": "Board",
-	"TutoCanvasContent": "Click on tokens to change their colors until the image become symmetric"
+	"TutoCanvasContent": "Click on tokens to change their colors until the image become symmetric",
+	"activity-button.title": "Reflection Activity",
+	"buddy-button.title": "New Game with Buddy Colours",
+	"rainbow-button.title": "New Game with Rainbow Colours",
+	"horizontal-button.title": "New Game with Horizontal Symmetry",
+	"vertical-button.title": "New Game with Vertical Symmetry",
+	"bilateral-button.title": "New Game with Bilateral Symmetry",
+	"robot-button.title": "Turn on the Robot",
+	"robot-button-off.title": "Turn off the Robot",
+	"stop-button.title": "Stop",
+	"fullscreen-button.title": "Fullscreen",
+	"help-button.title": "Tutorial",
+	"unfullscreen-button.title": "UnFullscreen"
 }
diff --git a/activities/Reflection.activity/locales/es.json b/activities/Reflection.activity/locales/es.json
@@ -17,5 +17,17 @@
 	"TutoRobotTitle": "Modo \"Robot\"",
 	"TutoRobotContent": "Haz clic aquí para activar el modo \"Robot\". En este modo, al hacer clic en una ficha, el color de la ficha simétrica cambiará a la vez. ¡Demasiado fácil!",
 	"TutoCanvasTitle": "Tablero",
-	"TutoCanvasContent": "Haz clic en las fichas para cambiar sus colores y hacer que la imagen sea simétrica"
-}
+	"TutoCanvasContent": "Haz clic en las fichas para cambiar sus colores y hacer que la imagen sea simétrica",
+	"activity-button.title": "Reflection Activity",
+	"buddy-button.title": "Nuevo Juego con Colores de Amigo",
+	"rainbow-button.title": "Nuevo Juego con Colores Arcoíris",
+	"horizontal-button.title": "Nuevo Juego con Simetría Horizontal",
+	"vertical-button.title": "Nuevo Juego con Simetría Vertical",
+	"bilateral-button.title": "Nuevo Juego con Simetría Bilateral",
+	"robot-button.title": "Activar el Robot",
+	"robot-button-off.title": "Desactivar el robot",
+	"stop-button.title": "Detener",
+	"fullscreen-button.title": "Pantalla Completa",
+	"help-button.title": "Tutorial",
+	"unfullscreen-button.title": "Salir de Pantalla Completa"
+}
diff --git a/activities/Reflection.activity/locales/fr.json b/activities/Reflection.activity/locales/fr.json
@@ -17,5 +17,17 @@
 	"TutoRobotTitle": "Mode Robot",
 	"TutoRobotContent": "Cliquez ici pour activer/désactiver le mode Robot. En mode Robot, quand vous cliquez sur un jeton, le jeton symétrique change de couleur en même temps. Trop facile !",
 	"TutoCanvasTitle": "Plateau",
-	"TutoCanvasContent": "Cliquez sur les jetons pour changer leurs couleurs jusqu'à ce que l'image devienne symétrique"
-}
+	"TutoCanvasContent": "Cliquez sur les jetons pour changer leurs couleurs jusqu'à ce que l'image devienne symétrique",
+	"activity-button.title": "Activité Reflection",
+	"buddy-button.title": "Nouveau Jeu avec Couleurs de Compagnon",
+	"rainbow-button.title": "Nouveau Jeu avec Couleurs Arc-en-ciel",
+	"horizontal-button.title": "Nouveau Jeu avec Symétrie Horizontale",
+	"vertical-button.title": "Nouveau Jeu avec Symétrie Verticale",
+	"bilateral-button.title": "Nouveau Jeu avec Symétrie Bilatérale",
+	"robot-button.title": "Activer le Robot",
+	"robot-button-off.title": "Désactiver le Robot",
+	"stop-button.title": "Arrêter",
+	"fullscreen-button.title": "Plein écran",
+	"help-button.title": "Tutoriel",
+	"unfullscreen-button.title": "Quitter le Plein écran"
+}
diff --git a/activities/Reflection.activity/locales/pl.json b/activities/Reflection.activity/locales/pl.json
@@ -17,5 +17,17 @@
 	"TutoRobotTitle": "Robot",
 	"TutoRobotContent": "Kliknij tutaj aby zmieniać kolory bo każdej stronie osi w tym samym czasie.",
 	"TutoCanvasTitle": "Plansza",
-	"TutoCanvasContent": "Musisz tak zmodyfikować obrazek aby był on symetryczny względem każdej osi."
+	"TutoCanvasContent": "Musisz tak zmodyfikować obrazek aby był on symetryczny względem każdej osi.",
+	"activity-button.title": "Reflection Activity",
+	"buddy-button.title": "Nowa Gra z Kolorami Kolegi",
+	"rainbow-button.title": "Nowa Gra z Kolorami Tęczy",
+	"horizontal-button.title": "Nowa Gra z Symetrią Poziomą",
+	"vertical-button.title": "Nowa Gra z Symetrią Pionową",
+	"bilateral-button.title": "Nowa Gra z Symetrią Dwustronną",
+	"robot-button.title": "Włącz Robota",
+	"robot-button-off.title": "Wyłącz robota",
+	"stop-button.title": "Zatrzymaj",
+	"fullscreen-button.title": "Pełny Ekran",
+	"help-button.title": "Samouczek",
+	"unfullscreen-button.title": "Wyjdź z Pełnego Ekranu"
 }