ng2-inline-svg - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

dist/ng2-inline-svg.d.ts

@@ -1,12 +0,16 @@
-import { ElementRef, EventEmitter, OnInit } from '@angular/core';
+import { ElementRef, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import SVGCache from './svg-cache';
-export default class InlineSVG implements OnInit {
+export default class InlineSVG implements OnInit, OnChanges {
     private _el;
     private _svgCache;
-    inlineSVG: string;
     replaceContents: boolean;
     cacheSVG: boolean;
     onSVGInserted: EventEmitter<SVGElement>;
+    private inlineSVG;
+    private _absUrl;
     constructor(_el: ElementRef, _svgCache: SVGCache);
     ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private _insertSVG();
+    private _getAbsoluteUrl(url);
 }

dist/ng2-inline-svg.js

@@ -22,2 +22,10 @@ "use strict";
     InlineSVG.prototype.ngOnInit = function () {
+        this._insertSVG();
+    };
+    InlineSVG.prototype.ngOnChanges = function (changes) {
+        if (changes['inlineSVG'] && changes['inlineSVG'].currentValue !== changes['inlineSVG'].previousValue) {
+            this._insertSVG();
+        }
+    };
+    InlineSVG.prototype._insertSVG = function () {
         var _this = this;
@@ -28,20 +36,25 @@ if (!this.inlineSVG) {
         }
-        this._svgCache.getSVG(this.inlineSVG, this.cacheSVG)
-            .then(function (svg) {
-            if (svg && _this._el.nativeElement) {
-                if (_this.replaceContents) {
-                    _this._el.nativeElement.innerHTML = '';
+        var absUrl = this._getAbsoluteUrl(this.inlineSVG);
+        if (absUrl !== this._absUrl) {
+            this._absUrl = absUrl;
+            this._svgCache.getSVG(this.inlineSVG, this.cacheSVG)
+                .then(function (svg) {
+                if (svg && _this._el.nativeElement) {
+                    if (_this.replaceContents) {
+                        _this._el.nativeElement.innerHTML = '';
+                    }
+                    _this._el.nativeElement.appendChild(svg);
+                    _this.onSVGInserted.emit(svg);
                 }
-                _this._el.nativeElement.appendChild(svg);
-                _this.onSVGInserted.emit(svg);
-            }
-        })
-            .catch(function (err) { return console.error(err); });
+            })
+                .catch(function (err) { return console.error(err); });
+        }
     };
+    InlineSVG.prototype._getAbsoluteUrl = function (url) {
+        var base = document.createElement('BASE');
+        base.href = url;
+        return base.href;
+    };
     __decorate([
         core_1.Input(), 
-        __metadata('design:type', String)
-    ], InlineSVG.prototype, "inlineSVG", void 0);
-    __decorate([
-        core_1.Input(), 
         __metadata('design:type', Boolean)
@@ -57,2 +70,6 @@ ], InlineSVG.prototype, "replaceContents", void 0);
     ], InlineSVG.prototype, "onSVGInserted", void 0);
+    __decorate([
+        core_1.Input(), 
+        __metadata('design:type', String)
+    ], InlineSVG.prototype, "inlineSVG", void 0);
     InlineSVG = __decorate([
@@ -59,0 +76,0 @@ core_1.Directive({

dist/svg-cache.d.ts

@@ -8,5 +8,4 @@ import { Http } from '@angular/http';
     getSVG(url: string, cache: boolean): Promise<SVGElement>;
-    private _getAbsoluteUrl(url);
     private _svgElementFromString(str);
     private _cloneSvg(svg);
 }

dist/svg-cache.js

@@ -24,7 +24,6 @@ "use strict";
         return new Promise(function (resolve, reject) {
-            var absUrl = _this._getAbsoluteUrl(url);
-            if (cache && SVGCache._cache.has(absUrl)) {
-                resolve(_this._cloneSvg(SVGCache._cache.get(absUrl)));
+            if (cache && SVGCache._cache.has(url)) {
+                resolve(_this._cloneSvg(SVGCache._cache.get(url)));
             }
-            _this._http.get(absUrl)
+            _this._http.get(url)
                 .map(function (res) { return res.text(); })
@@ -35,3 +34,3 @@ .subscribe(function (svg) {
                     if (cache) {
-                        SVGCache._cache.set(absUrl, svgElement);
+                        SVGCache._cache.set(url, svgElement);
                     }
@@ -43,7 +42,2 @@ resolve(svgElement);
     };
-    SVGCache.prototype._getAbsoluteUrl = function (url) {
-        var base = document.createElement('BASE');
-        base.href = url;
-        return base.href;
-    };
     SVGCache.prototype._svgElementFromString = function (str) {
@@ -50,0 +44,0 @@ var div = document.createElement('DIV');

package.json

 {
   "name": "ng2-inline-svg",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Angular 2 directive for inserting an SVG inline within an element.",
@@ -5,0 +5,0 @@ "repository": {

src/ng2-inline-svg.ts

@@ -19,3 +19,2 @@ import {
 export default class InlineSVG implements OnInit, OnChanges {
-  @Input() private inlineSVG: string;
   @Input() replaceContents: boolean = true;
@@ -26,11 +25,15 @@ @Input() cacheSVG: boolean = true;
 
+  @Input() private inlineSVG: string;
+
+  private _absUrl: string;
+
   constructor(private _el: ElementRef, private _svgCache: SVGCache) {
   }
 
-  ngOnInit() {
+  ngOnInit(): void {
     this._insertSVG();
   }
 
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['inlineSVG']) {
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['inlineSVG'] && changes['inlineSVG'].currentValue !== changes['inlineSVG'].previousValue) {
       this._insertSVG();
@@ -41,2 +44,3 @@ }
   private _insertSVG(): void {
+    // Check if a URL was actually passed into the directive
     if (!this.inlineSVG) {
@@ -47,15 +51,31 @@ console.error('No URL passed to [inlineSVG]!');
 
-    this._svgCache.getSVG(this.inlineSVG, this.cacheSVG)
-      .then((svg: SVGElement) => {
-        if (svg && this._el.nativeElement) {
-          if (this.replaceContents) {
-            this._el.nativeElement.innerHTML = '';
+    // Get absolute URL, and check if it's actually new
+    const absUrl = this._getAbsoluteUrl(this.inlineSVG);
+
+    if (absUrl !== this._absUrl) {
+      this._absUrl = absUrl;
+
+      // Fetch SVG via cache mechanism
+      this._svgCache.getSVG(this.inlineSVG, this.cacheSVG)
+        .then((svg: SVGElement) => {
+          // Insert SVG
+          if (svg && this._el.nativeElement) {
+            if (this.replaceContents) {
+              this._el.nativeElement.innerHTML = '';
+            }
+
+            this._el.nativeElement.appendChild(svg);
+            this.onSVGInserted.emit(svg);
           }
+        })
+        .catch((err: any) => console.error(err));
+    }
+  }
 
-          this._el.nativeElement.appendChild(svg);
-          this.onSVGInserted.emit(svg);
-        }
-      })
-      .catch((err: any) => console.error(err));
+  private _getAbsoluteUrl(url: string): string {
+    const base = document.createElement('BASE') as HTMLBaseElement;
+    base.href = url;
+
+    return base.href;
   }
 }

src/svg-cache.ts

@@ -17,12 +17,9 @@ import { Injectable } from '@angular/core';
     return new Promise((resolve, reject) => {
-      // Get full absolute URL path first
-      const absUrl = this._getAbsoluteUrl(url);
-
       // Return cached copy if it exists
-      if (cache && SVGCache._cache.has(absUrl)) {
-        resolve(this._cloneSvg(SVGCache._cache.get(absUrl)));
+      if (cache && SVGCache._cache.has(url)) {
+        resolve(this._cloneSvg(SVGCache._cache.get(url)));
       }
 
       // Otherwise, make the HTTP call to fetch
-      this._http.get(absUrl)
+      this._http.get(url)
         .map(res => res.text())
@@ -36,3 +33,3 @@ .subscribe(
               if (cache) {
-                SVGCache._cache.set(absUrl, svgElement);
+                SVGCache._cache.set(url, svgElement);
               }
@@ -48,9 +45,2 @@
 
-  private _getAbsoluteUrl(url: string): string {
-    const base = document.createElement('BASE') as HTMLBaseElement;
-    base.href = url;
-
-    return base.href;
-  }
-
   private _svgElementFromString(str: string): SVGElement {
@@ -57,0 +47,0 @@ const div = document.createElement('DIV') as HTMLElement;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14179

increased by6.8%

Lines of code

277

increased by8.2%

No dependency changes