Adds a zoom palette to Color My World Activity

activities/ColorMyWorld.activity/css/activity.css

@@ -23,6 +23,29 @@ body {
 	background-image: url(../img/pause.png);
 	title:'pause';
 }
+#zoom-button {
+	background-image: url(../icons/zoom.svg);
+}
+.zoombuttons-container {
+   display:flex;
+}
+.zoombuttons {
+	width:55px;
+	height:55px;
+}
+.zoombuttons:hover {
+	background-color: #808080;
+}
+#zoom-in-button {
+	background-image: url(../icons/zoom-in.svg);
+
+}
+#zoom-out-button {
+	background-image: url(../icons/zoom-out.svg);
+}
+#zoom-original-button {
+	background-image: url(../icons/zoom-original.svg);
+}
 #main-toolbar #help-button {
   background-image: url(../icons/help.svg);
 }

activities/ColorMyWorld.activity/index.html

@@ -37,6 +37,7 @@
   <button class="toolbutton" id="mode-button" title="Mode"></button>
   <button class="toolbutton" id="color-button" title="Color"></button>
   <button class="toolbutton" id="run-button" title="Play"></button>
+  <button class="toolbutton" id="zoom-button" title="Zoom"></button>
 
 	<div id="persistent_title_div"></div>
 

activities/ColorMyWorld.activity/js/activity.js

@@ -5,9 +5,9 @@ define([
 		"activity/ol",
 		"activity/hammer.min",
 		"l10n",
-		"config","colormyworld","map","roll_up_div","util","languagepalette","sugar-web/graphics/colorpalette","filterpalette","modepalette","tutorial","sugar-web/env"
+		"config","colormyworld","map","roll_up_div","util","languagepalette","sugar-web/graphics/colorpalette","filterpalette","modepalette","tutorial","sugar-web/env","./palettes/zoompalette"
 	],
-	function (activity,messages,print,jquery,ol,hammer,l10n,config,colormyworld,map,rollupdiv,util,languagepalette,colorpalette,filterpalette,modepalette,tutorial,env){
+	function (activity,messages,print,jquery,ol,hammer,l10n,config,colormyworld,map,rollupdiv,util,languagepalette,colorpalette,filterpalette,modepalette,tutorial,env,zoompalette){
 
 	// Manipulate the DOM only when it is ready.
 	requirejs(['domReady!'], function (doc) {
@@ -74,6 +74,9 @@ define([
 			colormyworld.setRGBColorString(e.detail.color);
 		});
 
+		var zoomButton = document.getElementById("zoom-button");
+		var zoomButtonPalette = new zoompalette.ZoomPalette(zoomButton);
+
 		var modeButton = document.getElementById("mode-button");
 		modepalette = new modepalette.ModePalette(modeButton, undefined);
 		colormyworld.change_areaCB(true,'World');

activities/ColorMyWorld.activity/js/palettes/zoompalette.html

@@ -0,0 +1,5 @@
+<div class="zoombuttons-container">
+    <div class="zoombuttons" id = "zoom-in-button"></div>
+    <div class="zoombuttons" id = "zoom-out-button"></div>
+    <div class="zoombuttons" id = "zoom-original-button"></div>
+</div>

activities/ColorMyWorld.activity/js/palettes/zoompalette.js

@@ -0,0 +1,56 @@
+define([
+	'sugar-web/graphics/palette',
+	'text!activity/palettes/zoompalette.html',
+  ], function (palette, template) {
+	var zoompalette = {}
+	zoompalette.ZoomPalette = function (invoker, primaryText) {
+	  palette.Palette.call(this, invoker, primaryText)
+	  this.getPalette().id = 'zoom-palette'
+
+	  var containerElem = document.createElement('div')
+	  containerElem.innerHTML = template
+
+	  this.setContent([containerElem])
+
+	  var zoomIn = document.getElementById('zoom-in-button')
+	  var zoomOut = document.getElementById('zoom-out-button')
+	  var zoomOriginal = document.getElementById('zoom-original-button')
+
+	  zoomIn.addEventListener('click', function () {
+		  var view=window.map.getView();
+		  var zoom = view.getZoom();
+		  view.animate({zoom:zoom+1})
+	  })
+
+	  zoomOut.addEventListener('click', function () {
+		  var view=window.map.getView();
+		  var zoom = view.getZoom();
+		  view.animate({zoom:zoom-1})
+	  })
+
+	  zoomOriginal.addEventListener('click', function () {
+		  var view=window.map.getView();
+		  view.animate({zoom:2.3299654139527806})
+	  })
+
+	}
+
+	var addEventListener = function (type, listener, useCapture) {
+	  return this.getPalette().addEventListener(type, listener, useCapture)
+	}
+
+	zoompalette.ZoomPalette.prototype = Object.create(
+	  palette.Palette.prototype,
+	  {
+		addEventListener: {
+		  value: addEventListener,
+		  enumerable: true,
+		  configurable: true,
+		  writable: true,
+		},
+	  },
+	)
+
+	return zoompalette
+  })
+

activities/ColorMyWorld.activity/lib/tutorial.js

@@ -25,6 +25,11 @@ define(["l10n"], function (l10n) {
 				element: "#run-button",
 				title: l10n.get("TutoRunTitle"),
 				intro: l10n.get("TutoRunContent")
+			},
+			{
+				element: "#zoom-button",
+				title: l10n.get("TutoZoomTitle"),
+				intro: l10n.get("TutoZoomContent")
 			}
 		];
 

activities/ColorMyWorld.activity/locales/cn.json

@@ -288,6 +288,8 @@
 	"TutoColorContent": "Click here to choose the current color to use to color countries",
 	"TutoRunTitle": "Run",
 	"TutoRunContent": "If you selected Interactive or Tour play mode, click here to start running the game",
+	"TutoZoomTitle": "Zoom",
+	"TutoZoomContent":"Click on this palette to zoom in/zoom out the item.",
 	"Vietnam": "Vietnam",
 	"Somaliland": "Somaliland",
 	"West_Bank": "West_Bank",

activities/ColorMyWorld.activity/locales/de.json

@@ -287,6 +287,8 @@
 	"TutoColorContent": "Click here to choose the current color to use to color countries",
 	"TutoRunTitle": "Run",
 	"TutoRunContent": "If you selected Interactive or Tour play mode, click here to start running the game",
+	"TutoZoomTitle": "Zoom",
+	"TutoZoomContent":"Click on this palette to zoom in/zoom out.",
 	"Vietnam": "Vietnam",
 	"Somaliland": "Somaliland",
 	"West_Bank": "West_Bank",

activities/ColorMyWorld.activity/locales/en.json

@@ -292,5 +292,7 @@
 	"TutoColorContent": "Click here to choose the current color to use to color countries",
 	"TutoRunTitle": "Run",
 	"TutoRunContent": "If you selected Interactive or Tour play mode, click here to start running the game",
+	"TutoZoomTitle": "Zoom",
+	"TutoZoomContent":"Click on this palette to zoom in/zoom out.",
 	"Vietnam": "Vietnam"
 }

activities/ColorMyWorld.activity/locales/es.json

@@ -288,6 +288,8 @@
 	"TutoColorContent": "Haz clic aquí para elegir el color con el que colorear los países",
 	"TutoRunTitle": "Ejecutar",
 	"TutoRunContent": "Si has seleccionado los modos \"Interactivo\" o \"Gira\", haz clic aquí para ejecutar el juego",
+	"TutoZoomTitle": "Zoom",
+	"TutoZoomContent":"Haga clic en esta paleta para acercar o alejar.",
 	"Vietnam": "Vietnam",
 	"Somaliland": "Somalilandia",
 	"West_Bank": "West_Bank",

activities/ColorMyWorld.activity/locales/fr.json

@@ -289,6 +289,8 @@
 	"TutoColorContent": "Cliquez ici pour choisir la couleur actuelle utilisée pour colorier les pays",
 	"TutoRunTitle": "Lancer",
 	"TutoRunContent": "Si vous avez choisi le mode de jeu Interactif ou Visite, cliquez ici pour démarrer le jeu",
+	"TutoZoomTitle": "Zoom",
+	"TutoZoomContent":"Cliquez sur cette palette pour zoomer/dézoomer.",
 	"Vietnam": "Vietnam",
 	"Somaliland": "Somaliland",
 	"West_Bank": "Cisjordanie"

activities/ColorMyWorld.activity/locales/gr.json

@@ -288,6 +288,8 @@
 	"TutoColorContent": "Click here to choose the current color to use to color countries",
 	"TutoRunTitle": "Run",
 	"TutoRunContent": "If you selected Interactive or Tour play mode, click here to start running the game",
+	"TutoZoomTitle": "Zoom",
+	"TutoZoomContent":"Click on this palette to zoom in/zoom out.",
 	"Vietnam": "Vietnam",
 	"Somaliland": "Somaliland",
 	"West_Bank": "West_Bank",

activities/ColorMyWorld.activity/locales/it.json

@@ -288,6 +288,8 @@
 	"TutoColorContent": "Click here to choose the current color to use to color countries",
 	"TutoRunTitle": "Run",
 	"TutoRunContent": "If you selected Interactive or Tour play mode, click here to start running the game",
+	"TutoZoomTitle": "Zoom",
+	"TutoZoomContent":"Click on this palette to zoom in/zoom out.",
 	"Vietnam": "Vietnam",
 	"Somaliland": "Somaliland",
 	"West_Bank": "West_Bank",

activities/ColorMyWorld.activity/locales/sw.json

@@ -288,6 +288,8 @@
 	"TutoColorContent": "Click here to choose the current color to use to color countries",
 	"TutoRunTitle": "Run",
 	"TutoRunContent": "If you selected Interactive or Tour play mode, click here to start running the game",
+	"TutoZoomTitle": "Zoom",
+	"TutoZoomContent":"Click on this palette to zoom in/zoom out.",
 	"Vietnam": "Vietnam",
 	"Somaliland": "Somaliland",
 	"West_Bank": "West_Bank",

activities/ColorMyWorld.activity/locales/th.json

@@ -288,6 +288,8 @@
 	"TutoColorContent": "Click here to choose the current color to use to color countries",
 	"TutoRunTitle": "Run",
 	"TutoRunContent": "If you selected Interactive or Tour play mode, click here to start running the game",
+	"TutoZoomTitle": "Zoom",
+	"TutoZoomContent":"Click on this palette to zoom in/zoom out.",
 	"Vietnam": "Vietnam",
 	"Somaliland": "Somaliland",
 	"West_Bank": "West_Bank",