Pull infowindows into separate component

addon/components/g-map-infowindow.js

@@ -0,0 +1,101 @@
+import Ember from 'ember';
+import layout from '../templates/components/g-map-infowindow';
+import GMapComponent from './g-map';
+import GMapMarkerComponent from './g-map-marker';
+
+const { isEmpty, isPresent, observer, computed, run, assert } = Ember;
+
+const GMapInfowindowComponent = Ember.Component.extend({
+  layout: layout,
+  classNames: ['g-map-marker'],
+
+  map: computed.alias('mapContext.map'),
+  marker: computed.alias('mapContext.marker'),
+
+  init() {
+    this._super(arguments);
+
+    let mapContext = this.get('mapContext');
+    let hasMap = mapContext instanceof GMapComponent;
+    let hasMarker = mapContext instanceof GMapMarkerComponent;
+    assert('Must be inside {{#g-map}} or {{#g-map-marker}} components with context set',
+      hasMarker || hasMap);
+
+    this.set('hasMarker', hasMarker);
+  },
+
+  didInsertElement() {
+    this._super();
+    if (isEmpty(this.get('infowindow'))) {
+      let infowindow = new google.maps.InfoWindow({
+        content: this.get('element')
+      });
+      this.set('infowindow', infowindow);
+    }
+    this.setPosition();
+    this.setMap();
+    this.setMarker();
+  },
+
+  willDestroyElement() {
+    this.close();
+  },
+
+  close() {
+    let infowindow = this.get('infowindow');
+    if (isPresent(infowindow)) {
+      infowindow.close();
+    }
+  },
+
+  mapWasSet: observer('map', function() {
+    run.once(this, 'setMap');
+  }),
+
+  setMap() {
+    let map = this.get('map');
+    let hasMarker = this.get('hasMarker');
+    let infowindow = this.get('infowindow');
+
+    if (isPresent(infowindow) && isPresent(map) && !hasMarker) {
+      infowindow.open(map);
+    }
+  },
+
+  markerWasSet: observer('marker', function() {
+    run.once(this, 'setMarker');
+  }),
+
+  setMarker() {
+    let map = this.get('map');
+    let marker = this.get('marker');
+    let infowindow = this.get('infowindow');
+
+    if (isPresent(infowindow) && isPresent(map) && isPresent(marker)) {
+      marker.addListener('click', function() {
+        infowindow.open(map, marker);
+      });
+    }
+  },
+
+  coordsChanged: observer('lat', 'lng', function() {
+    run.once(this, 'setPosition');
+  }),
+
+  setPosition() {
+    let infowindow = this.get('infowindow');
+    let lat = this.get('lat');
+    let lng = this.get('lng');
+
+    if (isPresent(infowindow) && isPresent(lat) && isPresent(lng)) {
+      let position = new google.maps.LatLng(lat, lng);
+      infowindow.setPosition(position);
+    }
+  }
+});
+
+GMapInfowindowComponent.reopenClass({
+  positionalParams: ['mapContext']
+});
+
+export default GMapInfowindowComponent;

addon/components/g-map-marker.js

@@ -16,9 +16,6 @@ const GMapMarkerComponent = Ember.Component.extend({
     let mapContext = this.get('mapContext');
     assert('Must be inside {{#g-map}} component with context set', mapContext instanceof GMapComponent);
 
-    if (isEmpty(this.get('withInfowindow'))) {
-      this.set('withInfowindow', false);
-    }
     this.register();
   },
 
@@ -63,23 +60,6 @@ const GMapMarkerComponent = Ember.Component.extend({
 
     if (isPresent(marker) && isPresent(map)) {
       marker.setMap(map);
-      if (this.get('withInfowindow')) {
-        this.setInfowindow();
-      }
-    }
-  },
-
-  setInfowindow() {
-    let map = this.get('map');
-    let marker = this.get('marker');
-
-    if (isPresent(marker) && isPresent(map)) {
-      let infowindow = new google.maps.InfoWindow({
-        content: this.get('element')
-      });
-      marker.addListener('click', function() {
-        infowindow.open(map, marker);
-      });
     }
   },
 

addon/templates/components/g-map-infowindow.hbs

@@ -0,0 +1,6 @@
+{{#if hasBlock}}
+  {{yield}}
+{{else}}
+  <h1>{{title}}</h1>
+  <p>{{message}}</p>
+{{/if}}

addon/templates/components/g-map-marker.hbs

@@ -1 +1 @@
-{{yield}}
+{{yield this}}

app/components/g-map-infowindow.js

@@ -0,0 +1 @@
+export { default } from 'ember-g-map/components/g-map-infowindow';

tests/dummy/app/templates/application.hbs

@@ -3,15 +3,26 @@
 {{#g-map shouldFit=true as |context|}}
   {{g-map-marker context lat=37.7933 lng=-122.4167}}
 
-  {{#g-map-marker context lat=37.7733 lng=-122.4167 withInfowindow=true}}
-    <h1>Pretty Infowindow!</h1>
-    <p>It can has bound variables:</p>
-    <p>Random: {{randomVariable}}</p>
+  {{#g-map-marker context lat=37.7733 lng=-122.4167 as |markerContext|}}
+    {{#g-map-infowindow markerContext}}
+      <h1>Bound Infowindow</h1>
+      <p>This infowindow is bound to a marker.</p>
+      <p>It can has bound variables:</p>
+      <p>Random: {{randomVariable}}</p>
 
-    <p>And elements with actions:</p>
-    <button {{action "refresh"}}>Refresh</button>
+      <p>And elements with actions:</p>
+      <button {{action "refresh"}}>Refresh</button>
+    {{/g-map-infowindow}}
   {{/g-map-marker}}
 
+  {{#g-map-infowindow context lat=37.7533 lng=-122.4267}}
+    <h1>Independent Infowindow</h1>
+    <p>This infowindow can be placed anywhere on the map.</p>
+  {{/g-map-infowindow}}
+
+  {{g-map-infowindow context title="Blockless Infowindow" message="Conatains plain text"
+                     lat=37.7933 lng=-122.4267}}
+
   {{g-map-route context
                 originLat=37.7933 originLng=-122.4167
                 destinationLat=37.7733 destinationLng=-122.4167}}

tests/integration/components/g-map-infowindow-test.js

@@ -0,0 +1,54 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('g-map-infowindow', 'Integration | Component | g map infowindow', {
+  integration: true
+});
+
+test('it renders inside {{g-map}} component', function(assert) {
+  assert.expect(2);
+
+  this.render(hbs`
+    {{#g-map as |context|}}
+      {{g-map-infowindow context}}
+    {{/g-map}}
+  `);
+
+  assert.equal(this.$().text().trim(), '');
+
+  this.render(hbs`
+    {{#g-map as |context|}}
+      {{#g-map-infowindow context}}
+        template block text
+      {{/g-map-infowindow}}
+    {{/g-map}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});
+
+test('it renders inside {{g-map-marker}} component', function(assert) {
+  assert.expect(2);
+
+  this.render(hbs`
+    {{#g-map as |context|}}
+      {{#g-map-marker context as |markerContext|}}
+        {{g-map-infowindow markerContext}}
+      {{/g-map-marker}}
+    {{/g-map}}
+  `);
+
+  assert.equal(this.$().text().trim(), '');
+
+  this.render(hbs`
+    {{#g-map as |context|}}
+      {{#g-map-marker context as |markerContext|}}
+        {{#g-map-infowindow markerContext}}
+          template block text
+        {{/g-map-infowindow}}
+      {{/g-map-marker}}
+    {{/g-map}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});