angular2-google-maps
Version:
Angular 2 components for Google Maps
123 lines • 5.14 kB
JavaScript
"use strict";
var core_1 = require('@angular/core');
var info_window_manager_1 = require('../services/managers/info-window-manager');
var infoWindowId = 0;
/**
* SebmGoogleMapInfoWindow renders a info window inside a {@link SebmGoogleMapMarker} or standalone.
*
* ### Example
* ```typescript
* import { Component } from 'angular2/core';
* import { SebmGoogleMap, SebmGoogleMapMarker, SebmGoogleMapInfoWindow } from
* 'angular2-google-maps/core';
*
* @Component({
* selector: 'my-map-cmp',
* directives: [SebmGoogleMap, SebmGoogleMapMarker, SebmGoogleMapInfoWindow],
* styles: [`
* .sebm-google-map-container {
* height: 300px;
* }
* `],
* template: `
* <sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
* <sebm-google-map-marker [latitude]="lat" [longitude]="lng" [label]="'M'">
* <sebm-google-map-info-window [disableAutoPan]="true">
* Hi, this is the content of the <strong>info window</strong>
* </sebm-google-map-info-window>
* </sebm-google-map-marker>
* </sebm-google-map>
* `
* })
* ```
*/
var SebmGoogleMapInfoWindow = (function () {
function SebmGoogleMapInfoWindow(_infoWindowManager, _el) {
this._infoWindowManager = _infoWindowManager;
this._el = _el;
/**
* Sets the open state for the InfoWindow. You can also call the open() and close() methods.
*/
this.isOpen = false;
/**
* Emits an event when the info window is closed.
*/
this.infoWindowClose = new core_1.EventEmitter();
this._infoWindowAddedToManager = false;
this._id = (infoWindowId++).toString();
}
SebmGoogleMapInfoWindow.prototype.ngOnInit = function () {
this.content = this._el.nativeElement.querySelector('.sebm-google-map-info-window-content');
this._infoWindowManager.addInfoWindow(this);
this._infoWindowAddedToManager = true;
this._updateOpenState();
this._registerEventListeners();
};
/** @internal */
SebmGoogleMapInfoWindow.prototype.ngOnChanges = function (changes) {
if (!this._infoWindowAddedToManager) {
return;
}
if ((changes['latitude'] || changes['longitude']) && typeof this.latitude === 'number' &&
typeof this.longitude === 'number') {
this._infoWindowManager.setPosition(this);
}
if (changes['zIndex']) {
this._infoWindowManager.setZIndex(this);
}
if (changes['isOpen']) {
this._updateOpenState();
}
this._setInfoWindowOptions(changes);
};
SebmGoogleMapInfoWindow.prototype._registerEventListeners = function () {
var _this = this;
this._infoWindowManager.createEventObservable('closeclick', this).subscribe(function () {
_this.isOpen = false;
_this.infoWindowClose.emit();
});
};
SebmGoogleMapInfoWindow.prototype._updateOpenState = function () {
this.isOpen ? this.open() : this.close();
};
SebmGoogleMapInfoWindow.prototype._setInfoWindowOptions = function (changes) {
var options = {};
var optionKeys = Object.keys(changes).filter(function (k) { return SebmGoogleMapInfoWindow._infoWindowOptionsInputs.indexOf(k) !== -1; });
optionKeys.forEach(function (k) { options[k] = changes[k].currentValue; });
this._infoWindowManager.setOptions(this, options);
};
/**
* Opens the info window.
*/
SebmGoogleMapInfoWindow.prototype.open = function () { return this._infoWindowManager.open(this); };
/**
* Closes the info window.
*/
SebmGoogleMapInfoWindow.prototype.close = function () {
var _this = this;
return this._infoWindowManager.close(this).then(function () { _this.infoWindowClose.emit(); });
};
/** @internal */
SebmGoogleMapInfoWindow.prototype.id = function () { return this._id; };
/** @internal */
SebmGoogleMapInfoWindow.prototype.toString = function () { return 'SebmGoogleMapInfoWindow-' + this._id.toString(); };
/** @internal */
SebmGoogleMapInfoWindow.prototype.ngOnDestroy = function () { this._infoWindowManager.deleteInfoWindow(this); };
SebmGoogleMapInfoWindow._infoWindowOptionsInputs = ['disableAutoPan', 'maxWidth'];
SebmGoogleMapInfoWindow.decorators = [
{ type: core_1.Component, args: [{
selector: 'sebm-google-map-info-window',
inputs: ['latitude', 'longitude', 'disableAutoPan', 'isOpen', 'zIndex', 'maxWidth'],
outputs: ['infoWindowClose'],
template: "<div class='sebm-google-map-info-window-content'>\n <ng-content></ng-content>\n </div>\n "
},] },
];
/** @nocollapse */
SebmGoogleMapInfoWindow.ctorParameters = function () { return [
{ type: info_window_manager_1.InfoWindowManager, },
{ type: core_1.ElementRef, },
]; };
return SebmGoogleMapInfoWindow;
}());
exports.SebmGoogleMapInfoWindow = SebmGoogleMapInfoWindow;
//# sourceMappingURL=google-map-info-window.js.map