diff --git a/cde-core/resource/resources/custom/amd-components/Map/Map.js b/cde-core/resource/resources/custom/amd-components/Map/Map.js index 9005c95a68..3913499cab 100644 --- a/cde-core/resource/resources/custom/amd-components/Map/Map.js +++ b/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(); + } } }); diff --git a/cde-core/resource/resources/custom/amd-components/Map/engines/google/MapEngineGoogle.js b/cde-core/resource/resources/custom/amd-components/Map/engines/google/MapEngineGoogle.js index 2cde9df3cf..2315474ace 100644 --- a/cde-core/resource/resources/custom/amd-components/Map/engines/google/MapEngineGoogle.js +++ b/cde-core/resource/resources/custom/amd-components/Map/engines/google/MapEngineGoogle.js @@ -103,7 +103,16 @@ 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(); @@ -111,6 +120,8 @@ define([ 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); }, diff --git a/cde-core/resource/resources/custom/amd-components/Map/engines/openlayers2/MapEngineOpenLayers.js b/cde-core/resource/resources/custom/amd-components/Map/engines/openlayers2/MapEngineOpenLayers.js index 7c43bdf244..904fef72f1 100644 --- a/cde-core/resource/resources/custom/amd-components/Map/engines/openlayers2/MapEngineOpenLayers.js +++ b/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;