@yaga/leaflet-ng2
Version:
Angular2 module for Leaflet
159 lines • 6.21 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DivIconDirective = void 0;
const core_1 = require("@angular/core");
const leaflet_1 = require("leaflet");
const marker_provider_1 = require("./marker.provider");
const i0 = require("@angular/core");
const i1 = require("./marker.provider");
/**
* Angular2 directive for Leaflet div-icons.
*
* *You can use this directive in an Angular2 template after importing `YagaModule`.*
*
* How to use in a template:
* ```html
* <yaga-map>
* <yaga-marker>
* <yaga-div-icon
* [iconAnchor]="..."
* [iconSize]="..."
* [popupAnchor]="...">
* You can paste your HTML content for the icon here!
* </yaga-div-icon>
* </yaga-marker>
* </yaga-map>
* ```
*
* Notes:
*
* * All div-icon-directives have the css-class `yaga-div-icon`.
* * The `contentHtml` property is not the child-node in the leaflet div-icon, it is the clone of it and gets cloned
* again on every change.
*
* @link http://leafletjs.com/reference-1.2.0.html#divicon Original Leaflet documentation
* @link https://leaflet-ng2.yagajs.org/latest/browser-test?grep=DivIcon%20Directive Unit-Test
* @link https://leaflet-ng2.yagajs.org/latest/coverage/lcov-report/lib/div-icon.directive.js.html Test coverage
* @link https://leaflet-ng2.yagajs.org/latest/typedoc/classes/divicondirective.html API documentation
* @example https://leaflet-ng2.yagajs.org/latest/examples/div-icon-directive/
*/
class DivIconDirective extends leaflet_1.DivIcon {
constructor(elementRef, markerProvider) {
super({});
this.markerProvider = markerProvider;
/**
* This is an EventEmitter used to notify on any change in this object. It is mainly created to provide reactions
* of the marker directive on changes.
*/
this.updateEvent = new core_1.EventEmitter();
this.contentHtml = elementRef.nativeElement;
if (typeof MutationObserver === "function") {
const mutationObserver = new MutationObserver(() => {
this.markerProvider.ref.setIcon(this);
this.updateEvent.emit({
target: this,
type: "update",
});
});
mutationObserver.observe(this.contentHtml, {
attributes: true,
characterData: true,
childList: true,
subtree: true,
});
}
else {
this.contentHtml.addEventListener("DOMSubtreeModified", () => {
this.markerProvider.ref.setIcon(this);
this.updateEvent.emit({
target: this,
type: "update",
});
});
}
markerProvider.ref.setIcon(this);
}
/**
* Input for the iconSize.
* Use it with `<yaga-div-icon [iconSize]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#divicon-iconsize Original Leaflet documentation
*/
set iconSize(val) {
this.options.iconSize = val;
this.markerProvider.ref.setIcon(this);
this.updateEvent.emit({
target: this,
type: "update",
});
}
get iconSize() {
return this.options.iconSize;
}
/**
* Input for the iconAnchor.
* Use it with `<yaga-div-icon [iconAnchor]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#divicon-iconanchor Original Leaflet documentation
*/
set iconAnchor(val) {
this.options.iconAnchor = val;
this.markerProvider.ref.setIcon(this);
this.updateEvent.emit({
target: this,
type: "update",
});
}
get iconAnchor() {
return this.options.iconAnchor;
}
/**
* Input for the popupAnchor.
* Use it with `<yaga-div-icon [popupAnchor]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#divicon-popupanchor Original Leaflet documentation
*/
set popupAnchor(val) {
this.options.popupAnchor = val;
this.markerProvider.ref.setIcon(this);
this.updateEvent.emit({
target: this,
type: "update",
});
}
get popupAnchor() {
return this.options.popupAnchor;
}
/**
* This inherited function enhances the directive with an own css-class and clones the its html content into the
* leaflet div icon.
*/
createIcon(oldDivIcon) {
oldDivIcon = super.createIcon(oldDivIcon);
if (oldDivIcon.getAttribute("class") &&
oldDivIcon.getAttribute("class").split(" ").indexOf("yaga-div-icon") === -1) {
oldDivIcon.setAttribute("class", oldDivIcon.getAttribute("class") + " yaga-div-icon");
}
oldDivIcon.appendChild(this.contentHtml.cloneNode(true));
return oldDivIcon;
}
}
exports.DivIconDirective = DivIconDirective;
DivIconDirective.ɵfac = function DivIconDirective_Factory(t) { return new (t || DivIconDirective)(i0.ɵɵdirectiveInject(core_1.ElementRef), i0.ɵɵdirectiveInject(i1.MarkerProvider)); };
DivIconDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: DivIconDirective, selectors: [["yaga-div-icon"]], inputs: { iconSize: "iconSize", iconAnchor: "iconAnchor", popupAnchor: "popupAnchor" }, outputs: { updateEvent: "update" }, features: [i0.ɵɵInheritDefinitionFeature] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DivIconDirective, [{
type: core_1.Directive,
args: [{
selector: "yaga-div-icon",
}]
}], function () { return [{ type: i0.ElementRef, decorators: [{
type: core_1.Inject,
args: [core_1.ElementRef]
}] }, { type: i1.MarkerProvider }]; }, { updateEvent: [{
type: core_1.Output,
args: ["update"]
}], iconSize: [{
type: core_1.Input
}], iconAnchor: [{
type: core_1.Input
}], popupAnchor: [{
type: core_1.Input
}] }); })();
//# sourceMappingURL=div-icon.directive.js.map