[CDE-736] - NewMapComponent - As a user, I want the popups to close when I click outside of them

cde-core/resource/resources/custom/amd-components/Map/Map.js

@@ -281,6 +281,13 @@ define([
         this.on("shape:click", function(event) {
           redrawUponCallback(event, me.shapeMouseClick);
         });
+
+        // Add handler to close popups when click outside map
+        if (!this.outsideHandlerClickRegistered) {
+          document.addEventListener('click', function(event) { me._clickOutsideHandler(event); }, true);
+          this.outsideHandlerClickRegistered = true;
+        }
+
       },
 
       _processMarkerImages: function() {
@@ -383,6 +390,20 @@ define([
 
           this.mapEngine.showPopup(event.data, event.feature, height, width, contents, this.popupContentsDiv, borderColor);
         }
+      },
+
+      _clickOutsideHandler: function(event) {
+
+        var ph = this.placeholder('.map-container')[0];
+
+        var $src = $(event.srcElement);
+        var isChildOfMap = _.filter($src.parents(), function(node){
+          return node === ph;  
+        }).length > 0;
+
+        if (!isChildOfMap){
+          this.mapEngine.closePopups();
+        }
       }
 
     });

cde-core/resource/resources/custom/amd-components/Map/engines/google/MapEngineGoogle.js

@@ -103,14 +103,25 @@ define([
             div.style.height = this.height_ + "px";
           };
 
+
           OurMapOverlay.prototype.onRemove = function() {
+
+            if (this.popupContentDiv_) {
+              $(this.div_).detach();
+              this.div_.style.display = "none";
+              this.div_ = null;
+            }
+
+            /*
             if (this.popupContentDiv_) {
               $("#" + this.popupContentDiv_).append($(this.div_));
               $(this.div_).detach();
             }
             this.div_.style.display = "none";
             this.div_.parentNode.removeChild(this.div_);
             this.div_ = null;
+            */
+
           };
 
         });
@@ -217,6 +228,21 @@ define([
       this.map.data.overrideStyle(feature, style);
     },
 
+    closePopups: function(){
+      this._popups = this._popups || [];
+      _.each(this._popups, function(p) {
+        p.close();
+      });
+    },
+
+    closePopups0: function() {
+      this._popups = this._popups || [];
+      _.each(this._popups, function(p) {
+        p.setMap(null);
+        p = null;
+      });
+    },
+
     renderMap: function(target) {
       var mapOptions = {
         mapTypeId: google.maps.MapTypeId.ROADMAP,
@@ -387,6 +413,7 @@ define([
       };
     },
 
+    /*
     _addControlClick: function() {
       var me = this;
       this.map.data.addListener("click", function(e) {
@@ -395,6 +422,7 @@ define([
         me.trigger("engine:selection:complete");
       });
     },
+    */
 
     _addLimitZoomLimits: function() {
       var minZoom = _.isFinite(this.options.viewport.zoomLevel.min) ? this.options.viewport.zoomLevel.min : 0;
@@ -422,6 +450,9 @@ define([
     },
 
     setPanningMode: function() {
+
+      var me = this;
+
       this._removeListeners();
       this._updateMode("pan");
       this._updateDrag(false);
@@ -431,6 +462,24 @@ define([
         draggable: true
       });
 
+      var listeners = this.controls.listenersHandle;
+      listeners.clickOnData = this.map.data.addListener("click",
+        this._createClickHandler(function(me, event) {
+          //console.log('Click on feature!');
+          var modelItem = event.feature.getProperty("model");
+          var featureType = modelItem.getFeatureType();
+          me.trigger(featureType + ":click", me.wrapEvent(event));
+        })
+      );
+
+      listeners.clickOnMap = google.maps.event.addListener(this.map, "click",
+        this._createClickHandler(function(me, event) {
+          me.closePopups();
+        })
+      );
+
+
+      /*
       return;
       var listeners = this.controls.listenersHandle;
       listeners.clickOnData = this.map.data.addListener("click",
@@ -450,6 +499,7 @@ define([
           me.trigger("engine:selection:complete");
         })
       );
+      */
 
     },
 
@@ -738,10 +788,16 @@ define([
       }
 
       var popup = new OurMapOverlay(feature.getGeometry().get(), popupWidth, popupHeight, contents, popupContentDiv, this.map, borderColor);
+
+      /*
       this._popups = this._popups || [];
       _.each(this._popups, function(p) {
         p.setMap(null);
       });
+      */
+
+      this.closePopups();
+
       this._popups.push(popup);
     },
 
@@ -751,10 +807,16 @@ define([
         position: feature.getGeometry().get(),
         maxWidth: popupWidth
       });
+
+      /*
       this._popups = this._popups || [];
       _.each(this._popups, function(p) {
         p.close();
       });
+      */
+
+      this.closePopups();
+
       popup.open(this.map);
       this._popups.push(popup);
     },

cde-core/resource/resources/custom/amd-components/Map/engines/openlayers2/MapEngineOpenLayers.js

@@ -190,6 +190,14 @@ define([
       this.map.addPopup(popup, true);
     },
 
+    closePopups: function(){
+      var me = this;
+      _.each(this.map.popups, function(popup){
+        me.map.removePopup(popup);
+        popup.destroy();
+      });           
+    },
+
     renderMap: function(target) {
       var projectionMap = new OpenLayers.Projection("EPSG:900913");
       var projectionWGS84 = new OpenLayers.Projection("EPSG:4326");
@@ -424,10 +432,13 @@ define([
     },
 
     _addControlClick: function() {
+
+      var me = this;
+
       this.controls.clickCtrl = new OpenLayers.Control.SelectFeature([this.layers.markers, this.layers.shapes], {
         clickout: true,
         callbacks: {
-          clickout: this._createClickHandler(null, doZoomIn),
+          clickout: this._createClickHandler(me.closePopups, doZoomIn),
           click: function(feature) {
             this.clickFeature(feature);
             var modelItem = feature.attributes.model;