ng2-inline-svg - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

dist/ng2-inline-svg.d.ts

@@ -6,7 +6,7 @@ import { ElementRef, EventEmitter, OnInit } from '@angular/core';
     private _svgCache;
-    url: string;
-    onSVGInserted: EventEmitter<any>;
+    inlineSVG: string;
+    cacheSVG: boolean;
+    onSVGInserted: EventEmitter<SVGElement>;
     constructor(_el: ElementRef, _svgCache: SVGCache);
     ngOnInit(): void;
-    private _insertSVG(data);
 }

dist/ng2-inline-svg.js

@@ -17,2 +17,3 @@ "use strict";
         this._svgCache = _svgCache;
+        this.cacheSVG = true;
         this.onSVGInserted = new core_1.EventEmitter();
@@ -22,16 +23,25 @@ }
         var _this = this;
-        this._svgCache.getSVG(this.url)
+        if (!this.inlineSVG) {
+            console.error('No URL passed to [inline-svg]!');
+            return;
+        }
+        this._svgCache.getSVG(this.inlineSVG, this.cacheSVG)
             .subscribe(function (svg) {
-            _this._insertSVG(svg);
-            _this.onSVGInserted.emit(null);
+            if (svg) {
+                _this._el.nativeElement.innerHTML = svg;
+                _this.onSVGInserted.emit(svg);
+            }
+        }, function (err) {
+            console.error(err);
         });
     };
-    InlineSVG.prototype._insertSVG = function (data) {
-        this._el.nativeElement.innerHTML = data;
-    };
     __decorate([
-        core_1.Input('inline-svg'), 
+        core_1.Input(), 
         __metadata('design:type', String)
-    ], InlineSVG.prototype, "url", void 0);
+    ], InlineSVG.prototype, "inlineSVG", void 0);
     __decorate([
+        core_1.Input(), 
+        __metadata('design:type', Boolean)
+    ], InlineSVG.prototype, "cacheSVG", void 0);
+    __decorate([
         core_1.Output(), 
@@ -42,3 +52,3 @@ __metadata('design:type', core_1.EventEmitter)
         core_1.Directive({
-            selector: '[inline-svg]',
+            selector: '[inlineSVG]',
             providers: [svg_cache_1.default]
@@ -45,0 +55,0 @@ }),

dist/svg-cache.d.ts

@@ -0,3 +1,3 @@
+import { Http } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
-import { Http } from '@angular/http';
 import 'rxjs/add/observable/of';
@@ -7,9 +7,9 @@ import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/share';
 export default class SVGCache {
     private _http;
-    private _cache;
+    private static _cache;
     constructor(_http: Http);
-    getSVG(url: string): Observable<SVGElement>;
+    getSVG(url: string, cache: boolean): Observable<SVGElement>;
     private _svgElementFromString(str);
+    private _getAbsoluteUrl(url);
 }

dist/svg-cache.js

@@ -12,4 +12,4 @@ "use strict";
 var core_1 = require('@angular/core');
+var http_1 = require('@angular/http');
 var Observable_1 = require('rxjs/Observable');
-var http_1 = require('@angular/http');
 require('rxjs/add/observable/of');
@@ -19,17 +19,19 @@ require('rxjs/add/operator/catch');
 require('rxjs/add/operator/map');
-require('rxjs/add/operator/share');
 var SVGCache = (function () {
     function SVGCache(_http) {
         this._http = _http;
-        this._cache = new Map();
+        if (!SVGCache._cache) {
+            SVGCache._cache = new Map();
+        }
     }
-    SVGCache.prototype.getSVG = function (url) {
+    SVGCache.prototype.getSVG = function (url, cache) {
         var _this = this;
-        if (this._cache.has(url)) {
-            return Observable_1.Observable.of(this._cache.get(url));
+        var absUrl = this._getAbsoluteUrl(url);
+        if (cache && SVGCache._cache.has(absUrl)) {
+            return Observable_1.Observable.of(SVGCache._cache.get(absUrl));
         }
-        return this._http.get(url)
+        return this._http.get(absUrl)
             .map(function (res) { return res.text(); })
             .catch(function (err, caught) {
-            console.error("Loading SVG icon URL: " + url + " failed: " + err);
+            console.error("Loading SVG icon from URL " + absUrl + " failed", err);
             return Observable_1.Observable.of(null);
@@ -40,3 +42,5 @@ })
                 var svgElement = _this._svgElementFromString(svg);
-                _this._cache.set(url, svgElement);
+                if (cache) {
+                    SVGCache._cache.set(absUrl, svgElement);
+                }
                 return Observable_1.Observable.of(svgElement);
@@ -51,6 +55,11 @@ }
         if (!svg) {
-            throw new Error('No SVG found');
+            throw new Error('No SVG found in loaded contents');
         }
         return svg;
     };
+    SVGCache.prototype._getAbsoluteUrl = function (url) {
+        var base = document.createElement('BASE');
+        base.href = url;
+        return base.href;
+    };
     SVGCache = __decorate([
@@ -57,0 +66,0 @@ core_1.Injectable(),

package.json

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

README.md

@@ -7,6 +7,7 @@ # ng2-inline-svg
 
-Angular 2 directive for inserting an SVG file inline within an element.
+Angular 2 directive for inserting an SVG file inline within an element, allowing for easily styling
+SVGs with CSS like `fill: currentColor;`.
 
-Based on [md-icon](https://github.com/angular/material2/tree/master/src/components/icon), except
-this is meant purely for inserting SVG files within an element, without the extra things like
+This is based on [md-icon](https://github.com/angular/material2/tree/master/src/components/icon),
+except this is meant purely for inserting SVG files within an element, without the extra things like
 font icons.
@@ -24,3 +25,3 @@
 
-Make sure to add `HTTP_PROVIDERS` to your bootstrap providers:
+Make sure to add `HTTP_PROVIDERS` to your list of bootstrap providers:
 
@@ -43,12 +44,21 @@ ```typescript
 @Component({
-  selector: 'demo',
+  selector: 'app',
   directives: [InlineSVG],
   template: `
-    <div class="demo-svg" aria-label="My icon" [inline-svg]="'/img/image.svg'"></div>
+    <div class="my-icon" aria-label="My icon" [inlineSVG]="'/img/image.svg'"></div>
   `
 })
-export class DemoComponent {
+export class App {
 }
 ```
 
-The SVG file (if found) will be inserted *inside* the element with the `[inline-svg]` directive.
+The SVG file (if found) will be inserted *inside* the element with the `[inlineSVG]` directive.
+
+
+*To be documented...*
+
+`(onSVGInserted)`
+
+`[cacheSVG]`
+
+Cache

src/ng2-inline-svg.ts

@@ -13,9 +13,10 @@ import {
 @Directive({
-  selector: '[inline-svg]',
+  selector: '[inlineSVG]',
   providers: [SVGCache]
 })
 export default class InlineSVG implements OnInit {
-  @Input('inline-svg') url: string;
+  @Input() inlineSVG: string;
+  @Input() cacheSVG: boolean = true;
 
-  @Output() onSVGInserted: EventEmitter<any> = new EventEmitter<any>();
+  @Output() onSVGInserted: EventEmitter<SVGElement> = new EventEmitter<SVGElement>();
 
@@ -26,9 +27,16 @@ constructor(private _el: ElementRef, private _svgCache: SVGCache) {
   ngOnInit() {
-    this._svgCache.getSVG(this.url)
+    if (!this.inlineSVG) {
+      console.error('No URL passed to [inline-svg]!');
+      return;
+    }
+
+    this._svgCache.getSVG(this.inlineSVG, this.cacheSVG)
       .subscribe(
-        (svg) => {
-          this._el.nativeElement.innerHTML = svg;
-          this.onSVGInserted.emit(null);
+        (svg: SVGElement) => {
+          if (svg) {
+            this._el.nativeElement.innerHTML = svg;
+            this.onSVGInserted.emit(svg);
+          }
         },
-        (err) => {
+        (err: any) => {
           console.error(err);
@@ -35,0 +43,0 @@ }

src/svg-cache.ts

 import { Injectable } from '@angular/core';
+import { Http } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
-import { Http } from '@angular/http';
 import 'rxjs/add/observable/of';
@@ -8,31 +8,38 @@ import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/share';
 
 @Injectable()
 export default class SVGCache {
-  private _cache: Map<string, SVGElement>;
+  private static _cache: Map<string, SVGElement>;
 
   constructor(private _http: Http) {
-    this._cache = new Map<string, SVGElement>();
+    if (!SVGCache._cache) {
+      SVGCache._cache = new Map<string, SVGElement>();
+    }
   }
 
-  getSVG(url: string): Observable<SVGElement> {
+  getSVG(url: string, cache: boolean): Observable<SVGElement> {
+    // Get full absolute URL path first
+    const absUrl = this._getAbsoluteUrl(url);
+
     // Return cached copy if it exists
-    if (this._cache.has(url)) {
-      return Observable.of(this._cache.get(url));
+    if (cache && SVGCache._cache.has(absUrl)) {
+      return Observable.of(SVGCache._cache.get(absUrl));
     }
 
     // Otherwise, make the HTTP call to fetch
-    return this._http.get(url)
+    return this._http.get(absUrl)
       .map(res => res.text())
       .catch((err: any, caught: Observable<string>): Observable<SVGElement> => {
-        console.error(`Loading SVG icon URL: ${url} failed: ${err}`);
+        console.error(`Loading SVG icon from URL ${absUrl} failed`, err);
+
         return Observable.of(null);
       })
       .do(svg => {
-        // Cache SVG element.
         if (svg) {
           const svgElement = this._svgElementFromString(svg as any as string);
 
-          this._cache.set(url, svgElement);
+          // Cache SVG element
+          if (cache) {
+            SVGCache._cache.set(absUrl, svgElement);
+          }
 
@@ -45,3 +52,3 @@ return Observable.of(svgElement);
   private _svgElementFromString(str: string): SVGElement {
-    const div = document.createElement('DIV');
+    const div = document.createElement('DIV') as HTMLElement;
     div.innerHTML = str;
@@ -52,3 +59,3 @@
     if (!svg) {
-      throw new Error('No SVG found');
+      throw new Error('No SVG found in loaded contents');
     }
@@ -58,2 +65,9 @@
   }
+
+  private _getAbsoluteUrl(url: string) {
+    const base = document.createElement('BASE') as HTMLBaseElement;
+    base.href = url;
+
+    return base.href
+  }
 }

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

12559

increased by12.76%

Lines of code

244

increased by17.31%

Number of lines in readme file

61

increased by17.31%

No dependency changes