@jmarcelof/leaflet-ng2
Version:
Angular2 module for Leaflet
580 lines • 22.7 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
}
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
};
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var leaflet_1 = require("leaflet");
var layer_provider_1 = require("./layer.provider");
/**
* Angular2 directive for Leaflet popups.
*
* *You can use this directive in an Angular2 template after importing `YagaModule`.*
*
* How to use in a template:
* ```html
* <yaga-map>
* <yaga-marker>
* <yaga-popup
* [(content)]="..."
* [(opened)]="..."
* [(lat)]="..."
* [(lng)]="..."
* [(position)]="..."
*
* (open)="..."
* (close)="..."
*
* [maxWidth]="..."
* [minWidth]="..."
* [maxHeight]="..."
* [autoPan]="..."
* [autoPanPaddingTopLeft]="..."
* [autoPanPaddingBottomRight]="..."
* [autoPanPadding]="..."
* [keepInView]="..."
* [closeButton]="..."
* [autoClose]="..."
* [className]="..."
* [pane]="..."
* >
* <p>You can pass your content right here!</p>
* </yaga-popup>
* </yaga-marker>
* </yaga-map>
* ```
*/
var PopupDirective = /** @class */ (function (_super) {
__extends(PopupDirective, _super);
function PopupDirective(elementRef, layerProvider) {
var _this = _super.call(this) || this;
_this.layerProvider = layerProvider;
/**
* Two-Way bound property for the content of a popup.
* Use it with `<yaga-popup [(content)]="someValue">` or `<yaga-popup (contentChange)="processEvent($event)">`
*
* You can also pass the content directly within the web-component as view-content
* @link http://leafletjs.com/reference-1.2.0.html#popup-setcontent Original Leaflet documentation
*/
_this.contentChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the state of being opened.
* Use it with `<yaga-popup [(opened)]="someValue">` or `<yaga-popup (openedChange)="processEvent($event)">`
*
* You can also use the `popupOpened` property in the parent directives
* @link http://leafletjs.com/reference-1.2.0.html#popup-openon Original Leaflet documentation
*/
_this.openedChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the latitude position of the popup.
* Use it with `<yaga-popup [(lat)]="someValue">` or `<yaga-popup (latChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#popup-setlatlng Original Leaflet documentation
*/
_this.latChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the longitude position of the popup.
* Use it with `<yaga-popup [(lng)]="someValue">` or `<yaga-popup (lngChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#popup-setlatlng Original Leaflet documentation
*/
_this.lngChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the position (LatLng) of the popup.
* Use it with `<yaga-popup [(position)]="someValue">` or `<yaga-popup (positionChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#popup-setlatlng Original Leaflet documentation
*/
_this.positionChange = new core_1.EventEmitter();
/**
* From leaflet fired open event.
* Use it with `<yaga-popup (open)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#popup-popupopen Original Leaflet documentation
*/
_this.openEvent = new core_1.EventEmitter();
/**
* From leaflet fired close event.
* Use it with `<yaga-popup (close)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#popup-popupclose Original Leaflet documentation
*/
_this.closeEvent = new core_1.EventEmitter();
_this.setContent(elementRef.nativeElement);
_this.on("add", function (event) {
_this.openEvent.emit(event);
_this.openedChange.emit(true);
});
_this.on("remove", function (event) {
_this.closeEvent.emit(event);
_this.openedChange.emit(false);
});
_this.on("popupopen", function (event) {
_this.openEvent.emit(event);
});
_this.on("popuclose", function (event) {
_this.closeEvent.emit(event);
});
_this.layerProvider.ref.bindPopup(_this);
return _this;
}
PopupDirective.prototype.ngOnDestroy = function () {
this.layerProvider.ref.unbindPopup();
};
/**
* Derived method of the original setContent method.
* @link http://leafletjs.com/reference-1.2.0.html#popup-setcontent Original Leaflet documentation
*/
PopupDirective.prototype.setContent = function (content) {
this.contentChange.emit((content));
return _super.prototype.setContent.call(this, content);
};
Object.defineProperty(PopupDirective.prototype, "content", {
get: function () {
return this.getContent();
},
/**
* Two-Way bound property for the content.
* Use it with `<yaga-popup [(content)]="someValue">` or `<yaga-popup [content]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#popup-setcontent Original Leaflet documentation
*/
set: function (val) {
this.setContent(val);
},
enumerable: true,
configurable: true
});
Object.defineProperty(PopupDirective.prototype, "opened", {
get: function () {
return !!this._map;
},
/**
* Two-Way bound property for the opened state.
* Use it with `<yaga-popup [(opened)]="someValue">` or `<yaga-popup [opened]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#popup-openon Original Leaflet documentation
*/
set: function (val) {
if (val) {
this.layerProvider.ref.openPopup();
return;
}
this.layerProvider.ref.closePopup();
},
enumerable: true,
configurable: true
});
/**
* Derived method of the original setLatLng method.
* @link http://leafletjs.com/reference-1.2.0.html#popup-setlatlng Original Leaflet documentation
*/
PopupDirective.prototype.setLatLng = function (latlng) {
_super.prototype.setLatLng.call(this, latlng);
this.latChange.emit(this.lat);
this.lngChange.emit(this.lng);
this.positionChange.emit(leaflet_1.latLng(this.lat, this.lng));
return this;
};
Object.defineProperty(PopupDirective.prototype, "lat", {
get: function () {
if (!this.getLatLng()) {
return NaN;
}
return this.getLatLng().lat;
},
/**
* Two-Way bound property for the latitude position of the popup.
* Use it with `<yaga-popup [(lat)]="someValue">` or `<yaga-popup [lat]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#popup-setlatlng Original Leaflet documentation
*/
set: function (val) {
this.setLatLng([val, this.lng]);
},
enumerable: true,
configurable: true
});
Object.defineProperty(PopupDirective.prototype, "lng", {
get: function () {
if (!this.getLatLng()) {
return NaN;
}
return this.getLatLng().lng;
},
/**
* Two-Way bound property for the longitude position of the popup.
* Use it with `<yaga-popup [(lng)]="someValue">` or `<yaga-popup [lng]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#popup-setlatlng Original Leaflet documentation
*/
set: function (val) {
this.setLatLng([this.lat, val]);
},
enumerable: true,
configurable: true
});
Object.defineProperty(PopupDirective.prototype, "position", {
get: function () {
if (!this.getLatLng()) {
return new leaflet_1.LatLng(NaN, NaN);
}
return this.getLatLng();
},
/**
* Two-Way bound property for the position of the popup.
* Use it with `<yaga-popup [(position)]="someValue">` or `<yaga-popup [position]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#popup-setlatlng Original Leaflet documentation
*/
set: function (val) {
this.setLatLng(val);
},
enumerable: true,
configurable: true
});
Object.defineProperty(PopupDirective.prototype, "maxWidth", {
get: function () {
return this.options.maxWidth;
},
/**
* Input for the maxWidth.
* Use it with `<yaga-popup [maxWidth]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#popup-maxwidth Original Leaflet documentation
*/
set: function (val) {
this.options.maxWidth = val;
this.reopen();
},
enumerable: true,
configurable: true
});
Object.defineProperty(PopupDirective.prototype, "minWidth", {
get: function () {
return this.options.minWidth;
},
/**
* Input for the minWidth.
* Use it with `<yaga-popup [minWidth]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#popup-minwidth Original Leaflet documentation
*/
set: function (val) {
this.options.minWidth = val;
this.reopen();
},
enumerable: true,
configurable: true
});
Object.defineProperty(PopupDirective.prototype, "maxHeight", {
get: function () {
return this.options.maxHeight;
},
/**
* Input for the maxHeight.
* Use it with `<yaga-popup [maxHeight]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#popup-maxheight Original Leaflet documentation
*/
set: function (val) {
this.options.maxHeight = val;
this.reopen();
},
enumerable: true,
configurable: true
});
Object.defineProperty(PopupDirective.prototype, "autoPan", {
get: function () {
return !!this.options.autoPan;
},
/**
* Input for the autoPan.
* Use it with `<yaga-popup [autoPan]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#popup-autopan Original Leaflet documentation
*/
set: function (val) {
this.options.autoPan = val;
this.reopen();
},
enumerable: true,
configurable: true
});
Object.defineProperty(PopupDirective.prototype, "autoPanPaddingTopLeft", {
get: function () {
return this.options.autoPanPaddingTopLeft;
},
/**
* Input for the autoPanPaddingTopLeft.
* Use it with `<yaga-popup [autoPanPaddingTopLeft]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#popup-autopanpaddingtopleft Original Leaflet documentation
*/
set: function (val) {
this.options.autoPanPaddingTopLeft = val;
this.reopen();
},
enumerable: true,
configurable: true
});
Object.defineProperty(PopupDirective.prototype, "autoPanPaddingBottomRight", {
get: function () {
return this.options.autoPanPaddingBottomRight;
},
/**
* Input for the autoPanPaddingBottomRight.
* Use it with `<yaga-popup [autoPanPaddingBottomRight]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#popup-autopanpaddingbottomleft Original Leaflet documentation
*/
set: function (val) {
this.options.autoPanPaddingBottomRight = val;
this.reopen();
},
enumerable: true,
configurable: true
});
Object.defineProperty(PopupDirective.prototype, "autoPanPadding", {
get: function () {
return this.options.autoPanPadding;
},
/**
* Input for the autoPanPadding.
* Use it with `<yaga-popup [autoPanPadding]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#popup-autopanpadding Original Leaflet documentation
*/
set: function (val) {
this.options.autoPanPadding = val;
this.reopen();
},
enumerable: true,
configurable: true
});
Object.defineProperty(PopupDirective.prototype, "keepInView", {
get: function () {
return !!this.options.keepInView;
},
/**
* Input for the keyInView.
* Use it with `<yaga-popup [keyInView]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#popup-keyinview Original Leaflet documentation
*/
set: function (val) {
this.options.keepInView = val;
this.reopen();
},
enumerable: true,
configurable: true
});
Object.defineProperty(PopupDirective.prototype, "closeButton", {
get: function () {
return !!this.options.closeButton;
},
/**
* Input for the closeButton.
* Use it with `<yaga-popup [closeButton]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#popup-closebutton Original Leaflet documentation
*/
set: function (val) {
this.options.closeButton = val;
this.reopen();
},
enumerable: true,
configurable: true
});
Object.defineProperty(PopupDirective.prototype, "autoClose", {
get: function () {
return !!this.options.autoClose;
},
/**
* Input for the autoClose.
* Use it with `<yaga-popup [autoClose]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#popup-autoclose Original Leaflet documentation
*/
set: function (val) {
this.options.autoClose = val;
this.reopen();
},
enumerable: true,
configurable: true
});
Object.defineProperty(PopupDirective.prototype, "className", {
get: function () {
return this.options.className;
},
/**
* Input for the CSS class name.
* Use it with `<yaga-popup [autoClose]="className">`
* @link http://leafletjs.com/reference-1.2.0.html#popup-classname Original Leaflet documentation
*/
set: function (val) {
if (!this._container) {
this.options.className = val;
return;
}
var oldClassName = this._container.getAttribute("class") || "";
var newClassNameSplited = oldClassName.split(" " + this.options.className + " ");
if (newClassNameSplited.length === 1) {
newClassNameSplited.push("");
}
this._container.setAttribute("class", newClassNameSplited.join(" " + val + " ").trim());
this.options.className = val;
},
enumerable: true,
configurable: true
});
Object.defineProperty(PopupDirective.prototype, "pane", {
get: function () {
return this.options.pane;
},
/**
* Input for the pane.
* Use it with `<yaga-popup [pane]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#popup-pane Original Leaflet documentation
*/
set: function (val) {
this.options.pane = val;
this.reopen();
},
enumerable: true,
configurable: true
});
PopupDirective.prototype.reopen = function (force) {
if (force === void 0) { force = false; }
if (force || this.opened) {
this.layerProvider.ref.closePopup();
this.layerProvider.ref.openPopup();
}
};
__decorate([
core_1.Output(),
__metadata("design:type", core_1.EventEmitter)
], PopupDirective.prototype, "contentChange", void 0);
__decorate([
core_1.Output(),
__metadata("design:type", core_1.EventEmitter)
], PopupDirective.prototype, "openedChange", void 0);
__decorate([
core_1.Output(),
__metadata("design:type", core_1.EventEmitter)
], PopupDirective.prototype, "latChange", void 0);
__decorate([
core_1.Output(),
__metadata("design:type", core_1.EventEmitter)
], PopupDirective.prototype, "lngChange", void 0);
__decorate([
core_1.Output(),
__metadata("design:type", core_1.EventEmitter)
], PopupDirective.prototype, "positionChange", void 0);
__decorate([
core_1.Output("open"),
__metadata("design:type", core_1.EventEmitter)
], PopupDirective.prototype, "openEvent", void 0);
__decorate([
core_1.Output("close"),
__metadata("design:type", core_1.EventEmitter)
], PopupDirective.prototype, "closeEvent", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], PopupDirective.prototype, "content", null);
__decorate([
core_1.Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], PopupDirective.prototype, "opened", null);
__decorate([
core_1.Input(),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], PopupDirective.prototype, "lat", null);
__decorate([
core_1.Input(),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], PopupDirective.prototype, "lng", null);
__decorate([
core_1.Input(),
__metadata("design:type", leaflet_1.LatLng),
__metadata("design:paramtypes", [leaflet_1.LatLng])
], PopupDirective.prototype, "position", null);
__decorate([
core_1.Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], PopupDirective.prototype, "maxWidth", null);
__decorate([
core_1.Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], PopupDirective.prototype, "minWidth", null);
__decorate([
core_1.Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], PopupDirective.prototype, "maxHeight", null);
__decorate([
core_1.Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], PopupDirective.prototype, "autoPan", null);
__decorate([
core_1.Input(),
__metadata("design:type", leaflet_1.Point),
__metadata("design:paramtypes", [leaflet_1.Point])
], PopupDirective.prototype, "autoPanPaddingTopLeft", null);
__decorate([
core_1.Input(),
__metadata("design:type", leaflet_1.Point),
__metadata("design:paramtypes", [leaflet_1.Point])
], PopupDirective.prototype, "autoPanPaddingBottomRight", null);
__decorate([
core_1.Input(),
__metadata("design:type", leaflet_1.Point),
__metadata("design:paramtypes", [leaflet_1.Point])
], PopupDirective.prototype, "autoPanPadding", null);
__decorate([
core_1.Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], PopupDirective.prototype, "keepInView", null);
__decorate([
core_1.Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], PopupDirective.prototype, "closeButton", null);
__decorate([
core_1.Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], PopupDirective.prototype, "autoClose", null);
__decorate([
core_1.Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], PopupDirective.prototype, "className", null);
__decorate([
core_1.Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], PopupDirective.prototype, "pane", null);
PopupDirective = __decorate([
core_1.Directive({
selector: "yaga-popup",
}),
__param(0, core_1.Inject(core_1.ElementRef)),
__metadata("design:paramtypes", [core_1.ElementRef,
layer_provider_1.LayerProvider])
], PopupDirective);
return PopupDirective;
}(leaflet_1.Popup));
exports.PopupDirective = PopupDirective;
//# sourceMappingURL=popup.directive.js.map