Merge pull request #100 from steveszc/infowindow-onopen

Add onOpen handler to g-map-infowindow
asennikov · Apr 14, 2017 · d7f2fad · d7f2fad
2 parents 713e20f + 16904ce
commit d7f2fad
Show file tree

Hide file tree

Showing 11 changed files with 74 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -48,6 +48,7 @@ ENV['g-map'] = {
   libraries: ['places', 'geometry'],
   key: 'your-unique-google-map-api-key',
   client: 'gme-your-unique-google-client-id',
+  channel: 'my-google-map-api-channel',
   version: '3.26',
   language: 'ru',
   protocol: 'https'
@@ -120,8 +121,7 @@ myIcon: {
 ## Map with Info Windows
 
 These Info Windows will be open right after component is rendered
-and will be closed forever after user closes them. You can specify
-optional `onClose` action to tear down anything you need when Info Window
+and will be closed forever after user closes them. You can specify optional `onOpen` action to trigger anything you need to when the Info Window opens. The infowindow is passed as the only argument to the `onOpen` action.  You can specify optional `onClose` action to tear down anything you need when Info Window
 has been closed by user.
 
 Available options (see details [in docs](https://developers.google.com/maps/documentation/javascript/3.exp/reference#InfoWindowOptions)):
@@ -140,9 +140,11 @@ Available options (see details [in docs](https://developers.google.com/maps/docu
                      title="Blockless form" message="Plain text."}}
   {{g-map-infowindow context lat=37.7733 lng=-122.4067
                      title="With action set"
+                     onOpen="myOnOpenAction"
                      onClose="myOnCloseAction"}}
   {{g-map-infowindow context lat=37.7733 lng=-122.4067
                      title="With closure action set"
+                     onOpen=(action "myOnOpenAction")
                      onClose=(action "myOnCloseAction")}}
 {{/g-map}}
 ```

diff --git a/addon/components/g-map-address-route.js b/addon/components/g-map-address-route.js
@@ -11,7 +11,7 @@ const GMapAddressRouteComponent = Ember.Component.extend({
   map: computed.alias('mapContext.map'),
 
   didInsertElement() {
-    this._super();
+    this._super(...arguments);
     this.initPlacesService();
   },
 

diff --git a/addon/components/g-map-infowindow.js b/addon/components/g-map-infowindow.js
@@ -20,7 +20,7 @@ const GMapInfowindowComponent = Ember.Component.extend({
   marker: computed.alias('mapContext.marker'),
 
   init() {
-    this._super(arguments);
+    this._super(...arguments);
 
     const mapContext = this.get('mapContext');
     const hasMap = mapContext instanceof GMapComponent;
@@ -32,7 +32,7 @@ const GMapInfowindowComponent = Ember.Component.extend({
   },
 
   didInsertElement() {
-    this._super();
+    this._super(...arguments);
     if (isEmpty(this.get('infowindow'))) {
       const infowindow = this.buildInfowindow();
       this.set('infowindow', infowindow);
@@ -70,13 +70,26 @@ const GMapInfowindowComponent = Ember.Component.extend({
         content: this.get('element')
       });
 
+      if (isPresent(this.get('attrs.onOpen'))) {
+        infowindow.addListener('domready', () => this.handleOpenClickEvent());
+      }
+
       if (isPresent(this.get('attrs.onClose'))) {
         infowindow.addListener('closeclick', () => this.handleCloseClickEvent());
       }
       return infowindow;
     }
   },
 
+  handleOpenClickEvent() {
+    const { onOpen } = this.attrs;
+    if (typeOf(onOpen) === 'function') {
+      onOpen();
+    } else {
+      this.sendAction('onOpen', this);
+    }
+  },
+
   handleCloseClickEvent() {
     const { onClose } = this.attrs;
     if (typeOf(onClose) === 'function') {

diff --git a/addon/components/g-map-marker.js b/addon/components/g-map-marker.js
@@ -11,7 +11,7 @@ const GMapMarkerComponent = Ember.Component.extend({
   map: computed.alias('mapContext.map'),
 
   init() {
-    this._super(arguments);
+    this._super(...arguments);
     this.infowindow = null;
     if (isEmpty(this.get('group'))) {
       this.set('group', null);
@@ -24,7 +24,7 @@ const GMapMarkerComponent = Ember.Component.extend({
   },
 
   didInsertElement() {
-    this._super();
+    this._super(...arguments);
     if (isEmpty(this.get('marker'))
       && (typeof FastBoot === 'undefined')) {
       const marker = new google.maps.Marker();

diff --git a/addon/components/g-map-polyline-coordinate.js b/addon/components/g-map-polyline-coordinate.js
@@ -11,7 +11,7 @@ const GMapPolylineCoordinateComponent = Ember.Component.extend({
   polyline: computed.alias('polylineContext.polyline'),
 
   init() {
-    this._super(arguments);
+    this._super(...arguments);
 
     const polylineContext = this.get('polylineContext');
     assert('Must be inside {{#g-map-polyline}} component with context set',
@@ -21,7 +21,7 @@ const GMapPolylineCoordinateComponent = Ember.Component.extend({
   },
 
   didInsertElement() {
-    this._super();
+    this._super(...arguments);
     if (isEmpty(this.get('coordinate'))) {
       const coordinate = new google.maps.LatLng();
       this.set('coordinate', coordinate);

diff --git a/addon/components/g-map-polyline.js b/addon/components/g-map-polyline.js
@@ -14,7 +14,7 @@ const GMapPolylineComponent = Ember.Component.extend({
   map: computed.alias('mapContext.map'),
 
   init() {
-    this._super(arguments);
+    this._super(...arguments);
     this.infowindow = null;
     this.set('coordinates', Ember.A());
     if (isEmpty(this.get('group'))) {
@@ -28,7 +28,7 @@ const GMapPolylineComponent = Ember.Component.extend({
   },
 
   didInsertElement() {
-    this._super();
+    this._super(...arguments);
     if (isEmpty(this.get('polyline'))) {
       const options = compact(this.getProperties(allowedPolylineOptions));
       const polyline = new google.maps.Polyline(options);

diff --git a/addon/components/g-map-route-address-waypoint.js b/addon/components/g-map-route-address-waypoint.js
@@ -10,7 +10,7 @@ const GMapRouteAddressWaypointComponent = Ember.Component.extend({
   map: computed.alias('routeContext.map'),
 
   didInsertElement() {
-    this._super();
+    this._super(...arguments);
     this.initPlacesService();
   },
 

diff --git a/addon/components/g-map-route-waypoint.js b/addon/components/g-map-route-waypoint.js
@@ -11,7 +11,7 @@ const GMapRouteWaypointComponent = Ember.Component.extend({
   map: computed.alias('routeContext.map'),
 
   init() {
-    this._super(arguments);
+    this._super(...arguments);
     if (isEmpty(this.stopover)) {
       this.stopover = true;
     }
@@ -22,7 +22,7 @@ const GMapRouteWaypointComponent = Ember.Component.extend({
   },
 
   didInsertElement() {
-    this._super();
+    this._super(...arguments);
     this.updateWaypoint();
   },
 

diff --git a/addon/components/g-map-route.js b/addon/components/g-map-route.js
@@ -22,14 +22,14 @@ const GMapRouteComponent = Ember.Component.extend({
   map: computed.alias('mapContext.map'),
 
   init() {
-    this._super(arguments);
+    this._super(...arguments);
     this.set('waypoints', Ember.A());
     const mapContext = this.get('mapContext');
     assert('Must be inside {{#g-map}} component with context set', mapContext instanceof GMapComponent);
   },
 
   didInsertElement() {
-    this._super();
+    this._super(...arguments);
     this.initDirectionsService();
   },
 

diff --git a/addon/components/g-map.js b/addon/components/g-map.js
@@ -9,7 +9,7 @@ export default Ember.Component.extend({
   bannedOptions: Ember.A(['center', 'zoom']),
 
   init() {
-    this._super();
+    this._super(...arguments);
     this.set('markers', Ember.A());
     this.set('polylines', Ember.A());
     if (isEmpty(this.get('options'))) {
@@ -29,7 +29,7 @@ export default Ember.Component.extend({
   }),
 
   didInsertElement() {
-    this._super();
+    this._super(...arguments);
     if (isEmpty(this.get('map'))
       && (typeof FastBoot === 'undefined')) {
       const canvas = this.$().find('.g-map-canvas').get(0);

diff --git a/tests/unit/components/g-map-infowindow-test.js b/tests/unit/components/g-map-infowindow-test.js
@@ -102,6 +102,14 @@ test('it constructs new `InfoWindow` object during `buildInfowindow`', function(
   assert.equal(returnedInfowindow, fakeInfowindowObject);
 });
 
+test('it triggers `addListener` of infowindow during `buildInfowindow` if onOpen attr specified', function() {
+  run(() => component.set('attrs', { onOpen: 'action' }));
+  run(() => component.buildInfowindow());
+
+  sinon.assert.calledOnce(fakeInfowindowObject.addListener);
+  sinon.assert.calledWith(fakeInfowindowObject.addListener, 'domready');
+});
+
 test('it triggers `addListener` of infowindow during `buildInfowindow` if onClose attr specified', function() {
   run(() => component.set('attrs', { onClose: 'action' }));
   run(() => component.buildInfowindow());
@@ -110,12 +118,28 @@ test('it triggers `addListener` of infowindow during `buildInfowindow` if onClos
   sinon.assert.calledWith(fakeInfowindowObject.addListener, 'closeclick');
 });
 
+test('it doesn\'t trigger `addListener` during `buildInfowindow` if onOpen isn\'t specified', function() {
+  run(() => component.set('attrs', { onOpen: undefined }));
+  run(() => component.buildInfowindow());
+  sinon.assert.notCalled(fakeInfowindowObject.addListener);
+});
+
 test('it doesn\'t trigger `addListener` during `buildInfowindow` if onClose isn\'t specified', function() {
   run(() => component.set('attrs', { onClose: undefined }));
   run(() => component.buildInfowindow());
   sinon.assert.notCalled(fakeInfowindowObject.addListener);
 });
 
+test('it triggers `handleOpenClickEvent` on callback for `domready` event', function() {
+  fakeInfowindowObject.addListener.callsArg(1);
+  component.handleOpenClickEvent = sinon.stub();
+
+  run(() => component.set('attrs', { onOpen: 'action' }));
+  run(() => component.buildInfowindow());
+
+  sinon.assert.calledOnce(component.handleOpenClickEvent);
+});
+
 test('it triggers `handleCloseClickEvent` on callback for `closeclick` event', function() {
   fakeInfowindowObject.addListener.callsArg(1);
   component.handleCloseClickEvent = sinon.stub();
@@ -126,6 +150,16 @@ test('it triggers `handleCloseClickEvent` on callback for `closeclick` event', f
   sinon.assert.calledOnce(component.handleCloseClickEvent);
 });
 
+test('it sends action `onOpen` on `handleOpenClickEvent`', function() {
+  component.sendAction = sinon.stub();
+
+  run(() => component.set('attrs', { onOpen: 'action' }));
+  run(() => component.handleOpenClickEvent());
+
+  sinon.assert.calledOnce(component.sendAction);
+  sinon.assert.calledWith(component.sendAction, 'onOpen');
+});
+
 test('it sends action `onClose` on `handleCloseClickEvent`', function() {
   component.sendAction = sinon.stub();
 
@@ -136,6 +170,13 @@ test('it sends action `onClose` on `handleCloseClickEvent`', function() {
   sinon.assert.calledWith(component.sendAction, 'onClose');
 });
 
+test('it runs closure action `attrs.onOpen` directly on `handleOpenClickEvent`', function() {
+  run(() => component.set('attrs', { onOpen: sinon.stub() }));
+  run(() => component.handleOpenClickEvent());
+
+  sinon.assert.calledOnce(component.attrs.onOpen);
+});
+
 test('it runs closure action `attrs.onClose` directly on `handleCloseClickEvent`', function() {
   run(() => component.set('attrs', { onClose: sinon.stub() }));
   run(() => component.handleCloseClickEvent());