diff --git a/CHANGELOG.md b/CHANGELOG.md index ece8f6645..5072a4f82 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - Message Updation in Fraction Activity #1453 - LabyrinthJS: No selection-indicator is visible while linking ideas #1585 - Gear unexpected behavior of Play toolbar icon #1600 +- Add a zoom-in and zoom-out button in ColorMyWorld activity #1593 ## [1.8.0] - 2024-04-10 ### Added diff --git a/activities/ColorMyWorld.activity/css/activity.css b/activities/ColorMyWorld.activity/css/activity.css index 711174a64..a7d251ef9 100644 --- a/activities/ColorMyWorld.activity/css/activity.css +++ b/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); } diff --git a/activities/ColorMyWorld.activity/icons/zoom-in.svg b/activities/ColorMyWorld.activity/icons/zoom-in.svg new file mode 100644 index 000000000..803190341 --- /dev/null +++ b/activities/ColorMyWorld.activity/icons/zoom-in.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/activities/ColorMyWorld.activity/icons/zoom-original.svg b/activities/ColorMyWorld.activity/icons/zoom-original.svg new file mode 100644 index 000000000..2ccb5c512 --- /dev/null +++ b/activities/ColorMyWorld.activity/icons/zoom-original.svg @@ -0,0 +1,11 @@ + + +]> + + + + + + + \ No newline at end of file diff --git a/activities/ColorMyWorld.activity/icons/zoom-out.svg b/activities/ColorMyWorld.activity/icons/zoom-out.svg new file mode 100644 index 000000000..1e6a68113 --- /dev/null +++ b/activities/ColorMyWorld.activity/icons/zoom-out.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/activities/ColorMyWorld.activity/icons/zoom.svg b/activities/ColorMyWorld.activity/icons/zoom.svg new file mode 100644 index 000000000..242a16a70 --- /dev/null +++ b/activities/ColorMyWorld.activity/icons/zoom.svg @@ -0,0 +1,60 @@ + +image/svg+xml + + + + + + + \ No newline at end of file diff --git a/activities/ColorMyWorld.activity/index.html b/activities/ColorMyWorld.activity/index.html index 6054f3510..4a0fe61df 100644 --- a/activities/ColorMyWorld.activity/index.html +++ b/activities/ColorMyWorld.activity/index.html @@ -37,6 +37,7 @@ +
diff --git a/activities/ColorMyWorld.activity/js/activity.js b/activities/ColorMyWorld.activity/js/activity.js index 04efaaf82..40bf9cc32 100644 --- a/activities/ColorMyWorld.activity/js/activity.js +++ b/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'); diff --git a/activities/ColorMyWorld.activity/js/palettes/zoompalette.html b/activities/ColorMyWorld.activity/js/palettes/zoompalette.html new file mode 100644 index 000000000..4febd9db6 --- /dev/null +++ b/activities/ColorMyWorld.activity/js/palettes/zoompalette.html @@ -0,0 +1,5 @@ +
+
+
+
+
\ No newline at end of file diff --git a/activities/ColorMyWorld.activity/js/palettes/zoompalette.js b/activities/ColorMyWorld.activity/js/palettes/zoompalette.js new file mode 100644 index 000000000..8e2a27813 --- /dev/null +++ b/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 + }) + \ No newline at end of file diff --git a/activities/ColorMyWorld.activity/lib/tutorial.js b/activities/ColorMyWorld.activity/lib/tutorial.js index 4bc102b8e..788087980 100644 --- a/activities/ColorMyWorld.activity/lib/tutorial.js +++ b/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") } ]; diff --git a/activities/ColorMyWorld.activity/locales/cn.json b/activities/ColorMyWorld.activity/locales/cn.json index 5bf4883b7..70a52d866 100644 --- a/activities/ColorMyWorld.activity/locales/cn.json +++ b/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 here to zoom in/zoom out the map", "Vietnam": "Vietnam", "Somaliland": "Somaliland", "West_Bank": "West_Bank", diff --git a/activities/ColorMyWorld.activity/locales/de.json b/activities/ColorMyWorld.activity/locales/de.json index 667b3dc86..df6164cfb 100644 --- a/activities/ColorMyWorld.activity/locales/de.json +++ b/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 here to zoom in/zoom out the map", "Vietnam": "Vietnam", "Somaliland": "Somaliland", "West_Bank": "West_Bank", diff --git a/activities/ColorMyWorld.activity/locales/en.json b/activities/ColorMyWorld.activity/locales/en.json index a8ac642c0..e73391d4c 100644 --- a/activities/ColorMyWorld.activity/locales/en.json +++ b/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 here to zoom in/zoom out the map", "Vietnam": "Vietnam" } diff --git a/activities/ColorMyWorld.activity/locales/es.json b/activities/ColorMyWorld.activity/locales/es.json index 02fe90100..6aaa6942c 100644 --- a/activities/ColorMyWorld.activity/locales/es.json +++ b/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":"Haiti clic aquí para ampliar o reducir el mapa", "Vietnam": "Vietnam", "Somaliland": "Somalilandia", "West_Bank": "West_Bank", diff --git a/activities/ColorMyWorld.activity/locales/fr.json b/activities/ColorMyWorld.activity/locales/fr.json index adb09900a..94d206cc5 100644 --- a/activities/ColorMyWorld.activity/locales/fr.json +++ b/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 ici pour zoomer/dézoomer la carte", "Vietnam": "Vietnam", "Somaliland": "Somaliland", "West_Bank": "Cisjordanie" diff --git a/activities/ColorMyWorld.activity/locales/gr.json b/activities/ColorMyWorld.activity/locales/gr.json index d85c14450..13b2f71f1 100644 --- a/activities/ColorMyWorld.activity/locales/gr.json +++ b/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 here to zoom in/zoom out the map", "Vietnam": "Vietnam", "Somaliland": "Somaliland", "West_Bank": "West_Bank", diff --git a/activities/ColorMyWorld.activity/locales/it.json b/activities/ColorMyWorld.activity/locales/it.json index dda7b78aa..87c2d8beb 100644 --- a/activities/ColorMyWorld.activity/locales/it.json +++ b/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 here to zoom in/zoom out the map", "Vietnam": "Vietnam", "Somaliland": "Somaliland", "West_Bank": "West_Bank", diff --git a/activities/ColorMyWorld.activity/locales/sw.json b/activities/ColorMyWorld.activity/locales/sw.json index ffae23dfe..cbad88a76 100644 --- a/activities/ColorMyWorld.activity/locales/sw.json +++ b/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 here to zoom in/zoom out the map", "Vietnam": "Vietnam", "Somaliland": "Somaliland", "West_Bank": "West_Bank", diff --git a/activities/ColorMyWorld.activity/locales/th.json b/activities/ColorMyWorld.activity/locales/th.json index d4bf13f59..376864737 100644 --- a/activities/ColorMyWorld.activity/locales/th.json +++ b/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 here to zoom in/zoom out the map", "Vietnam": "Vietnam", "Somaliland": "Somaliland", "West_Bank": "West_Bank",