Merge 3213595 into 5423deb

addon/components/g-map-polyline-coordinate.js

@@ -0,0 +1,52 @@
+import Ember from 'ember';
+import layout from '../templates/components/g-map-polyline-coordinate';
+import GMapPolylineComponent from './g-map-polyline';
+
+const { isEmpty, isPresent, observer, computed, run, assert } = Ember;
+
+const GMapPolylineCoordinateComponent = Ember.Component.extend({
+  layout: layout,
+  classNames: ['g-map-polyline-coordinate'],
+
+  polyline: computed.alias('polylineContext.polyline'),
+
+  init() {
+    this._super(arguments);
+
+    const polylineContext = this.get('polylineContext');
+    assert('Must be inside {{#g-map-polyline}} component with context set', polylineContext instanceof GMapPolylineComponent);
+
+    polylineContext.registerCoordinate(this);
+  },
+
+  didInsertElement() {
+    this._super();
+    if (isEmpty(this.get('coordinate'))) {
+      const coordinate = new google.maps.LatLng();
+      this.set('coordinate', coordinate);
+    }
+    this.setPosition();
+  },
+
+  coordsChanged: observer('lat', 'lng', function() {
+    run.once(this, 'setPosition');
+  }),
+
+  setPosition() {
+    const polylineContext = this.get('polylineContext');
+    const lat = this.get('lat');
+    const lng = this.get('lng');
+
+    if (isPresent(polylineContext) && isPresent(lat) && isPresent(lng)) {
+      const coordinate = new google.maps.LatLng(lat, lng);
+      this.set('coordinate', coordinate);
+      polylineContext.setPath();
+    }
+  }
+});
+
+GMapPolylineCoordinateComponent.reopenClass({
+  positionalParams: ['polylineContext']
+});
+
+export default GMapPolylineCoordinateComponent;

addon/components/g-map-polyline.js

@@ -0,0 +1,205 @@
+import Ember from 'ember';
+import layout from '../templates/components/g-map-polyline';
+import GMapComponent from './g-map';
+import compact from '../utils/compact';
+
+
+const { isEmpty, isPresent, observer, computed, run, assert, typeOf } = Ember;
+
+const allowedPolylineOptions = Ember.A(['strokeColor', 'strokeWeight', 'strokeOpacity', 'zIndex']);
+
+const GMapPolylineComponent = Ember.Component.extend({
+  layout: layout,
+  classNames: ['g-map-polyline'],
+
+  map: computed.alias('mapContext.map'),
+
+  init() {
+    this._super(arguments);
+    this.infowindow = null;
+    this.set('coordinates', Ember.A());
+    if (isEmpty(this.get('group'))) {
+      this.set('group', null);
+    }
+
+    const mapContext = this.get('mapContext');
+    assert('Must be inside {{#g-map}} component with context set', mapContext instanceof GMapComponent);
+
+    mapContext.registerPolyline(this);
+  },
+
+  didInsertElement() {
+    this._super();
+    if (isEmpty(this.get('polyline'))) {
+      const options = compact(this.getProperties(allowedPolylineOptions));
+      const polyline = new google.maps.Polyline(options);
+      this.set('polyline', polyline);
+    }
+    this.setPath();
+    this.setMap();
+    this.setOnClick();
+  },
+
+  willDestroyElement() {
+    this.unsetPolylineFromMap();
+    this.get('mapContext').unregisterPolyline(this);
+  },
+
+  registerInfowindow(infowindow, openEvent, closeEvent) {
+    this.set('infowindow', infowindow);
+    this.attachOpenCloseEvents(infowindow, openEvent, closeEvent);
+  },
+
+  unregisterInfowindow() {
+    this.set('infowindow', null);
+  },
+
+  registerCoordinate(coordinate) {
+    this.get('coordinates').addObject(coordinate);
+  },
+
+  unregisterCoordinate(coordinate) {
+    this.get('coordinates').removeObject(coordinate);
+  },
+
+  attachOpenCloseEvents(infowindow, openEvent, closeEvent) {
+    const polyline = this.get('polyline');
+    if (openEvent === closeEvent) {
+      this.attachTogglingInfowindowEvent(polyline, infowindow, openEvent);
+    } else {
+      this.attachOpenInfowindowEvent(polyline, infowindow, openEvent);
+      this.attachCloseInfowindowEvent(polyline, infowindow, closeEvent);
+    }
+  },
+
+  attachOpenInfowindowEvent(polyline, infowindow, event) {
+    if (isPresent(event)) {
+      polyline.addListener(event, () => infowindow.open());
+    }
+  },
+
+  attachCloseInfowindowEvent(polyline, infowindow, event) {
+    if (isPresent(event)) {
+      polyline.addListener(event, () => infowindow.close());
+    }
+  },
+
+  attachTogglingInfowindowEvent(polyline, infowindow, event) {
+    if (isPresent(event)) {
+      polyline.addListener(event, () => {
+        if (infowindow.get('isOpen')) {
+          infowindow.close();
+        } else {
+          infowindow.open();
+        }
+      });
+    }
+  },
+
+  unsetPolylineFromMap() {
+    const polyline = this.get('polyline');
+    if (isPresent(polyline)) {
+      polyline.setMap(null);
+    }
+  },
+
+  mapWasSet: observer('map', function() {
+    run.once(this, 'setMap');
+  }),
+
+  setMap() {
+    const map = this.get('map');
+    const polyline = this.get('polyline');
+
+    if (isPresent(polyline) && isPresent(map)) {
+      polyline.setMap(map);
+    }
+  },
+
+  setPath() {
+    const polyline = this.get('polyline');
+    const coordinates = this.get('coordinates');
+    const options = compact(this.getProperties(allowedPolylineOptions));
+    var coordArray = [];
+    coordinates.forEach(function(coordinate){
+      const coord = coordinate.get('coordinate');
+      if (isPresent(coord)) {
+        coordArray.push(coord);
+      }
+    });
+    Ember.Logger.log(coordArray);
+    // assert('Must have at least two valid coordinates in {{#g-map-polyline}} component', coordArray.length > 1);
+    if (coordArray.length > 1 && isPresent(polyline) && isPresent(coordinates)) {
+      polyline.setPath(coordArray);
+    }
+    if (isPresent(polyline) && isPresent(options)) {
+      polyline.setOptions(options);
+    }
+  },
+
+  iconChanged: observer('icon', function() {
+    run.once(this, 'setIcon');
+  }),
+
+  setOnClick() {
+    const polyline = this.get('polyline');
+    if (isPresent(polyline)) {
+      polyline.addListener('click', () => this.sendOnClick());
+    }
+  },
+
+  labelChanged: observer('label', function() {
+    run.once(this, 'setLabel');
+  }),
+
+  setLabel() {
+    const polyline = this.get('polyline');
+    const label = this.get('label');
+
+    if (isPresent(polyline) && isPresent(label)) {
+      polyline.setLabel(label);
+    }
+  },
+
+  titleChanged: observer('title', function() {
+    run.once(this, 'setTitle');
+  }),
+
+  setTitle() {
+    const polyline = this.get('polyline');
+    const title = this.get('title');
+
+    if (isPresent(polyline) && isPresent(title)) {
+      polyline.setTitle(title);
+    }
+  },
+
+  sendOnClick() {
+    const { onClick } = this.attrs;
+    const mapContext = this.get('mapContext');
+    const group = this.get('group');
+
+    if (typeOf(onClick) === 'function') {
+      onClick();
+    } else {
+      this.sendAction('onClick');
+    }
+
+    if (isPresent(group)) {
+      mapContext.groupPolylineClicked(this, group);
+    }
+  },
+
+  closeInfowindow() {
+    const infowindow = this.get('infowindow');
+    if (isPresent(infowindow)) {
+      infowindow.close();
+    }
+  }
+});
+
+GMapPolylineComponent.reopenClass({
+  positionalParams: ['mapContext']
+});
+
+export default GMapPolylineComponent;

addon/components/g-map.js

@@ -11,6 +11,7 @@ export default Ember.Component.extend({
   init() {
     this._super();
     this.set('markers', Ember.A());
+    this.set('polylines', Ember.A());
     if (isEmpty(this.get('options'))) {
       this.set('options', {});
     }
@@ -88,6 +89,15 @@ export default Ember.Component.extend({
     this.get('markers').removeObject(marker);
   },
 
+
+  registerPolyline(polyline) {
+    this.get('polylines').addObject(polyline);
+  },
+
+  unregisterPolyline(polyline) {
+    this.get('polylines').removeObject(polyline);
+  },
+
   shouldFit: computed('markersFitMode', function() {
     return Ember.A(['init', 'live']).contains(this.get('markersFitMode'));
   }),

addon/templates/components/g-map-polyline-coordinate.hbs

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

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

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

app/components/g-map-polyline-coordinate.js

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

app/components/g-map-polyline.js

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

tests/dummy/app/templates/application.hbs

@@ -14,6 +14,13 @@
 </form>
 
 {{#g-map markersFitMode="live" options=customOptions as |context|}}
+
+  {{#g-map-polyline context strokeColor="green" strokeWeight="10" strokeOpacity="0.3" as |coordinateContext|}}
+    {{g-map-polyline-coordinate coordinateContext lat=37.7933 lng=-122.4567}}
+    {{g-map-polyline-coordinate coordinateContext lat=37.7933 lng=-122.4667}}
+    {{g-map-polyline-coordinate coordinateContext lat=37.7833 lng=-122.4667}}
+  {{/g-map-polyline}}
+
   {{g-map-marker context lat=37.7933 lng=-122.4467}}
 
   {{#g-map-marker context lat=37.7433 lng=-122.3867 as |markerContext|}}