Fix oppia#4427: Show previous answer for map interaction (oppia#4478)

* fix oppia#4427 * made review change * made review change * fixed errors * made review changes * made review changes * made review change
YimingPan · Jan 11, 2018 · 722b798 · 722b798
1 parent 30fb897
commit 722b798
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 14 deletions.
diff --git a/extensions/interactions/CodeRepl/directives/CodeRepl.js b/extensions/interactions/CodeRepl/directives/CodeRepl.js
@@ -44,7 +44,7 @@ oppia.directive('oppiaInteractiveCodeRepl', [
             EVENT_PROGRESS_NAV_SUBMITTED) {
           $scope.interactionIsActive = ($scope.getLastAnswer() === null);
 
-          $scope.$on(EVENT_NEW_CARD_AVAILABLE, function(evt, data) {
+          $scope.$on(EVENT_NEW_CARD_AVAILABLE, function() {
             $scope.interactionIsActive = false;
           });
           $scope.language = HtmlEscaperService.escapedJsonToObj(

diff --git a/extensions/interactions/GraphInput/directives/GraphInput.js b/extensions/interactions/GraphInput/directives/GraphInput.js
@@ -62,7 +62,7 @@ oppia.directive('oppiaInteractiveGraphInput', [
           };
           $scope.$on(EVENT_PROGRESS_NAV_SUBMITTED, $scope.submitGraph);
           $scope.interactionIsActive = ($scope.getLastAnswer() === null);
-          $scope.$on(EVENT_NEW_CARD_AVAILABLE, function(evt, data) {
+          $scope.$on(EVENT_NEW_CARD_AVAILABLE, function() {
             $scope.interactionIsActive = false;
 
             $scope.canAddVertex = false;
@@ -294,7 +294,7 @@ oppia.directive('graphViz', [
           $scope.VERTEX_RADIUS = graphDetailService.VERTEX_RADIUS;
           $scope.EDGE_WIDTH = graphDetailService.EDGE_WIDTH;
 
-          $scope.$on(EVENT_NEW_CARD_AVAILABLE, function(evt, data) {
+          $scope.$on(EVENT_NEW_CARD_AVAILABLE, function() {
             $scope.state.currentMode = null;
           });
 

diff --git a/extensions/interactions/ImageClickInput/directives/ImageClickInput.js b/extensions/interactions/ImageClickInput/directives/ImageClickInput.js
@@ -96,7 +96,7 @@ oppia.directive('oppiaInteractiveImageClickInput', [
               return 'inline';
             }
           };
-          $scope.$on(EVENT_NEW_CARD_AVAILABLE, function(evt, data) {
+          $scope.$on(EVENT_NEW_CARD_AVAILABLE, function() {
             $scope.interactionIsActive = false;
           });
           $scope.onMousemoveImage = function(event) {

diff --git a/extensions/interactions/InteractiveMap/directives/InteractiveMap.js b/extensions/interactions/InteractiveMap/directives/InteractiveMap.js
@@ -21,12 +21,15 @@
  */
 oppia.directive('oppiaInteractiveInteractiveMap', [
   'HtmlEscaperService', 'interactiveMapRulesService', 'UrlInterpolationService',
+  'EVENT_NEW_CARD_AVAILABLE',
   function(
-      HtmlEscaperService, interactiveMapRulesService, UrlInterpolationService) {
+      HtmlEscaperService, interactiveMapRulesService, UrlInterpolationService,
+      EVENT_NEW_CARD_AVAILABLE) {
     return {
       restrict: 'E',
       scope: {
-        onSubmit: '&'
+        onSubmit: '&',
+        getLastAnswer: '&lastAnswer'
       },
       templateUrl: UrlInterpolationService.getExtensionResourceUrl(
         '/interactions/InteractiveMap/directives/' +
@@ -38,13 +41,37 @@ oppia.directive('oppiaInteractiveInteractiveMap', [
             HtmlEscaperService.escapedJsonToObj($attrs.longitudeWithValue)];
           $scope.zoom = (
             HtmlEscaperService.escapedJsonToObj($attrs.zoomWithValue));
+          $scope.interactionIsActive = ($scope.getLastAnswer() === null);
+          $scope.mapMarkers = [];
+
+          $scope.setOverlay = function() {
+            $scope.overlayStyle = {
+              'background-color': 'black'
+            };
+            $scope.mapStyle = {
+              opacity: '0.8'
+            };
+          };
+
+          $scope.hideOverlay = function() {
+            $scope.overlayStyle = {
+              'background-color': 'white'
+            };
+            $scope.mapStyle = {
+              opacity: '1'
+            };
+          };
+
+
+          $scope.$on(EVENT_NEW_CARD_AVAILABLE, function() {
+            $scope.interactionIsActive = false;
+            $scope.setOverlay();
+          });
 
           $scope.$on('showInteraction', function() {
             refreshMap();
           });
 
-          $scope.mapMarkers = [];
-
           // This is required in order to avoid the following bug:
           //   http://stackoverflow.com/questions/18769287
           var refreshMap = function() {
@@ -54,6 +81,13 @@ oppia.directive('oppiaInteractiveInteractiveMap', [
                 lat: coords[0],
                 lng: coords[1]
               });
+              if (!$scope.interactionIsActive) {
+                $scope.mapMarkers.push(new google.maps.Marker({
+                  map: $scope.map,
+                  position: new google.maps.LatLng(
+                    $scope.getLastAnswer()[0], $scope.getLastAnswer()[1])
+                }));
+              }
             }, 100);
           };
 
@@ -62,10 +96,28 @@ oppia.directive('oppiaInteractiveInteractiveMap', [
           $scope.mapOptions = {
             center: new google.maps.LatLng(coords[0], coords[1]),
             zoom: zoomLevel,
-            mapTypeId: google.maps.MapTypeId.ROADMAP
+            mapTypeId: google.maps.MapTypeId.ROADMAP,
+            draggable: $scope.interactionIsActive
+          };
+
+          $scope.onMouseOver = function() {
+            if ($scope.interactionIsActive) {
+              return;
+            }
+            $scope.setOverlay();
+          };
+
+          $scope.onMouseOut = function() {
+            if ($scope.interactionIsActive) {
+              return;
+            }
+            $scope.hideOverlay();
           };
 
           $scope.registerClick = function($event, $params) {
+            if (!$scope.interactionIsActive) {
+              return;
+            }
             var ll = $params[0].latLng;
             $scope.mapMarkers.push(new google.maps.Marker({
               map: $scope.map,

diff --git a/extensions/interactions/InteractiveMap/directives/interactive_map_interaction_directive.html b/extensions/interactions/InteractiveMap/directives/interactive_map_interaction_directive.html
@@ -35,7 +35,10 @@
 </style>
 
 <div class="interactive-map-container">
-  <div id="map_canvas" ui-map="map" ui-options="mapOptions"
-       ui-event="{'map-click': 'registerClick($event, $params)'}">
+  <div ng-style="overlayStyle">
+    <div id="map_canvas" ng-style="mapStyle" ui-map="map" ui-options="mapOptions"
+        ui-event="{'map-click': 'registerClick($event, $params)', 'map-mouseover': 'onMouseOver()',
+                   'map-mouseout': 'onMouseOut()'}">
+    </div>
   </div>
 </div>
diff --git a/extensions/interactions/LogicProof/directives/LogicProof.js b/extensions/interactions/LogicProof/directives/LogicProof.js
@@ -44,7 +44,7 @@ oppia.directive('oppiaInteractiveLogicProof', [
           $scope.questionData = angular.copy(LOGIC_PROOF_DEFAULT_QUESTION_DATA);
 
           $scope.interactionIsActive = ($scope.getLastAnswer() === null);
-          $scope.$on(EVENT_NEW_CARD_AVAILABLE, function(evt, data) {
+          $scope.$on(EVENT_NEW_CARD_AVAILABLE, function() {
             $scope.interactionIsActive = false;
           });
 

diff --git a/extensions/interactions/MusicNotesInput/directives/MusicNotesInput.js b/extensions/interactions/MusicNotesInput/directives/MusicNotesInput.js
@@ -114,7 +114,7 @@ oppia.directive('oppiaInteractiveMusicNotesInput', [
           HtmlEscaperService.escapedJsonToObj(attrs.initialSequenceWithValue) :
           scope.getLastAnswer();
 
-        scope.$on(EVENT_NEW_CARD_AVAILABLE, function(evt, data) {
+        scope.$on(EVENT_NEW_CARD_AVAILABLE, function() {
           scope.interactionIsActive = false;
           scope.initialSequence = scope.getLastAnswer();
           scope.reinitStaff();

diff --git a/extensions/interactions/PencilCodeEditor/directives/PencilCodeEditor.js b/extensions/interactions/PencilCodeEditor/directives/PencilCodeEditor.js
@@ -47,7 +47,7 @@ oppia.directive('oppiaInteractivePencilCodeEditor', [
           var iframeDiv = $element.find('.pencil-code-editor-iframe').get(0);
           var pce = new PencilCodeEmbed(iframeDiv);
           pce.beginLoad($scope.initialCode);
-          $scope.$on(EVENT_NEW_CARD_AVAILABLE, function(evt, data) {
+          $scope.$on(EVENT_NEW_CARD_AVAILABLE, function() {
             $scope.interactionIsActive = false;
             pce.hideMiddleButton();
             pce.hideToggleButton();