@yaga/leaflet-ng2
Version:
Angular2 module for Leaflet
355 lines • 14 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ZoomControlDirective = void 0;
const core_1 = require("@angular/core");
const leaflet_1 = require("leaflet");
const map_provider_1 = require("./map.provider");
const mouse_event_helper_1 = require("./mouse-event-helper");
const i0 = require("@angular/core");
const i1 = require("./map.provider");
/**
* Angular2 directive for the attribution-control of Leaflet.
*
* *You can use this directive in an Angular2 template after importing `YagaModule`.*
*
* How to use in a template:
* ```html
* <yaga-map>
* <yaga-zoom-control
* [(display)]="..."
* [(zIndex)]="..."
* [(position)]="..."
*
* [zoomInText]="..."
* [zoomInTitle]="..."
* [zoomOutText]="..."
* [zoomOutTitle]="..."
*
* (add)="..."
* (remove)="..."
* (click)="..."
* (dblclick)="..."
* (mousedown)="..."
* (mouseover)="..."
* (mouseout)="..."
* >
* </yaga-zoom-control>
* </yaga-map>
* ```
*
* @link http://leafletjs.com/reference-1.2.0.html#control-zoom Original Leaflet documentation
* @link https://leaflet-ng2.yagajs.org/latest/browser-test?grep=Zoom-Control%20Directive Unit-Test
* @link https://leaflet-ng2.yagajs.org/latest/coverage/lcov-report/lib/zoom-control.directive.js.html
* Test coverage
* @link https://leaflet-ng2.yagajs.org/latest/typedoc/classes/zoomcontroldirective.html API documentation
* @example https://leaflet-ng2.yagajs.org/latest/examples/zoom-control-directive/
*/
class ZoomControlDirective extends leaflet_1.Control.Zoom {
constructor(mapProvider) {
super();
this.mapProvider = mapProvider;
/**
* Two-Way bound property for the display status of the control.
* Use it with `<yaga-zoom-control [(display)]="someValue">`
* or `<yaga-zoom-control (displayChange)="processEvent($event)">`
*/
this.displayChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the zIndex of the control.
* Use it with `<yaga-zoom-control [(zIndex)]="someValue">`
* or `<yaga-zoom-control (zIndexChange)="processEvent($event)">`
*/
this.zIndexChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the position of the control.
* Use it with `<yaga-zoom-control [(position)]="someValue">`
* or `<yaga-zoom-control (positionChange)="processEvent($event)">`
*/
this.positionChange = new core_1.EventEmitter();
/**
* From leaflet fired add event.
* Use it with `<yaga-zoom-control (add)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#control-zoom-add Original Leaflet documentation
*/
this.addEvent = new core_1.EventEmitter();
/**
* From leaflet fired remove event.
* Use it with `<yaga-zoom-control (remove)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#control-zoom-remove Original Leaflet documentation
*/
this.removeEvent = new core_1.EventEmitter();
/**
* From leaflet fired click event.
* Use it with `<yaga-zoom-control (click)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#control-zoom-click Original Leaflet documentation
*/
this.clickEvent = new core_1.EventEmitter();
/**
* From leaflet fired dblclick event.
* Use it with `<yaga-zoom-control (dblclick)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#control-zoom-dblclick Original Leaflet documentation
*/
this.dblclickEvent = new core_1.EventEmitter();
/**
* From leaflet fired mousedown event.
* Use it with `<yaga-zoom-control (mousedown)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#control-zoom-mousedown Original Leaflet documentation
*/
this.mousedownEvent = new core_1.EventEmitter();
/**
* From leaflet fired mouseover event.
* Use it with `<yaga-zoom-control (mouseover)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#control-zoom-mouseover Original Leaflet documentation
*/
this.mouseoverEvent = new core_1.EventEmitter();
/**
* From leaflet fired mouseout event.
* Use it with `<yaga-zoom-control (mouseout)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#control-zoom-mouseout Original Leaflet documentation
*/
this.mouseoutEvent = new core_1.EventEmitter();
this.mapProvider.ref.addControl(this);
// Events
this.getContainer().addEventListener("click", (event) => {
this.clickEvent.emit(mouse_event_helper_1.enhanceMouseEvent(event, this._map));
});
this.getContainer().addEventListener("dblclick", (event) => {
this.dblclickEvent.emit(mouse_event_helper_1.enhanceMouseEvent(event, this._map));
});
this.getContainer().addEventListener("mousedown", (event) => {
this.mousedownEvent.emit(mouse_event_helper_1.enhanceMouseEvent(event, this._map));
});
this.getContainer().addEventListener("mouseover", (event) => {
this.mouseoverEvent.emit(mouse_event_helper_1.enhanceMouseEvent(event, this._map));
});
this.getContainer().addEventListener("mouseout", (event) => {
this.mouseoutEvent.emit(mouse_event_helper_1.enhanceMouseEvent(event, this._map));
});
}
/**
* Internal method to provide the removal of the control in Leaflet, when removing it from the Angular template
*/
ngOnDestroy() {
this.mapProvider.ref.removeControl(this);
}
/**
* Derived remove function
*/
remove() {
/* tslint:disable */
super.remove();
this.displayChange.emit(false);
this.removeEvent.emit({ target: this, type: "remove" });
return this;
}
/**
* Derived addTo function
*/
addTo(map) {
/* tslint:disable */
super.addTo(map);
this.displayChange.emit(true);
this.addEvent.emit({ target: this, type: "add" });
return this;
}
/**
* Derived method of the original setPosition.
* @link http://leafletjs.com/reference-1.2.0.html#control-zoom-setposition Original Leaflet documentation
*/
setPosition(val) {
super.setPosition(val);
this.positionChange.emit(val);
return this;
}
/**
* Two-Way bound property for the opacity.
* Use it with `<yaga-zoom-control [(opacity)]="someValue">`
* or `<yaga-zoom-control [opacity]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#control-zoom-opacity Original Leaflet documentation
*/
set opacity(val) {
if (typeof val === "number") {
this.getContainer().style.opacity = val.toString();
return;
}
this.getContainer().style.opacity = "";
}
get opacity() {
const val = this.getContainer().style.opacity;
if (typeof val === "string") {
return parseFloat(val);
}
return undefined;
}
/**
* Two-Way bound property for the display state.
* Use it with `<yaga-zoom-control [(display)]="someValue">`
* or `<yaga-zoom-control [display]="someValue">`
*/
set display(val) {
if (!this._map) {
// No map available...
return;
}
if (val) {
this.getContainer().style.display = "";
return;
}
this.getContainer().style.display = "none";
return;
}
get display() {
return !!this._map && this.getContainer().style.display !== "none";
}
/**
* Two-Way bound property for the position.
* Use it with `<yaga-zoom-control [(position)]="someValue">`
* or `<yaga-zoom-control [position]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#control-zoom-position Original Leaflet documentation
*/
set position(val) {
this.setPosition(val);
}
get position() {
return this.getPosition();
}
/**
* Two-Way bound property for the zIndex of the control.
* Use it with `<yaga-zoom-control [(zIndex)]="someValue">`
* or `<yaga-zoom-control (zIndexChange)="processEvent($event)">`
*/
set zIndex(zIndex) {
if (zIndex === undefined) {
zIndex = 0;
}
this.getContainer().style.zIndex = zIndex.toString();
}
get zIndex() {
const val = this.getContainer().style.zIndex;
if (typeof val === "string") {
return parseInt(val, 10);
}
return undefined;
}
/**
* Input for the text shown on the zoom in button.
* Use it with `<yaga-zoom-control [(zoomInText)]="someValue">`
* or `<yaga-zoom-control [zoomInText]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#control-zoom-zoomintext Original Leaflet documentation
*/
set zoomInText(val) {
this.options.zoomInText = val;
if (typeof val === "string") {
this._zoomInButton.textContent = val;
return;
}
this._zoomInButton.textContent = null;
}
get zoomInText() {
return this.options.zoomInText;
}
/**
* Input for the title connected to the zoom in button.
* Use it with `<yaga-zoom-control [(zoomInTitle)]="someValue">`
* or `<yaga-zoom-control [zoomInTitle]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#control-zoom-zoomintitle Original Leaflet documentation
*/
set zoomInTitle(val) {
this.options.zoomInTitle = val;
if (typeof val === "string") {
this._zoomInButton.setAttribute("title", val);
return;
}
this._zoomInButton.removeAttribute("title");
}
get zoomInTitle() {
return this.options.zoomInTitle;
}
/**
* Input for the text shown on the zoom out button.
* Use it with `<yaga-zoom-control [(zoomOutText)]="someValue">`
* or `<yaga-zoom-control [zoomOutText]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#control-zoom-zoomouttext Original Leaflet documentation
*/
set zoomOutText(val) {
this.options.zoomOutText = val;
if (typeof val === "string") {
this._zoomOutButton.textContent = val;
return;
}
this._zoomOutButton.textContent = null;
}
get zoomOutText() {
return this.options.zoomOutText;
}
/**
* Input for the title connected to the zoom out button.
* Use it with `<yaga-zoom-control [(zoomOutTitle)]="someValue">`
* or `<yaga-zoom-control [zoomOutTitle]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#control-zoom-zoomouttitle Original Leaflet documentation
*/
set zoomOutTitle(val) {
this.options.zoomOutTitle = val;
if (typeof val === "string") {
this._zoomOutButton.setAttribute("title", val);
return;
}
this._zoomOutButton.removeAttribute("title");
}
get zoomOutTitle() {
return this.options.zoomOutTitle;
}
}
exports.ZoomControlDirective = ZoomControlDirective;
ZoomControlDirective.ɵfac = function ZoomControlDirective_Factory(t) { return new (t || ZoomControlDirective)(i0.ɵɵdirectiveInject(i1.MapProvider)); };
ZoomControlDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ZoomControlDirective, selectors: [["yaga-zoom-control"]], inputs: { opacity: "opacity", display: "display", position: "position", zIndex: "zIndex", zoomInText: "zoomInText", zoomInTitle: "zoomInTitle", zoomOutText: "zoomOutText", zoomOutTitle: "zoomOutTitle" }, outputs: { displayChange: "displayChange", zIndexChange: "zIndexChange", positionChange: "positionChange", addEvent: "add", removeEvent: "remove", clickEvent: "click", dblclickEvent: "dblclick", mousedownEvent: "mousedown", mouseoverEvent: "mouseover", mouseoutEvent: "mouseout" }, features: [i0.ɵɵInheritDefinitionFeature] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ZoomControlDirective, [{
type: core_1.Directive,
args: [{
selector: "yaga-zoom-control",
}]
}], function () { return [{ type: i1.MapProvider }]; }, { displayChange: [{
type: core_1.Output
}], zIndexChange: [{
type: core_1.Output
}], positionChange: [{
type: core_1.Output
}], addEvent: [{
type: core_1.Output,
args: ["add"]
}], removeEvent: [{
type: core_1.Output,
args: ["remove"]
}], clickEvent: [{
type: core_1.Output,
args: ["click"]
}], dblclickEvent: [{
type: core_1.Output,
args: ["dblclick"]
}], mousedownEvent: [{
type: core_1.Output,
args: ["mousedown"]
}], mouseoverEvent: [{
type: core_1.Output,
args: ["mouseover"]
}], mouseoutEvent: [{
type: core_1.Output,
args: ["mouseout"]
}], opacity: [{
type: core_1.Input
}], display: [{
type: core_1.Input
}], position: [{
type: core_1.Input
}], zIndex: [{
type: core_1.Input
}], zoomInText: [{
type: core_1.Input
}], zoomInTitle: [{
type: core_1.Input
}], zoomOutText: [{
type: core_1.Input
}], zoomOutTitle: [{
type: core_1.Input
}] }); })();
//# sourceMappingURL=zoom-control.directive.js.map