Fixes issue #6

- Added the closeWhenOthersOpen option. - Modified the way google map listeners are tracked. - Updated the readme. - Modified the test scripts slightly. - Added a git ignore for vscode settings.
atmist · Mar 9, 2017 · 4c49830 · 4c49830
1 parent cef6dc6
commit 4c49830
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 21 deletions.
diff --git a/.gitignore b/.gitignore
@@ -6,3 +6,4 @@
 /test/scripts/snazzy-info-window.min.js
 /test/css/snazzy-info-window.min.css.map
 /test/css/snazzy-info-window.min.css
+/.vscode
diff --git a/README.md b/README.md
@@ -287,6 +287,13 @@ panning the map.
 - Type: _boolean_
 - Default: `true`
 
+#### closeWhenOthersOpen
+
+Determines if the info window will close when any other Snazzy Info Window is opened.
+
+- Type: _boolean_
+- Default: `false`
+
 #### showCloseButton
 
 Determines if the info window will show a close button.

diff --git a/src/snazzy-info-window.js b/src/snazzy-info-window.js
@@ -2,6 +2,7 @@
 const _classPrefix = 'si-';
 const _root2 = 1.41421356237;
 const _inverseRoot2 = 0.7071067811865474;
+const _eventPrefix = 'snazzy-info-window-';
 const _defaultShadow = {
     h: '0px',
     v: '3px',
@@ -14,6 +15,7 @@ const _defaultOptions = {
     pointer: true,
     openOnMarkerClick: true,
     closeOnMapClick: true,
+    closeWhenOthersOpen: false,
     showCloseButton: true,
     panOnOpen: true,
     edgeOffset: {
@@ -132,11 +134,11 @@ export default class SnazzyInfoWindow extends google.maps.OverlayView {
 
         // This listener remains active when the info window is closed.
         if (google && this._marker && this._opts.openOnMarkerClick) {
-            this._openOnMarkerClickListener = google.maps.event.addListener(this._marker, 'click', () => {
+            this.trackListener(google.maps.event.addListener(this._marker, 'click', () => {
                 if (!this.getMap()) {
                     this.open();
                 }
-            });
+            }), true);
         }
 
         // When using a position the default option for the offset is 0
@@ -185,15 +187,26 @@ export default class SnazzyInfoWindow extends google.maps.OverlayView {
         return lambda ? lambda.apply(this) : undefined;
     }
 
+    // Track the provided listener. A persistent listener means it remains
+    // tracked even if the info window is closed.
+    trackListener(listener, persistent) {
+        this._listeners.push({ listener, persistent });
+    }
+
     // Will clear all listeners that are used during the open state.
-    clearListeners() {
+    clearListeners(clearPersistent) {
         if (google) {
             if (this._listeners) {
-                this._listeners.forEach((listener) => {
-                    google.maps.event.removeListener(listener);
+                this._listeners.forEach((e) => {
+                    if (clearPersistent || !e.persistent) {
+                        google.maps.event.removeListener(e.listener);
+                        e.listener = null;
+                    }
+                });
+                this._listeners = this._listeners.filter((e) => {
+                    return e.listener != null;
                 });
             }
-            this._listeners = [];
         }
     }
 
@@ -229,14 +242,8 @@ export default class SnazzyInfoWindow extends google.maps.OverlayView {
         if (this.getMap()) {
             this.setMap(null);
         }
-
-        if (google) {
-            if (this._openOnMarkerClickListener) {
-                google.maps.event.removeListener(this._openOnMarkerClickListener);
-                this._openOnMarkerClickListener = null;
-            }
-        }
-        this.clearListeners();
+        // Make sure to clear all persistent listeners
+        this.clearListeners(true);
     }
 
     setContent(content) {
@@ -405,6 +412,9 @@ export default class SnazzyInfoWindow extends google.maps.OverlayView {
             this.resize();
             this.reposition();
             this.activateCallback('afterOpen');
+            if (google) {
+                google.maps.event.trigger(this.getMap(), `${_eventPrefix}opened`, this);
+            }
         }
     }
 
@@ -529,15 +539,22 @@ export default class SnazzyInfoWindow extends google.maps.OverlayView {
         const map = this.getMap();
         this.clearListeners();
         if (this._opts.closeOnMapClick) {
-            this._listeners.push(google.maps.event.addListener(map, 'click', () => {
+            this.trackListener(google.maps.event.addListener(map, 'click', () => {
                 this.close();
             }));
         }
+        if (this._opts.closeWhenOthersOpen) {
+            this.trackListener(google.maps.event.addListener(map, `${_eventPrefix}opened`, (other) => {
+                if (this !== other) {
+                    this.close();
+                }
+            }));
+        }
         if (google) {
             // Clear out the previous map bounds
             this._previousWidth = null;
             this._previousHeight = null;
-            this._listeners.push(google.maps.event.addListener(map, 'bounds_changed', () => {
+            this.trackListener(google.maps.event.addListener(map, 'bounds_changed', () => {
                 const d = map.getDiv();
                 const ow = d.offsetWidth;
                 const oh = d.offsetHeight;
@@ -552,15 +569,15 @@ export default class SnazzyInfoWindow extends google.maps.OverlayView {
 
             // Marker moves
             if (this._marker) {
-                this._listeners.push(google.maps.event.addListener(this._marker,
+                this.trackListener(google.maps.event.addListener(this._marker,
                     'position_changed', () => {
                         this.draw();
                     }));
             }
 
             // Close button
             if (this._opts.showCloseButton && !this._opts.closeButtonMarkup) {
-                this._listeners.push(google.maps.event.addDomListener(this._html.closeButton,
+                this.trackListener(google.maps.event.addDomListener(this._html.closeButton,
                     'click', (e) => {
                         e.cancelBubble = true;
                         if (e.stopPropagation) {
@@ -577,7 +594,7 @@ export default class SnazzyInfoWindow extends google.maps.OverlayView {
                 'touchstart', 'touchend', 'touchmove',
                 'wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'];
             mouseEvents.forEach((event) => {
-                this._listeners.push(google.maps.event.addDomListener(this._html.wrapper,
+                this.trackListener(google.maps.event.addDomListener(this._html.wrapper,
                     event, (e) => {
                         e.cancelBubble = true;
                         if (e.stopPropagation) {

diff --git a/test/scripts/index.js b/test/scripts/index.js
@@ -2,7 +2,8 @@ $(function() {
     var map = new google.maps.Map($(".map-canvas")[0], {
         zoom: 14,
         center: new google.maps.LatLng(40.72, -74),
-        mapTypeId: google.maps.MapTypeId.ROADMAP
+        mapTypeId: google.maps.MapTypeId.ROADMAP,
+        clickableIcons: false
     });
 
     var marker = new google.maps.Marker({

diff --git a/test/scripts/multi.js b/test/scripts/multi.js
@@ -6,7 +6,8 @@ $(function(){
     var map = new google.maps.Map($('.map-canvas')[0], {
         zoom: 14,
         center: center,
-        mapTypeId: google.maps.MapTypeId.ROADMAP
+        mapTypeId: google.maps.MapTypeId.ROADMAP,
+        clickableIcons: false
     });
     var dx = 0.003;
     var placements = [
@@ -15,6 +16,7 @@ $(function(){
         { type: 'bottom', LatLng: offsetCenter(-dx, 0) },
         { type: 'left', LatLng: offsetCenter(0, -dx) }
     ];
+    window.infos = [];
     $.each(placements, function(i, e){
         var marker = new google.maps.Marker({
             map: map,
@@ -31,5 +33,6 @@ $(function(){
             panOnOpen: false
         }));
         info.open();
+        window.infos.push(info);
     });
 });