Refactor internals – 🎬 2

addon/components/g-map.js

@@ -19,7 +19,7 @@ const GMapAPI = {
   components: 'components',
   actions: {
     update: '_updateMap',
-    trigger: 'trigger',
+    trigger: '_trigger',
   }
 };
 
@@ -184,8 +184,8 @@ export default Component.extend(ProcessOptions, RegisterEvents, {
    * @param {String} event Event name
    * @return
    */
-  _trigger(event) {
-    google.maps.event.trigger(get(this, 'map'), event);
+  _trigger(...args) {
+    google.maps.event.trigger(get(this, 'map'), ...args);
   },
 
   _registerCanvas(canvas, isCustomCanvas = false) {

addon/components/g-map/autocomplete.js

@@ -17,6 +17,14 @@ export default MapComponent.extend({
   _type: 'autocomplete',
   _ignoredAttrs: ['onSearch'],
 
+  init() {
+    this._super(...arguments);
+
+    this.publicAPI.reopen({
+      place: 'place'
+    });
+  },
+
   _addComponent() {
     let map = get(this, 'map');
 
@@ -38,10 +46,10 @@ export default MapComponent.extend({
   },
 
   _onSearch() {
-    const place = this.mapComponent.getPlace();
-    const map = get(this, 'map');
-    if (place.geometry) {
-      tryInvoke(this, 'onSearch', [{ place, map }]);
+    this.place = this.mapComponent.getPlace();
+
+    if (this.place.geometry) {
+      tryInvoke(this, 'onSearch', [this.publicAPI]);
     }
   }
 });

addon/components/g-map/circle.js

@@ -15,7 +15,6 @@ export default Marker.extend({
   _requiredOptions: ['center', 'radius'],
 
   radius: 500,
-
   center: reads('position'),
 
   _addComponent() {

addon/components/g-map/info-window.js

@@ -26,6 +26,7 @@ export default MapComponent.extend({
 
   init() {
     this._super(...arguments);
+
     if (!get(this, 'target')) {
       this._requiredOptions = this._requiredOptions.concat(['position']);
     }
@@ -55,32 +56,39 @@ export default MapComponent.extend({
 
   _addComponent() {
     this._prepareContent();
+
     let options = get(this, '_options');
     delete options.map;
+
     if (!get(this, 'isOpen')) {
       delete options.content;
     }
+
     set(this, 'mapComponent', new google.maps.InfoWindow(options));
   },
 
   _didAddComponent() {
     if (get(this, 'isOpen')) {
       this.open();
     }
+
     this._super(...arguments);
   },
 
   _updateComponent() {
     let options = get(this, '_options');
+
     if (!get(this, 'isOpen')) {
       delete options.content;
     }
+
     this.mapComponent.setOptions(options);
   },
 
   _prepareContent() {
     if (!get(this, 'content')) {
-      const content = document.createElement('div');
+      let content = document.createElement('div');
+
       set(this, '_targetPane', content);
       set(this, 'content', content);
     }
@@ -91,6 +99,7 @@ export default MapComponent.extend({
       google.maps.event.addListenerOnce(this.mapComponent, 'closeclick', () => {
         set(this, 'isOpen', false);
       });
+
       this.mapComponent.open(get(this, 'map'), get(this, 'target'));
     }
   },

addon/components/g-map/map-component.js

@@ -5,6 +5,7 @@ import PublicAPI from '../../utils/public-api';
 import { get, set } from '@ember/object';
 import { tryInvoke } from '@ember/utils';
 import { defer, resolve } from 'rsvp';
+import { assert } from '@ember/debug';
 
 const MapComponentAPI = {
   map: 'map',
@@ -26,11 +27,14 @@ const MapComponentAPI = {
 const MapComponent = Component.extend(ProcessOptions, RegisterEvents, {
   tagName: '',
 
+  _type: null,
   _requiredOptions: ['map'],
 
   init() {
     this._super(...arguments);
 
+    assert('You must set a _type property on the map component.', this._type);
+
     this.isInitialized = defer();
     this.isInitialized.promise.then(() => set(this, '_isInitialized', true));
 
@@ -39,17 +43,20 @@ const MapComponent = Component.extend(ProcessOptions, RegisterEvents, {
 
   didInsertElement() {
     this._super(...arguments);
+
     this._internalAPI._registerComponent(this._type, this.publicAPI);
     this._updateOrAddComponent();
   },
 
   didUpdateAttrs() {
     this._super(...arguments);
+
     this._updateOrAddComponent();
   },
 
   willDestroyElement() {
     this._super(...arguments);
+
     tryInvoke(this.mapComponent, 'setMap', [null]);
     this._internalAPI._unregisterComponent(this._type, this.publicAPI);
   },
@@ -60,9 +67,9 @@ const MapComponent = Component.extend(ProcessOptions, RegisterEvents, {
     if (this._isInitialized) {
       this._updateComponent();
     } else {
-      (this._addComponent() || resolve())
-        .then(() => this._didAddComponent())
-        .catch(() => {});
+      resolve()
+        .then(() => this._addComponent())
+        .then(() => this._didAddComponent());
     }
   },
 
@@ -73,7 +80,9 @@ const MapComponent = Component.extend(ProcessOptions, RegisterEvents, {
    * @method _addComponent
    * @return
    */
-  _addComponent() {},
+  _addComponent() {
+    assert('Map components must implement the _addComponent hook.');
+  },
 
   /**
    * Run after the map component has been initialized. This hook should be used

addon/components/g-map/marker.js

@@ -15,22 +15,12 @@ export default MapComponent.extend({
   layout,
   tagName: '',
 
-  _requiredOptions: ['position'],
-
   _type: 'marker',
+  _requiredOptions: ['position'],
 
   position,
 
   _addComponent() {
     set(this, 'mapComponent', new google.maps.Marker(get(this, '_options')));
-  },
-
-  /**
-   * @method getPosition
-   * @public
-   * @return {[google.maps.LatLng]}
-   */
-  getPosition() {
-    return this.mapComponent && this.mapComponent.getPosition();
   }
 });

addon/components/g-map/overlay.js

@@ -37,7 +37,7 @@ export default MapComponent.extend({
   }),
 
   _addComponent() {
-    const Overlay = new google.maps.OverlayView();
+    let Overlay = new google.maps.OverlayView();
 
     return new Promise((resolve) => {
       Overlay.onAdd = () => this.add();

addon/components/g-map/route.js

@@ -19,10 +19,12 @@ export default MapComponent.extend({
   _requiredOptions: ['directions'],
 
   _addComponent() {
-    const options = get(this, '_options');
+    let options = get(this, '_options');
+
     if (!options.directions) {
       return reject();
     }
+
     set(this, 'mapComponent', new google.maps.DirectionsRenderer(options));
   }
 });

addon/components/g-map/waypoint.js

@@ -19,11 +19,13 @@ export default Component.extend(ProcessOptions, {
 
   didReceiveAttrs() {
     this._super(...arguments);
+
     this._registerWaypoint(get(this, '_options'));
   },
 
   willDestroyElement() {
     this._super(...arguments);
+
     this._unregisterWaypoint(get(this, '_options'));
   }
 });

addon/mixins/process-options.js

@@ -16,6 +16,8 @@ function removeObservers(obj, keys, callback) {
  * @extends Ember.Mixin
  */
 export default Mixin.create({
+  concatenatedProperties: ['_requiredOptions', '_watchedOptions', '_ignoredAttrs'],
+
   /**
    * Specify which attributes on the component should be ignored and never
    * considered as a Google Maps option or event.
@@ -24,9 +26,7 @@ export default Mixin.create({
    * @private
    * @type {String[]}
    */
-  _ignoredAttrs: ['map', '_internalAPI', 'lat', 'lng'],
-
-  concatenatedProperties: ['_requiredOptions', '_watchedOptions', '_ignoredAttrs'],
+  _ignoredAttrs: ['map', '_internalAPI', 'lat', 'lng', 'events'],
 
   /**
    * Required options that are always included in the options object passed to
@@ -57,29 +57,41 @@ export default Mixin.create({
    * @return {Object}
    */
   options: computed('attrs', 'events', function() {
-    let attrs = Object.keys(this.attrs).filter((k) => {
-      return [...get(this, '_ignoredAttrs'), ...(get(this, 'events') || [])].indexOf(k) === -1;
+    let { _ignoredAttrs, _eventAttrs } = getProperties(this, '_ignoredAttrs', '_eventAttrs');
+    let ignoredAttrs = [..._ignoredAttrs, ..._eventAttrs];
+
+    let attrs = Object.keys(this.attrs).filter((attr) => {
+      return ignoredAttrs.indexOf(attr) === -1;
     });
+
     return getProperties(this, attrs);
   }),
 
   _options: computed('map', 'options', function() {
     let options = get(this, 'options');
-    let required = getProperties(this, get(this, '_requiredOptions'));
+    let _requiredOptions = get(this, '_requiredOptions');
+    let required = getProperties(this, _requiredOptions);
+
     return assign(required, options);
   }),
 
   init() {
     this._super(...arguments);
-    let watched = get(this, '_watchedOptions');
 
-    if (watched.length > 0) {
-      addObservers(this, watched, this._updateComponent);
+    if (!this._eventAttrs) {
+      this._eventAttrs = [];
+    }
+
+    let _watchedOptions = get(this, '_watchedOptions');
+    if (_watchedOptions.length > 0) {
+      addObservers(this, _watchedOptions, this._updateComponent);
     }
   },
 
   willDestroyElement() {
-    removeObservers(this, get(this, '_watchedOptions'), this._updateComponent);
+    let _watchedOptions = get(this, '_watchedOptions');
+    removeObservers(this, _watchedOptions, this._updateComponent);
+
     this._super(...arguments);
   }
 });