all files / lib/ div-icon.directive.js

82.89% Statements 63/76
64.71% Branches 33/51
80.95% Functions 17/21
86.76% Lines 59/68
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203                                                                                  12× 12×         12× 12× 12×                               12×               12× 12×                                                                                                                                                          
"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;
    Eif (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) {
    Eif (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
    return function (target, key) { decorator(target, key, paramIndex); }
};
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var leaflet_1 = require("leaflet");
var marker_provider_1 = 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/1.0.0/browser-test?grep=DivIcon%20Directive Unit-Test
 * @link https://leaflet-ng2.yagajs.org/1.0.0/coverage/lcov-report/lib/div-icon.directive.js.html Test coverage
 * @link https://leaflet-ng2.yagajs.org/1.0.0/typedoc/classes/divicondirective.html API documentation
 * @example https://leaflet-ng2.yagajs.org/1.0.0/examples/div-icon-directive/
 */
var DivIconDirective = /** @class */ (function (_super) {
    __extends(DivIconDirective, _super);
    function DivIconDirective(elementRef, markerProvider) {
        var _this = _super.call(this, {}) || this;
        _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;
        Iif (typeof MutationObserver === "function") {
            var mutationObserver = new MutationObserver(function () {
                _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", function () {
                _this.markerProvider.ref.setIcon(_this);
                _this.updateEvent.emit({
                    target: _this,
                    type: "update",
                });
            });
        }
        markerProvider.ref.setIcon(_this);
        return _this;
    }
    Object.defineProperty(DivIconDirective.prototype, "iconSize", {
        get: function () {
            return this.options.iconSize;
        },
        /**
         * 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: function (val) {
            this.options.iconSize = val;
            this.markerProvider.ref.setIcon(this);
            this.updateEvent.emit({
                target: this,
                type: "update",
            });
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DivIconDirective.prototype, "iconAnchor", {
        get: function () {
            return this.options.iconAnchor;
        },
        /**
         * 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: function (val) {
            this.options.iconAnchor = val;
            this.markerProvider.ref.setIcon(this);
            this.updateEvent.emit({
                target: this,
                type: "update",
            });
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DivIconDirective.prototype, "popupAnchor", {
        get: function () {
            return this.options.popupAnchor;
        },
        /**
         * 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: function (val) {
            this.options.popupAnchor = val;
            this.markerProvider.ref.setIcon(this);
            this.updateEvent.emit({
                target: this,
                type: "update",
            });
        },
        enumerable: true,
        configurable: true
    });
    /**
     * This inherited function enhances the directive with an own css-class and clones the its html content into the
     * leaflet div icon.
     */
    DivIconDirective.prototype.createIcon = function (oldDivIcon) {
        oldDivIcon = _super.prototype.createIcon.call(this, oldDivIcon);
        Eif (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;
    };
    __decorate([
        core_1.Output("update"),
        __metadata("design:type", core_1.EventEmitter)
    ], DivIconDirective.prototype, "updateEvent", void 0);
    __decorate([
        core_1.Input(),
        __metadata("design:type", leaflet_1.Point),
        __metadata("design:paramtypes", [leaflet_1.Point])
    ], DivIconDirective.prototype, "iconSize", null);
    __decorate([
        core_1.Input(),
        __metadata("design:type", leaflet_1.Point),
        __metadata("design:paramtypes", [leaflet_1.Point])
    ], DivIconDirective.prototype, "iconAnchor", null);
    __decorate([
        core_1.Input(),
        __metadata("design:type", leaflet_1.Point),
        __metadata("design:paramtypes", [leaflet_1.Point])
    ], DivIconDirective.prototype, "popupAnchor", null);
    DivIconDirective = __decorate([
        core_1.Directive({
            selector: "yaga-div-icon",
        }),
        __param(0, core_1.Inject(core_1.ElementRef)),
        __metadata("design:paramtypes", [core_1.ElementRef,
            marker_provider_1.MarkerProvider])
    ], DivIconDirective);
    return DivIconDirective;
}(leaflet_1.DivIcon));
exports.DivIconDirective = DivIconDirective;
//# sourceMappingURL=div-icon.directive.js.map