@yaga/leaflet-ng2
Version:
Angular2 module for Leaflet
384 lines • 14.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TooltipDirective = 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 tooltips.
*
* *You can use this directive in an Angular2 template after importing `YagaModule`.*
*
* How to use in a template:
* ```html
* <yaga-map>
* <yaga-marker>
* <yaga-tooltip
* [(content)]="..."
* [(opened)]="..."
* [(lat)]="..."
* [(lng)]="..."
* [(position)]="..."
* [(opacity)]="..."
*
* (open)="..."
* (close)="..."
*
* [className]="..."
* [pane]="..."
* [interactive]="..."
* [sticky]="..."
* [direction]="..."
* [permanent]="..."
* [offset]="..."
* >
* <p>You can pass your content right here!</p>
* </yaga-tooltip>
* </yaga-marker>
* </yaga-map>
* ```
*/
class TooltipDirective extends leaflet_1.Tooltip {
constructor(layerProvider, elementRef) {
super();
this.layerProvider = layerProvider;
/**
* Two-Way bound property for the content of a tooltip.
* Use it with `<yaga-tooltip [(content)]="someValue">` or `<yaga-tooltip (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#tooltip-setcontent Original Leaflet documentation
*/
this.contentChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the state of being opened.
* Use it with `<yaga-tooltip [(opened)]="someValue">` or `<yaga-tooltip (openedChange)="processEvent($event)">`
*
* You can also use the `tooltipOpened` property in the parent directives
* @link http://leafletjs.com/reference-1.2.0.html#tooltip-openon Original Leaflet documentation
*/
this.openedChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the latitude position of the tooltip.
* Use it with `<yaga-tooltip [(lat)]="someValue">` or `<yaga-tooltip (latChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#tooltip-setlatlng Original Leaflet documentation
*/
this.latChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the longitude position of the tooltip.
* Use it with `<yaga-tooltip [(lng)]="someValue">` or `<yaga-tooltip (lngChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#tooltip-setlatlng Original Leaflet documentation
*/
this.lngChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the position (LatLng) of the tooltip.
* Use it with `<yaga-tooltip [(position)]="someValue">` or `<yaga-tooltip (positionChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#tooltip-setlatlng Original Leaflet documentation
*/
this.positionChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the opacity of the tooltip.
* Use it with `<yaga-tooltip [(opacity)]="someValue">` or `<yaga-tooltip (opacityChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#tooltip-setlatlng Original Leaflet documentation
*/
this.opacityChange = new core_1.EventEmitter();
/**
* From leaflet fired open event.
* Use it with `<yaga-tooltip (open)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#tooltip-tooltipopen Original Leaflet documentation
*/
this.openEvent = new core_1.EventEmitter();
/**
* From leaflet fired close event.
* Use it with `<yaga-tooltip (close)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#tooltip-tooltipclose 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.layerProvider.ref.bindTooltip(this);
}
/**
* This function gets called from Angular on destroy of the html-component.
* @link https://angular.io/docs/ts/latest/api/core/index/OnDestroy-class.html
*/
ngOnDestroy() {
this.layerProvider.ref.unbindTooltip();
}
/**
* Derived method of the original setContent method.
* @link http://leafletjs.com/reference-1.2.0.html#tooltip-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-tooltip [(content)]="someValue">` or `<yaga-tooltip [content]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#tooltip-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-tooltip [(opened)]="someValue">` or `<yaga-tooltip [opened]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#tooltip-openon Original Leaflet documentation
*/
set opened(val) {
if (val) {
this.layerProvider.ref.openTooltip();
return;
}
this.layerProvider.ref.closeTooltip();
}
get opened() {
return !!this._map;
}
/**
* Derived method of the original setLatLng method.
* @link http://leafletjs.com/reference-1.2.0.html#tooltip-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 tooltip.
* Use it with `<yaga-tooltip [(lat)]="someValue">` or `<yaga-tooltip [lat]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#tooltip-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 tooltip.
* Use it with `<yaga-tooltip [(lng)]="someValue">` or `<yaga-tooltip [lng]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#tooltip-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 tooltip.
* Use it with `<yaga-tooltip [(position)]="someValue">` or `<yaga-tooltip [position]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#tooltip-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();
}
/**
* Derived method of the original setContent method.
* @link http://leafletjs.com/reference-1.2.0.html#tooltip-setcontent Original Leaflet documentation
*/
setOpacity(val) {
super.setOpacity(val);
this.opacityChange.emit(val);
}
/**
* Two-Way bound property for the opacity of the tooltip.
* Use it with `<yaga-tooltip [(opacity)]="someValue">` or `<yaga-tooltip [opacity]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#tooltip-opacity Original Leaflet documentation
*/
set opacity(val) {
if (val === undefined) {
val = 1;
}
this.setOpacity(val);
}
get opacity() {
return this.options.opacity;
}
/**
* Input for the CSS class name.
* Use it with `<yaga-tooltip [autoClose]="className">`
* @link http://leafletjs.com/reference-1.2.0.html#tooltip-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-tooltip [pane]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#tooltip-pane Original Leaflet documentation
*/
set pane(val) {
this.options.pane = val;
this._updateLayout();
}
get pane() {
return this.options.pane;
}
/**
* Input for the interactive state.
* Use it with `<yaga-tooltip [interactive]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#tooltip-interactive Original Leaflet documentation
*/
set interactive(val) {
this.options.interactive = val;
this._updateLayout();
}
get interactive() {
return !!this.options.interactive;
}
/**
* Input for the sticky.
* Use it with `<yaga-tooltip [sticky]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#tooltip-sticky Original Leaflet documentation
*/
set sticky(val) {
this._initTooltipInteractions.call(this.layerProvider.ref, true);
this.options.sticky = val;
this._initTooltipInteractions.call(this.layerProvider.ref, false);
}
get sticky() {
return !!this.options.sticky;
}
/**
* Input for the direction.
* Use it with `<yaga-tooltip [direction]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#tooltip-direction Original Leaflet documentation
*/
set direction(val) {
this.options.direction = val;
this.reopen();
}
get direction() {
return this.options.direction;
}
/**
* Input for the permanent state.
* Use it with `<yaga-tooltip [permanent]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#tooltip-permanent Original Leaflet documentation
*/
set permanent(val) {
this._initTooltipInteractions.call(this.layerProvider.ref, true);
this.options.permanent = val;
this._initTooltipInteractions.call(this.layerProvider.ref, false);
}
get permanent() {
return !!this.options.permanent;
}
/**
* Input for the offset.
* Use it with `<yaga-tooltip [offset]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#tooltip-offset Original Leaflet documentation
*/
set offset(val) {
this.options.offset = val;
this.reopen();
}
get offset() {
return this.options.offset;
}
reopen(force = false) {
if (force || this.opened) {
this.layerProvider.ref.closeTooltip();
this.layerProvider.ref.openTooltip();
}
}
}
exports.TooltipDirective = TooltipDirective;
TooltipDirective.ɵfac = function TooltipDirective_Factory(t) { return new (t || TooltipDirective)(i0.ɵɵdirectiveInject(i1.LayerProvider), i0.ɵɵdirectiveInject(core_1.ElementRef)); };
TooltipDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TooltipDirective, selectors: [["yaga-tooltip"]], inputs: { content: "content", opened: "opened", lat: "lat", lng: "lng", position: "position", opacity: "opacity", className: "className", pane: "pane", interactive: "interactive", sticky: "sticky", direction: "direction", permanent: "permanent", offset: "offset" }, outputs: { contentChange: "contentChange", openedChange: "openedChange", latChange: "latChange", lngChange: "lngChange", positionChange: "positionChange", opacityChange: "opacityChange", openEvent: "open", closeEvent: "close" }, features: [i0.ɵɵInheritDefinitionFeature] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TooltipDirective, [{
type: core_1.Directive,
args: [{
selector: "yaga-tooltip",
}]
}], function () { return [{ type: i1.LayerProvider }, { type: i0.ElementRef, decorators: [{
type: core_1.Inject,
args: [core_1.ElementRef]
}] }]; }, { 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
}], opacityChange: [{
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
}], opacity: [{
type: core_1.Input
}], className: [{
type: core_1.Input
}], pane: [{
type: core_1.Input
}], interactive: [{
type: core_1.Input
}], sticky: [{
type: core_1.Input
}], direction: [{
type: core_1.Input
}], permanent: [{
type: core_1.Input
}], offset: [{
type: core_1.Input
}] }); })();
//# sourceMappingURL=tooltip.directive.js.map