feat(*): support snazzy-info-window

packages/snazzy-info-window/directives/snazzy-info-window.ts

@@ -0,0 +1,127 @@
+import { Directive, Host, SkipSelf, OnChanges, EventEmitter, Input, SimpleChanges, ViewContainerRef, TemplateRef, Output, ElementRef } from '@angular/core';
+import { AgmMarker, GoogleMapsAPIWrapper, LatLngLiteral, LatLng, MarkerManager, MapsAPILoader } from '@agm/core';
+
+declare var System: any;
+
+@Directive({
+  // tslint:disable-next-line:directive-selector
+  selector: '[agmSnazzyInfoWindow]',
+  exportAs: 'agmSnazzyInfoWindow'
+})
+export class AgmSnazzyInfoWindow implements OnChanges {
+  @Input() position: LatLngLiteral|LatLng;
+  @Input() isOpen: boolean = false;
+  @Output() isOpenChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @Input() placement: 'top'|'bottom'|'left'|'right' = 'top';
+  @Input() maxWidth: number|string = 200;
+  @Input() maxHeight: number|string = 200;
+  @Input() backgroundColor: string;
+  @Input() padding: string;
+  @Input() borderRadius: string;
+  @Input() fontColor: string;
+  @Input() fontSize: string;
+  @Input() pointer: string;
+  @Input() shadow: boolean|{h?: string, v?: string, blur: string, spread: string, opacity: number, color: string};
+  @Input() openOnMarkerClick: boolean = true;
+  @Input() closeOnMapClick: boolean = true;
+  @Input() closeWhenOthersOpen: boolean = false;
+  @Input() showCloseButton: boolean = true;
+  @Input() panOnOpen: boolean = true;
+  @Output() beforeOpen: EventEmitter<void> = new EventEmitter<void>();
+  @Output() afterClose: EventEmitter<void> = new EventEmitter<void>();
+  protected _nativeSnazzyInfoWindow: any;
+  protected _snazzyInfoWindowInitialized: Promise<any>|null = null;
+
+  constructor(
+    private _elementRef: ElementRef,
+    private _viewContainerRef: ViewContainerRef,
+    private _templateRef: TemplateRef<AgmSnazzyInfoWindow>,
+    @Host() @SkipSelf() private _marker: AgmMarker,
+    private _wrapper: GoogleMapsAPIWrapper,
+    private _manager: MarkerManager,
+    private _loader: MapsAPILoader
+  ) {}
+
+  /**
+   * @internal
+   */
+  ngOnChanges(changes: SimpleChanges) {
+    if (this._snazzyInfoWindowInitialized == null) {
+      return;
+    }
+    if ('isOpen' in changes && this.isOpen) {
+      this._openInfoWindow();
+    } else if ('isOpen' in changes && !this.isOpen) {
+      this._closeInfoWindow();
+    }
+  }
+
+  /**
+   * @internal
+   */
+  ngOnInit() {
+    this._snazzyInfoWindowInitialized = this._loader.load()
+      .then(() => System.import('snazzy-info-window/dist/snazzy-info-window.js'))
+      .then((module: any) => Promise.all([module, this._manager.getNativeMarker(this._marker), this._wrapper.getNativeMap()]))
+      .then((elems) => {
+        this._nativeSnazzyInfoWindow = new elems[0]({
+          marker: elems[1],
+          map: elems[2],
+          content: this._viewContainerRef.element.nativeElement,
+          position: this.position,
+          placement: this.placement,
+          maxWidth: this.maxWidth,
+          maxHeight: this.maxHeight,
+          backgroundColor: this.backgroundColor,
+          padding: this.padding,
+          borderRadius: this.borderRadius,
+          fontColor: this.fontColor,
+          pointer: this.pointer,
+          shadow: this.shadow,
+          openOnMarkerClick: this.openOnMarkerClick,
+          closeWhenOthersOpen: this.closeWhenOthersOpen,
+          showCloseButton: this.showCloseButton,
+          panOnOpen: this.panOnOpen,
+          callbacks: {
+            beforeOpen: () => {
+              this._openInfoWindow(false);
+              this.beforeOpen.emit();
+            },
+            afterClose: () => {
+              this._destroyInfoWindowContent();
+              this.afterClose.emit();
+            }
+          }
+        });
+      });
+  }
+
+  protected _openInfoWindow(callSnazzy: boolean = true) {
+    this._snazzyInfoWindowInitialized.then(() => {
+      this._createViewContent();
+      this._nativeSnazzyInfoWindow.setContent(this._elementRef.nativeElement.nextSibling);
+      if (callSnazzy) {
+        this._nativeSnazzyInfoWindow.open();
+      }
+    });
+  }
+
+  protected _closeInfoWindow() {
+    this._snazzyInfoWindowInitialized.then(() => {
+      this._nativeSnazzyInfoWindow.close();
+      this._destroyInfoWindowContent();
+    });
+  }
+
+  protected _createViewContent() {
+    this._viewContainerRef.createEmbeddedView(this._templateRef);
+  }
+
+  protected _destroyInfoWindowContent() {
+    this._viewContainerRef.clear();
+  }
+
+  openStatus(): boolean {
+    return this.isOpen;
+  }
+}

packages/snazzy-info-window/index.ts

@@ -0,0 +1,2 @@
+// public API
+export { AgmSnazzyInfoWindowModule } from './snazzy-info-window.module';

packages/snazzy-info-window/package.tpl.json

@@ -0,0 +1,28 @@
+{
+  "name": "@agm/snazzy-info-window",
+  "version": "1.0.0-beta.1",
+  "description": "Angular Google Maps (AGM) package for Snazzy Info Window support",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SebastianM/angular-google-maps.git"
+  },
+  "keywords": [
+    "angular-google-maps",
+    "angular",
+    "snazzy-info-window",
+    "info-window",
+    "google-maps",
+    "agm"
+  ],
+  "author": "Sebastian Müller",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/SebastianM/angular-google-maps/issues"
+  },
+  "peerDependencies": {
+    "@angular/core": "^4.0.0",
+    "@agm/core": "^1.0.0-beta.0",
+    "snazzy-info-window": "^1.1.0"
+  },
+  "homepage": "https://github.com/SebastianM/angular-google-maps#readme"
+}

packages/snazzy-info-window/snazzy-info-window.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { AgmSnazzyInfoWindow } from './directives/snazzy-info-window';
+
+@NgModule({
+  declarations: [AgmSnazzyInfoWindow],
+  exports: [AgmSnazzyInfoWindow]
+})
+export class AgmSnazzyInfoWindowModule {}

rollup.snazzy-info-window.config.js

@@ -0,0 +1,22 @@
+export default {
+  entry: 'dist/snazzy-info-window/index.js',
+  dest: 'dist/snazzy-info-window/snazzy-info-window.umd.js',
+  format: 'umd',
+  moduleName: 'ngmaps.snazzyInfoWindow',
+  sourceMap: true,
+  globals: {
+    '@angular/core': 'ng.core',
+    '@angular/common': 'ng.common',
+    '@angular/compiler': 'ng.compiler',
+    '@angular/platform-browser': 'ng.platformBrowser',
+    '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic',
+    'rxjs/Subject': 'Rx',
+    'rxjs/observable/PromiseObservable': 'Rx',
+    'rxjs/operator/toPromise': 'Rx.Observable.prototype',
+    'rxjs/Observable': 'Rx',
+    'rxjs/Rx': 'Rx',
+    '@agm/core': 'ngmaps.core'
+  },
+  context: 'window',
+  external: ['rxjs', '@angular/core', 'rxjs/Observable']
+}

scripts/create-package-json.js

@@ -4,7 +4,7 @@
 const fs = require('fs');
 const path = require('path');
 
-const pkgNames = ['core'];
+const pkgNames = ['core', 'snazzy-info-window'];
 
 pkgNames.forEach(function(pkgName) {
   let basePkgJson;