@jmarcelof/leaflet-ng2
Version:
Angular2 module for Leaflet
442 lines • 18.4 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);
};
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var leaflet_1 = require("leaflet");
var map_provider_1 = require("./map.provider");
var mouse_event_helper_1 = require("./mouse-event-helper");
/**
* 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/
*/
var ZoomControlDirective = /** @class */ (function (_super) {
__extends(ZoomControlDirective, _super);
function ZoomControlDirective(mapProvider) {
var _this = _super.call(this) || this;
_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", function (event) {
_this.clickEvent.emit(mouse_event_helper_1.enhanceMouseEvent(event, _this._map));
});
_this.getContainer().addEventListener("dblclick", function (event) {
_this.dblclickEvent.emit(mouse_event_helper_1.enhanceMouseEvent(event, _this._map));
});
_this.getContainer().addEventListener("mousedown", function (event) {
_this.mousedownEvent.emit(mouse_event_helper_1.enhanceMouseEvent(event, _this._map));
});
_this.getContainer().addEventListener("mouseover", function (event) {
_this.mouseoverEvent.emit(mouse_event_helper_1.enhanceMouseEvent(event, _this._map));
});
_this.getContainer().addEventListener("mouseout", function (event) {
_this.mouseoutEvent.emit(mouse_event_helper_1.enhanceMouseEvent(event, _this._map));
});
return _this;
}
/**
* Internal method to provide the removal of the control in Leaflet, when removing it from the Angular template
*/
ZoomControlDirective.prototype.ngOnDestroy = function () {
this.mapProvider.ref.removeControl(this);
};
/**
* Derived remove function
*/
ZoomControlDirective.prototype.remove = function () {
/* tslint:disable */
_super.prototype.remove.call(this);
this.displayChange.emit(false);
this.removeEvent.emit({ target: this, type: "remove" });
return this;
};
/**
* Derived addTo function
*/
ZoomControlDirective.prototype.addTo = function (map) {
/* tslint:disable */
_super.prototype.addTo.call(this, 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
*/
ZoomControlDirective.prototype.setPosition = function (val) {
_super.prototype.setPosition.call(this, val);
this.positionChange.emit(val);
return this;
};
Object.defineProperty(ZoomControlDirective.prototype, "opacity", {
get: function () {
var val = this.getContainer().style.opacity;
if (typeof val === "string") {
return parseFloat(val);
}
},
/**
* 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: function (val) {
if (typeof val === "number") {
this.getContainer().style.opacity = val.toString();
return;
}
this.getContainer().style.opacity = null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ZoomControlDirective.prototype, "display", {
get: function () {
return !!this._map && this.getContainer().style.display !== "none";
},
/**
* Two-Way bound property for the display state.
* Use it with `<yaga-zoom-control [(display)]="someValue">`
* or `<yaga-zoom-control [display]="someValue">`
*/
set: function (val) {
if (!this._map) {
// No map available...
return;
}
if (val) {
this.getContainer().style.display = "";
return;
}
this.getContainer().style.display = "none";
return;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ZoomControlDirective.prototype, "position", {
get: function () {
return this.getPosition();
},
/**
* 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: function (val) {
this.setPosition(val);
},
enumerable: true,
configurable: true
});
Object.defineProperty(ZoomControlDirective.prototype, "zIndex", {
get: function () {
var val = this.getContainer().style.zIndex;
if (typeof val === "string") {
return parseInt(val, 10);
}
},
/**
* 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: function (zIndex) {
if (zIndex === undefined) {
zIndex = 0;
}
this.getContainer().style.zIndex = zIndex.toString();
},
enumerable: true,
configurable: true
});
Object.defineProperty(ZoomControlDirective.prototype, "zoomInText", {
get: function () {
return this.options.zoomInText;
},
/**
* 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: function (val) {
this.options.zoomInText = val;
if (typeof val === "string") {
this._zoomInButton.textContent = val;
return;
}
this._zoomInButton.textContent = null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ZoomControlDirective.prototype, "zoomInTitle", {
get: function () {
return this.options.zoomInTitle;
},
/**
* 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: function (val) {
this.options.zoomInTitle = val;
if (typeof val === "string") {
this._zoomInButton.setAttribute("title", val);
return;
}
this._zoomInButton.removeAttribute("title");
},
enumerable: true,
configurable: true
});
Object.defineProperty(ZoomControlDirective.prototype, "zoomOutText", {
get: function () {
return this.options.zoomOutText;
},
/**
* 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: function (val) {
this.options.zoomOutText = val;
if (typeof val === "string") {
this._zoomOutButton.textContent = val;
return;
}
this._zoomOutButton.textContent = null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ZoomControlDirective.prototype, "zoomOutTitle", {
get: function () {
return this.options.zoomOutTitle;
},
/**
* 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: function (val) {
this.options.zoomOutTitle = val;
if (typeof val === "string") {
this._zoomOutButton.setAttribute("title", val);
return;
}
this._zoomOutButton.removeAttribute("title");
},
enumerable: true,
configurable: true
});
__decorate([
core_1.Output(),
__metadata("design:type", core_1.EventEmitter)
], ZoomControlDirective.prototype, "displayChange", void 0);
__decorate([
core_1.Output(),
__metadata("design:type", core_1.EventEmitter)
], ZoomControlDirective.prototype, "zIndexChange", void 0);
__decorate([
core_1.Output(),
__metadata("design:type", core_1.EventEmitter)
], ZoomControlDirective.prototype, "positionChange", void 0);
__decorate([
core_1.Output("add"),
__metadata("design:type", core_1.EventEmitter)
], ZoomControlDirective.prototype, "addEvent", void 0);
__decorate([
core_1.Output("remove"),
__metadata("design:type", core_1.EventEmitter)
], ZoomControlDirective.prototype, "removeEvent", void 0);
__decorate([
core_1.Output("click"),
__metadata("design:type", core_1.EventEmitter)
], ZoomControlDirective.prototype, "clickEvent", void 0);
__decorate([
core_1.Output("dblclick"),
__metadata("design:type", core_1.EventEmitter)
], ZoomControlDirective.prototype, "dblclickEvent", void 0);
__decorate([
core_1.Output("mousedown"),
__metadata("design:type", core_1.EventEmitter)
], ZoomControlDirective.prototype, "mousedownEvent", void 0);
__decorate([
core_1.Output("mouseover"),
__metadata("design:type", core_1.EventEmitter)
], ZoomControlDirective.prototype, "mouseoverEvent", void 0);
__decorate([
core_1.Output("mouseout"),
__metadata("design:type", core_1.EventEmitter)
], ZoomControlDirective.prototype, "mouseoutEvent", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], ZoomControlDirective.prototype, "opacity", null);
__decorate([
core_1.Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], ZoomControlDirective.prototype, "display", null);
__decorate([
core_1.Input(),
__metadata("design:type", String),
__metadata("design:paramtypes", [String])
], ZoomControlDirective.prototype, "position", null);
__decorate([
core_1.Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], ZoomControlDirective.prototype, "zIndex", null);
__decorate([
core_1.Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], ZoomControlDirective.prototype, "zoomInText", null);
__decorate([
core_1.Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], ZoomControlDirective.prototype, "zoomInTitle", null);
__decorate([
core_1.Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], ZoomControlDirective.prototype, "zoomOutText", null);
__decorate([
core_1.Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], ZoomControlDirective.prototype, "zoomOutTitle", null);
ZoomControlDirective = __decorate([
core_1.Directive({
selector: "yaga-zoom-control",
}),
__metadata("design:paramtypes", [map_provider_1.MapProvider])
], ZoomControlDirective);
return ZoomControlDirective;
}(leaflet_1.Control.Zoom));
exports.ZoomControlDirective = ZoomControlDirective;
//# sourceMappingURL=zoom-control.directive.js.map