@yaga/leaflet-ng2
Version:
Angular2 module for Leaflet
426 lines • 15.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PopupDirective = void 0;
const core_1 = require("@angular/core");
const leaflet_1 = require("leaflet");
const layer_provider_1 = require("./layer.provider");
const i0 = require("@angular/core");
const i1 = 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>
* ```
*/
class PopupDirective extends leaflet_1.Popup {
constructor(elementRef, layerProvider) {
super();
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", (event) => {
this.openEvent.emit(event);
this.openedChange.emit(true);
});
this.on("remove", (event) => {
this.closeEvent.emit(event);
this.openedChange.emit(false);
});
this.on("popupopen", (event) => {
this.openEvent.emit(event);
});
this.on("popuclose", (event) => {
this.closeEvent.emit(event);
});
this.layerProvider.ref.bindPopup(this);
}
ngOnDestroy() {
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
*/
setContent(content) {
this.contentChange.emit((content));
return super.setContent(content);
}
/**
* 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 content(val) {
this.setContent(val);
}
get content() {
return this.getContent();
}
/**
* 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 opened(val) {
if (val) {
this.layerProvider.ref.openPopup();
return;
}
this.layerProvider.ref.closePopup();
}
get opened() {
return !!this._map;
}
/**
* Derived method of the original setLatLng method.
* @link http://leafletjs.com/reference-1.2.0.html#popup-setlatlng Original Leaflet documentation
*/
setLatLng(latlng) {
super.setLatLng(latlng);
this.latChange.emit(this.lat);
this.lngChange.emit(this.lng);
this.positionChange.emit(leaflet_1.latLng(this.lat, this.lng));
return this;
}
/**
* 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 lat(val) {
this.setLatLng([val, this.lng]);
}
get lat() {
if (!this.getLatLng()) {
return NaN;
}
return this.getLatLng().lat;
}
/**
* 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 lng(val) {
this.setLatLng([this.lat, val]);
}
get lng() {
if (!this.getLatLng()) {
return NaN;
}
return this.getLatLng().lng;
}
/**
* 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 position(val) {
this.setLatLng(val);
}
get position() {
if (!this.getLatLng()) {
return new leaflet_1.LatLng(NaN, NaN);
}
return this.getLatLng();
}
/**
* 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 maxWidth(val) {
this.options.maxWidth = val;
this.reopen();
}
get maxWidth() {
return this.options.maxWidth;
}
/**
* 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 minWidth(val) {
this.options.minWidth = val;
this.reopen();
}
get minWidth() {
return this.options.minWidth;
}
/**
* 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 maxHeight(val) {
this.options.maxHeight = val;
this.reopen();
}
get maxHeight() {
return this.options.maxHeight;
}
/**
* 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 autoPan(val) {
this.options.autoPan = val;
this.reopen();
}
get autoPan() {
return !!this.options.autoPan;
}
/**
* 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 autoPanPaddingTopLeft(val) {
this.options.autoPanPaddingTopLeft = val;
this.reopen();
}
get autoPanPaddingTopLeft() {
return this.options.autoPanPaddingTopLeft;
}
/**
* 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 autoPanPaddingBottomRight(val) {
this.options.autoPanPaddingBottomRight = val;
this.reopen();
}
get autoPanPaddingBottomRight() {
return this.options.autoPanPaddingBottomRight;
}
/**
* 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 autoPanPadding(val) {
this.options.autoPanPadding = val;
this.reopen();
}
get autoPanPadding() {
return this.options.autoPanPadding;
}
/**
* 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 keepInView(val) {
this.options.keepInView = val;
this.reopen();
}
get keepInView() {
return !!this.options.keepInView;
}
/**
* 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 closeButton(val) {
this.options.closeButton = val;
this.reopen();
}
get closeButton() {
return !!this.options.closeButton;
}
/**
* 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 autoClose(val) {
this.options.autoClose = val;
this.reopen();
}
get autoClose() {
return !!this.options.autoClose;
}
/**
* 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 className(val) {
if (!this._container) {
this.options.className = val;
return;
}
const oldClassName = this._container.getAttribute("class") || "";
const newClassNameSplited = oldClassName.split(` ${this.options.className} `);
if (newClassNameSplited.length === 1) {
newClassNameSplited.push("");
}
this._container.setAttribute("class", newClassNameSplited.join(` ${val} `).trim());
this.options.className = val;
}
get className() {
return this.options.className;
}
/**
* 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 pane(val) {
this.options.pane = val;
this.reopen();
}
get pane() {
return this.options.pane;
}
reopen(force = false) {
if (force || this.opened) {
this.layerProvider.ref.closePopup();
this.layerProvider.ref.openPopup();
}
}
}
exports.PopupDirective = PopupDirective;
PopupDirective.ɵfac = function PopupDirective_Factory(t) { return new (t || PopupDirective)(i0.ɵɵdirectiveInject(core_1.ElementRef), i0.ɵɵdirectiveInject(i1.LayerProvider)); };
PopupDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PopupDirective, selectors: [["yaga-popup"]], inputs: { content: "content", opened: "opened", lat: "lat", lng: "lng", position: "position", maxWidth: "maxWidth", minWidth: "minWidth", maxHeight: "maxHeight", autoPan: "autoPan", autoPanPaddingTopLeft: "autoPanPaddingTopLeft", autoPanPaddingBottomRight: "autoPanPaddingBottomRight", autoPanPadding: "autoPanPadding", keepInView: "keepInView", closeButton: "closeButton", autoClose: "autoClose", className: "className", pane: "pane" }, outputs: { contentChange: "contentChange", openedChange: "openedChange", latChange: "latChange", lngChange: "lngChange", positionChange: "positionChange", openEvent: "open", closeEvent: "close" }, features: [i0.ɵɵInheritDefinitionFeature] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PopupDirective, [{
type: core_1.Directive,
args: [{
selector: "yaga-popup",
}]
}], function () { return [{ type: i0.ElementRef, decorators: [{
type: core_1.Inject,
args: [core_1.ElementRef]
}] }, { type: i1.LayerProvider }]; }, { contentChange: [{
type: core_1.Output
}], openedChange: [{
type: core_1.Output
}], latChange: [{
type: core_1.Output
}], lngChange: [{
type: core_1.Output
}], positionChange: [{
type: core_1.Output
}], openEvent: [{
type: core_1.Output,
args: ["open"]
}], closeEvent: [{
type: core_1.Output,
args: ["close"]
}], content: [{
type: core_1.Input
}], opened: [{
type: core_1.Input
}], lat: [{
type: core_1.Input
}], lng: [{
type: core_1.Input
}], position: [{
type: core_1.Input
}], maxWidth: [{
type: core_1.Input
}], minWidth: [{
type: core_1.Input
}], maxHeight: [{
type: core_1.Input
}], autoPan: [{
type: core_1.Input
}], autoPanPaddingTopLeft: [{
type: core_1.Input
}], autoPanPaddingBottomRight: [{
type: core_1.Input
}], autoPanPadding: [{
type: core_1.Input
}], keepInView: [{
type: core_1.Input
}], closeButton: [{
type: core_1.Input
}], autoClose: [{
type: core_1.Input
}], className: [{
type: core_1.Input
}], pane: [{
type: core_1.Input
}] }); })();
//# sourceMappingURL=popup.directive.js.map