@ngx-google-maps-tk/snazzy-info-window
Version:
Angular Google Maps (AGM) package for Snazzy Info Window support
280 lines (274 loc) • 12.1 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, TemplateRef, ElementRef, ViewContainerRef, Component, Optional, Host, SkipSelf, Input, Output, ViewChild, ContentChild, NgModule } from '@angular/core';
import * as i1 from '@ngx-google-maps-tk/core';
class AgmSnazzyInfoWindow {
constructor(_marker, _wrapper, _manager, _loader) {
this._marker = _marker;
this._wrapper = _wrapper;
this._manager = _manager;
this._loader = _loader;
/**
* Changes the open status of the snazzy info window.
*/
this.isOpen = false;
/**
* Emits when the open status changes.
*/
this.isOpenChange = new EventEmitter();
/**
* Choose where you want the info window to be displayed, relative to the marker.
*/
this.placement = 'top';
/**
* The max width in pixels of the info window.
*/
this.maxWidth = 200;
/**
* The max height in pixels of the info window.
*/
this.maxHeight = 200;
/**
* Determines if the info window will open when the marker is clicked.
* An internal listener is added to the Google Maps click event which calls the open() method.
*/
this.openOnMarkerClick = true;
/**
* Determines if the info window will close when the map is clicked. An internal listener is added to
* the Google Maps click event which calls the close() method.
* This will not activate on the Google Maps drag event when the user is panning the map.
*/
this.closeOnMapClick = true;
/**
* Determines if the info window will close when any other Snazzy Info Window is opened.
*/
this.closeWhenOthersOpen = false;
/**
* Determines if the info window will show a close button.
*/
this.showCloseButton = true;
/**
* Determines if the info window will be panned into view when opened.
*/
this.panOnOpen = true;
/**
* Emits before the info window opens.
*/
this.beforeOpen = new EventEmitter();
/**
* Emits before the info window closes.
*/
this.afterClose = new EventEmitter();
this._snazzyInfoWindowInitialized = null;
}
/**
* @internal
*/
ngOnChanges(changes) {
if (this._nativeSnazzyInfoWindow == null) {
return;
}
if ('isOpen' in changes && this.isOpen) {
this._openInfoWindow();
}
else if ('isOpen' in changes && !this.isOpen) {
this._closeInfoWindow();
}
if (('latitude' in changes || 'longitude' in changes) && this._marker == null) {
this._updatePosition();
}
}
/**
* @internal
*/
ngAfterViewInit() {
const m = this._manager != null ? this._manager.getNativeMarker(this._marker) : null;
this._snazzyInfoWindowInitialized = this._loader.load()
.then(() => import('snazzy-info-window'))
.then((module) => Promise.all([module, m, this._wrapper.getNativeMap()]))
.then((elems) => {
const options = {
map: elems[2],
content: '',
placement: this.placement,
maxWidth: this.maxWidth,
maxHeight: this.maxHeight,
backgroundColor: this.backgroundColor,
padding: this.padding,
border: this.border,
borderRadius: this.borderRadius,
fontColor: this.fontColor,
pointer: this.pointer,
shadow: this.shadow,
closeOnMapClick: this.closeOnMapClick,
openOnMarkerClick: this.openOnMarkerClick,
closeWhenOthersOpen: this.closeWhenOthersOpen,
showCloseButton: this.showCloseButton,
panOnOpen: this.panOnOpen,
wrapperClass: this.wrapperClass,
callbacks: {
beforeOpen: () => {
this._createViewContent();
this.beforeOpen.emit();
},
afterOpen: () => {
this.isOpenChange.emit(this.openStatus());
},
afterClose: () => {
this.afterClose.emit();
this.isOpenChange.emit(this.openStatus());
},
},
};
if (elems[1] != null) {
options.marker = elems[1];
}
else {
options.position = {
lat: this.latitude,
lng: this.longitude,
};
}
this._nativeSnazzyInfoWindow = new elems[0].default(options);
});
this._snazzyInfoWindowInitialized.then(() => {
if (this.isOpen) {
this._openInfoWindow();
}
});
}
_openInfoWindow() {
this._snazzyInfoWindowInitialized.then(() => {
this._createViewContent();
this._nativeSnazzyInfoWindow.open();
});
}
_closeInfoWindow() {
this._snazzyInfoWindowInitialized.then(() => {
this._nativeSnazzyInfoWindow.close();
});
}
_createViewContent() {
if (this._viewContainerRef.length === 1) {
return;
}
const evr = this._viewContainerRef.createEmbeddedView(this._templateRef);
this._nativeSnazzyInfoWindow.setContent(this._outerWrapper.nativeElement);
// we have to run this in a separate cycle.
setTimeout(() => {
evr.detectChanges();
});
}
_updatePosition() {
this._nativeSnazzyInfoWindow.setPosition({
lat: this.latitude,
lng: this.longitude,
});
}
/**
* Returns true when the Snazzy Info Window is initialized and open.
*/
openStatus() {
return this._nativeSnazzyInfoWindow && this._nativeSnazzyInfoWindow.isOpen();
}
/**
* @internal
*/
ngOnDestroy() {
if (this._nativeSnazzyInfoWindow) {
this._nativeSnazzyInfoWindow.destroy();
}
}
}
AgmSnazzyInfoWindow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: AgmSnazzyInfoWindow, deps: [{ token: i1.AgmMarker, host: true, optional: true, skipSelf: true }, { token: i1.GoogleMapsAPIWrapper }, { token: i1.MarkerManager }, { token: i1.MapsAPILoader }], target: i0.ɵɵFactoryTarget.Component });
AgmSnazzyInfoWindow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: AgmSnazzyInfoWindow, selector: "agm-snazzy-info-window", inputs: { latitude: "latitude", longitude: "longitude", isOpen: "isOpen", placement: "placement", maxWidth: "maxWidth", maxHeight: "maxHeight", backgroundColor: "backgroundColor", padding: "padding", border: "border", borderRadius: "borderRadius", fontColor: "fontColor", fontSize: "fontSize", pointer: "pointer", shadow: "shadow", openOnMarkerClick: "openOnMarkerClick", closeOnMapClick: "closeOnMapClick", wrapperClass: "wrapperClass", closeWhenOthersOpen: "closeWhenOthersOpen", showCloseButton: "showCloseButton", panOnOpen: "panOnOpen" }, outputs: { isOpenChange: "isOpenChange", beforeOpen: "beforeOpen", afterClose: "afterClose" }, queries: [{ propertyName: "_templateRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "_outerWrapper", first: true, predicate: ["outerWrapper"], descendants: true, read: ElementRef }, { propertyName: "_viewContainerRef", first: true, predicate: ["viewContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: '<div #outerWrapper><div #viewContainer></div></div><ng-content></ng-content>', isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: AgmSnazzyInfoWindow, decorators: [{
type: Component,
args: [{
// tslint:disable-next-line:component-selector
selector: 'agm-snazzy-info-window',
template: '<div #outerWrapper><div #viewContainer></div></div><ng-content></ng-content>',
}]
}], ctorParameters: function () {
return [{ type: i1.AgmMarker, decorators: [{
type: Optional
}, {
type: Host
}, {
type: SkipSelf
}] }, { type: i1.GoogleMapsAPIWrapper }, { type: i1.MarkerManager }, { type: i1.MapsAPILoader }];
}, propDecorators: { latitude: [{
type: Input
}], longitude: [{
type: Input
}], isOpen: [{
type: Input
}], isOpenChange: [{
type: Output
}], placement: [{
type: Input
}], maxWidth: [{
type: Input
}], maxHeight: [{
type: Input
}], backgroundColor: [{
type: Input
}], padding: [{
type: Input
}], border: [{
type: Input
}], borderRadius: [{
type: Input
}], fontColor: [{
type: Input
}], fontSize: [{
type: Input
}], pointer: [{
type: Input
}], shadow: [{
type: Input
}], openOnMarkerClick: [{
type: Input
}], closeOnMapClick: [{
type: Input
}], wrapperClass: [{
type: Input
}], closeWhenOthersOpen: [{
type: Input
}], showCloseButton: [{
type: Input
}], panOnOpen: [{
type: Input
}], beforeOpen: [{
type: Output
}], afterClose: [{
type: Output
}], _outerWrapper: [{
type: ViewChild,
args: ['outerWrapper', { read: ElementRef, static: false }]
}], _viewContainerRef: [{
type: ViewChild,
args: ['viewContainer', { read: ViewContainerRef, static: false }]
}], _templateRef: [{
type: ContentChild,
args: [TemplateRef, { static: false }]
}] } });
class AgmSnazzyInfoWindowModule {
}
AgmSnazzyInfoWindowModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: AgmSnazzyInfoWindowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
AgmSnazzyInfoWindowModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: AgmSnazzyInfoWindowModule, declarations: [AgmSnazzyInfoWindow], exports: [AgmSnazzyInfoWindow] });
AgmSnazzyInfoWindowModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: AgmSnazzyInfoWindowModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: AgmSnazzyInfoWindowModule, decorators: [{
type: NgModule,
args: [{
declarations: [AgmSnazzyInfoWindow],
exports: [AgmSnazzyInfoWindow],
}]
}] });
/*
* Public API Surface of snazzy-info-window
*/
/**
* Generated bundle index. Do not edit.
*/
export { AgmSnazzyInfoWindow, AgmSnazzyInfoWindowModule };
//# sourceMappingURL=ngx-google-maps-tk-snazzy-info-window.mjs.map