From bc31a15bae3ac80ff311d6fe15f3c7d9dfbf5063 Mon Sep 17 00:00:00 2001 From: Samarth Bagga Date: Fri, 19 Apr 2024 23:55:05 +0530 Subject: [PATCH 1/7] zoomButtons --- .../ColorMyWorld.activity/css/activity.css | 24 ++++++++ .../ColorMyWorld.activity/icons/zoom-in.svg | 8 +++ .../icons/zoom-original.svg | 11 ++++ .../ColorMyWorld.activity/icons/zoom-out.svg | 7 +++ .../ColorMyWorld.activity/icons/zoom.svg | 60 +++++++++++++++++++ activities/ColorMyWorld.activity/index.html | 1 + .../ColorMyWorld.activity/js/activity.js | 30 +++++++++- .../js/palettes/zoompalette.html | 5 ++ .../js/palettes/zoompalette.js | 35 +++++++++++ 9 files changed, 179 insertions(+), 2 deletions(-) create mode 100644 activities/ColorMyWorld.activity/icons/zoom-in.svg create mode 100644 activities/ColorMyWorld.activity/icons/zoom-original.svg create mode 100644 activities/ColorMyWorld.activity/icons/zoom-out.svg create mode 100644 activities/ColorMyWorld.activity/icons/zoom.svg create mode 100644 activities/ColorMyWorld.activity/js/palettes/zoompalette.html create mode 100644 activities/ColorMyWorld.activity/js/palettes/zoompalette.js diff --git a/activities/ColorMyWorld.activity/css/activity.css b/activities/ColorMyWorld.activity/css/activity.css index 711174a64..da31cf410 100644 --- a/activities/ColorMyWorld.activity/css/activity.css +++ b/activities/ColorMyWorld.activity/css/activity.css @@ -19,6 +19,30 @@ body { z-index:3; title:'play'; } +#zoom-button { + background-image: url(../icons/zoom.svg); +} +.zoombuttons { + border: 0px; + background: #000000; + border-radius: 5.5px !important; + display:flex; +} +#zoom-in-button { + background-image: url(../icons/zoom-in.svg); + width:55px; + height:55px; +} +#zoom-out-button { + background-image: url(../icons/zoom-out.svg); + width:55px; + height:55px; +} +#zoom-original-button { + background-image: url(../icons/zoom-original.svg); + width:55px; + height:55px; +} #run-button.running{ background-image: url(../img/pause.png); title:'pause'; 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..68e4e7042 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,32 @@ define([ colormyworld.setRGBColorString(e.detail.color); }); + var zoomButton = document.getElementById("zoom-button"); + var zoomButtonPalette = new zoompalette.ZoomPalette(zoomButton); + + 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 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..7c2a1d76d --- /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..c25e82cf5 --- /dev/null +++ b/activities/ColorMyWorld.activity/js/palettes/zoompalette.js @@ -0,0 +1,35 @@ +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 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 From 47812a2f5904d9bdca7fcf3a7d3f97320d5510f5 Mon Sep 17 00:00:00 2001 From: Samarth Bagga Date: Fri, 19 Apr 2024 23:58:32 +0530 Subject: [PATCH 2/7] stylingChanges --- activities/ColorMyWorld.activity/css/activity.css | 2 -- .../ColorMyWorld.activity/js/palettes/zoompalette.html | 6 +++--- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/activities/ColorMyWorld.activity/css/activity.css b/activities/ColorMyWorld.activity/css/activity.css index da31cf410..be2b451ba 100644 --- a/activities/ColorMyWorld.activity/css/activity.css +++ b/activities/ColorMyWorld.activity/css/activity.css @@ -23,9 +23,7 @@ body { background-image: url(../icons/zoom.svg); } .zoombuttons { - border: 0px; background: #000000; - border-radius: 5.5px !important; display:flex; } #zoom-in-button { diff --git a/activities/ColorMyWorld.activity/js/palettes/zoompalette.html b/activities/ColorMyWorld.activity/js/palettes/zoompalette.html index 7c2a1d76d..d80fd6059 100644 --- a/activities/ColorMyWorld.activity/js/palettes/zoompalette.html +++ b/activities/ColorMyWorld.activity/js/palettes/zoompalette.html @@ -1,5 +1,5 @@
-
-
-
+
+
+
\ No newline at end of file From a942e4a576a7286bfdfd4ebb7dad4090a6b66ef2 Mon Sep 17 00:00:00 2001 From: Samarth Bagga Date: Sat, 20 Apr 2024 00:00:24 +0530 Subject: [PATCH 3/7] css --- activities/ColorMyWorld.activity/css/activity.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/activities/ColorMyWorld.activity/css/activity.css b/activities/ColorMyWorld.activity/css/activity.css index be2b451ba..2bb90b92f 100644 --- a/activities/ColorMyWorld.activity/css/activity.css +++ b/activities/ColorMyWorld.activity/css/activity.css @@ -19,6 +19,10 @@ body { z-index:3; title:'play'; } +#run-button.running{ + background-image: url(../img/pause.png); + title:'pause'; +} #zoom-button { background-image: url(../icons/zoom.svg); } @@ -41,10 +45,6 @@ body { width:55px; height:55px; } -#run-button.running{ - background-image: url(../img/pause.png); - title:'pause'; -} #main-toolbar #help-button { background-image: url(../icons/help.svg); } From a55e634e8d19084a016c94c8016629c11339f6ce Mon Sep 17 00:00:00 2001 From: Samarth Bagga Date: Sat, 20 Apr 2024 00:07:16 +0530 Subject: [PATCH 4/7] addedHover --- .../ColorMyWorld.activity/css/activity.css | 17 +++++++++-------- .../js/palettes/zoompalette.html | 8 ++++---- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/activities/ColorMyWorld.activity/css/activity.css b/activities/ColorMyWorld.activity/css/activity.css index 2bb90b92f..a7d251ef9 100644 --- a/activities/ColorMyWorld.activity/css/activity.css +++ b/activities/ColorMyWorld.activity/css/activity.css @@ -26,24 +26,25 @@ body { #zoom-button { background-image: url(../icons/zoom.svg); } -.zoombuttons { - background: #000000; +.zoombuttons-container { display:flex; } -#zoom-in-button { - background-image: url(../icons/zoom-in.svg); +.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); - width:55px; - height:55px; } #zoom-original-button { background-image: url(../icons/zoom-original.svg); - width:55px; - height:55px; } #main-toolbar #help-button { background-image: url(../icons/help.svg); diff --git a/activities/ColorMyWorld.activity/js/palettes/zoompalette.html b/activities/ColorMyWorld.activity/js/palettes/zoompalette.html index d80fd6059..4febd9db6 100644 --- a/activities/ColorMyWorld.activity/js/palettes/zoompalette.html +++ b/activities/ColorMyWorld.activity/js/palettes/zoompalette.html @@ -1,5 +1,5 @@ -
-
-
-
+
+
+
+
\ No newline at end of file From 3890e580359d2849575209112da4144723e5f4c5 Mon Sep 17 00:00:00 2001 From: Samarth Bagga Date: Sat, 20 Apr 2024 00:10:57 +0530 Subject: [PATCH 5/7] removed extra spaces --- activities/ColorMyWorld.activity/js/activity.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/activities/ColorMyWorld.activity/js/activity.js b/activities/ColorMyWorld.activity/js/activity.js index 68e4e7042..1ea5eb57e 100644 --- a/activities/ColorMyWorld.activity/js/activity.js +++ b/activities/ColorMyWorld.activity/js/activity.js @@ -81,7 +81,6 @@ define([ 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(); @@ -99,7 +98,6 @@ define([ view.animate({zoom:2.3299654139527806}) }) - var modeButton = document.getElementById("mode-button"); modepalette = new modepalette.ModePalette(modeButton, undefined); colormyworld.change_areaCB(true,'World'); From 60a992a8701c957fbad1f9c13e3f31f62362a3c6 Mon Sep 17 00:00:00 2001 From: Samarth Bagga Date: Sat, 20 Apr 2024 00:13:56 +0530 Subject: [PATCH 6/7] moved zoom functionality to palette file --- .../ColorMyWorld.activity/js/activity.js | 21 ------------------- .../js/palettes/zoompalette.js | 21 +++++++++++++++++++ 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/activities/ColorMyWorld.activity/js/activity.js b/activities/ColorMyWorld.activity/js/activity.js index 1ea5eb57e..40bf9cc32 100644 --- a/activities/ColorMyWorld.activity/js/activity.js +++ b/activities/ColorMyWorld.activity/js/activity.js @@ -77,27 +77,6 @@ define([ var zoomButton = document.getElementById("zoom-button"); var zoomButtonPalette = new zoompalette.ZoomPalette(zoomButton); - 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 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.js b/activities/ColorMyWorld.activity/js/palettes/zoompalette.js index c25e82cf5..8e2a27813 100644 --- a/activities/ColorMyWorld.activity/js/palettes/zoompalette.js +++ b/activities/ColorMyWorld.activity/js/palettes/zoompalette.js @@ -11,6 +11,27 @@ define([ 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}) + }) } From 6a1cb40d70e9944462de82f4a907c938b9d49a18 Mon Sep 17 00:00:00 2001 From: Samarth Bagga Date: Sat, 20 Apr 2024 01:35:37 +0530 Subject: [PATCH 7/7] added tutorial --- activities/ColorMyWorld.activity/lib/tutorial.js | 5 +++++ activities/ColorMyWorld.activity/locales/cn.json | 2 ++ activities/ColorMyWorld.activity/locales/de.json | 2 ++ activities/ColorMyWorld.activity/locales/en.json | 2 ++ activities/ColorMyWorld.activity/locales/es.json | 2 ++ activities/ColorMyWorld.activity/locales/fr.json | 2 ++ activities/ColorMyWorld.activity/locales/gr.json | 2 ++ activities/ColorMyWorld.activity/locales/it.json | 2 ++ activities/ColorMyWorld.activity/locales/sw.json | 2 ++ activities/ColorMyWorld.activity/locales/th.json | 2 ++ 10 files changed, 23 insertions(+) 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..13c213ddf 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 on this palette to zoom in/zoom out the item.", "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..cf5ddc891 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 on this palette to zoom in/zoom out.", "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..aa841489e 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 on this palette to zoom in/zoom out.", "Vietnam": "Vietnam" } diff --git a/activities/ColorMyWorld.activity/locales/es.json b/activities/ColorMyWorld.activity/locales/es.json index 02fe90100..1bd47dfba 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":"Haga clic en esta paleta para acercar o alejar.", "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..2700eb99e 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 sur cette palette pour zoomer/dézoomer.", "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..dcad86130 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 on this palette to zoom in/zoom out.", "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..c38f91524 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 on this palette to zoom in/zoom out.", "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..20f0c7762 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 on this palette to zoom in/zoom out.", "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..9f02e3d83 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 on this palette to zoom in/zoom out.", "Vietnam": "Vietnam", "Somaliland": "Somaliland", "West_Bank": "West_Bank",