ngx-img-fallback - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0

CHANGELOG.md

 # Changelog
 
+## 1.2.0
+* [[19](https://github.com/VadimDez/ngx-img-fallback/issues/19)] - Support server side rendering
+
 ## 1.1.3
@@ -4,0 +7,0 @@ * [[18](https://github.com/VadimDez/ngx-img-fallback/issues/18)] - Wrong contents for 1.1.2 in npm

dist/bundles/ngx-img-fallback.umd.js

@@ -17,3 +17,5 @@ (function (global, factory) {
 exports.ImgFallbackDirective = (function () {
-    function ImgFallbackDirective(el) {
+    function ImgFallbackDirective(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
         this.loaded = new _angular_core.EventEmitter();
@@ -23,3 +25,3 @@ this.isApplied = false;
         this.LOAD_EVENT_TYPE = 'load';
-        this.el = el.nativeElement;
+        this.nativeElement = el.nativeElement;
         this.onError = this.onError.bind(this);
@@ -34,5 +36,5 @@ this.onLoad = this.onLoad.bind(this);
     ImgFallbackDirective.prototype.onError = function () {
-        if (this.el.getAttribute('src') !== this.imgSrc) {
+        if (this.nativeElement.getAttribute('src') !== this.imgSrc) {
             this.isApplied = true;
-            this.el.setAttribute('src', this.imgSrc);
+            this.renderer.setAttribute(this.nativeElement, 'src', this.imgSrc);
         }
@@ -45,10 +47,14 @@ this.removeOnLoadEvent();
     ImgFallbackDirective.prototype.removeErrorEvent = function () {
-        this.el.removeEventListener(this.ERROR_EVENT_TYPE, this.onError);
+        if (this.cancelOnError) {
+            this.cancelOnError();
+        }
     };
     ImgFallbackDirective.prototype.removeOnLoadEvent = function () {
-        this.el.removeEventListener(this.LOAD_EVENT_TYPE, this.onLoad);
+        if (this.cancelOnLoad) {
+            this.cancelOnLoad();
+        }
     };
     ImgFallbackDirective.prototype.addEvents = function () {
-        this.el.addEventListener(this.ERROR_EVENT_TYPE, this.onError);
-        this.el.addEventListener(this.LOAD_EVENT_TYPE, this.onLoad);
+        this.cancelOnError = this.renderer.listen(this.nativeElement, this.ERROR_EVENT_TYPE, this.onError);
+        this.cancelOnLoad = this.renderer.listen(this.nativeElement, this.LOAD_EVENT_TYPE, this.onLoad);
     };
@@ -69,3 +75,3 @@ return ImgFallbackDirective;
     }),
-    __metadata("design:paramtypes", [_angular_core.ElementRef])
+    __metadata("design:paramtypes", [_angular_core.ElementRef, _angular_core.Renderer2])
 ], exports.ImgFallbackDirective);
@@ -72,0 +78,0 @@

dist/src/ngx-img-fallback.directive.d.ts

@@ -1,10 +0,14 @@
-import { ElementRef, EventEmitter, OnDestroy } from '@angular/core';
+import { ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
 export declare class ImgFallbackDirective implements OnDestroy {
+    private el;
+    private renderer;
     imgSrc: string;
     loaded: EventEmitter<boolean>;
-    private el;
+    private nativeElement;
     private isApplied;
     private ERROR_EVENT_TYPE;
     private LOAD_EVENT_TYPE;
-    constructor(el: ElementRef);
+    private cancelOnError;
+    private cancelOnLoad;
+    constructor(el: ElementRef, renderer: Renderer2);
     ngOnDestroy(): void;
@@ -11,0 +15,0 @@ private onError();

dist/src/ngx-img-fallback.directive.js

@@ -5,3 +5,5 @@ "use strict";
 var ImgFallbackDirective = (function () {
-    function ImgFallbackDirective(el) {
+    function ImgFallbackDirective(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
         this.loaded = new core_1.EventEmitter();
@@ -11,3 +13,3 @@ this.isApplied = false;
         this.LOAD_EVENT_TYPE = 'load';
-        this.el = el.nativeElement;
+        this.nativeElement = el.nativeElement;
         this.onError = this.onError.bind(this);
@@ -22,5 +24,5 @@ this.onLoad = this.onLoad.bind(this);
     ImgFallbackDirective.prototype.onError = function () {
-        if (this.el.getAttribute('src') !== this.imgSrc) {
+        if (this.nativeElement.getAttribute('src') !== this.imgSrc) {
             this.isApplied = true;
-            this.el.setAttribute('src', this.imgSrc);
+            this.renderer.setAttribute(this.nativeElement, 'src', this.imgSrc);
         }
@@ -33,10 +35,14 @@ this.removeOnLoadEvent();
     ImgFallbackDirective.prototype.removeErrorEvent = function () {
-        this.el.removeEventListener(this.ERROR_EVENT_TYPE, this.onError);
+        if (this.cancelOnError) {
+            this.cancelOnError();
+        }
     };
     ImgFallbackDirective.prototype.removeOnLoadEvent = function () {
-        this.el.removeEventListener(this.LOAD_EVENT_TYPE, this.onLoad);
+        if (this.cancelOnLoad) {
+            this.cancelOnLoad();
+        }
     };
     ImgFallbackDirective.prototype.addEvents = function () {
-        this.el.addEventListener(this.ERROR_EVENT_TYPE, this.onError);
-        this.el.addEventListener(this.LOAD_EVENT_TYPE, this.onLoad);
+        this.cancelOnError = this.renderer.listen(this.nativeElement, this.ERROR_EVENT_TYPE, this.onError);
+        this.cancelOnLoad = this.renderer.listen(this.nativeElement, this.LOAD_EVENT_TYPE, this.onLoad);
     };
@@ -53,2 +59,3 @@ return ImgFallbackDirective;
     { type: core_1.ElementRef, },
+    { type: core_1.Renderer2, },
 ]; };
@@ -55,0 +62,0 @@ ImgFallbackDirective.propDecorators = {

dist/src/ngx-img-fallback.directive.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"ImgFallbackDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[src-fallback]"}]}],"members":{"imgSrc":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["src-fallback"]}]}],"loaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["loaded"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnDestroy":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}],"onLoad":[{"__symbolic":"method"}],"removeErrorEvent":[{"__symbolic":"method"}],"removeOnLoadEvent":[{"__symbolic":"method"}],"addEvents":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ImgFallbackDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[src-fallback]"}]}],"members":{"imgSrc":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["src-fallback"]}]}],"loaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["loaded"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnDestroy":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}],"onLoad":[{"__symbolic":"method"}],"removeErrorEvent":[{"__symbolic":"method"}],"removeOnLoadEvent":[{"__symbolic":"method"}],"addEvents":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"ImgFallbackDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[src-fallback]"}]}],"members":{"imgSrc":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["src-fallback"]}]}],"loaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["loaded"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnDestroy":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}],"onLoad":[{"__symbolic":"method"}],"removeErrorEvent":[{"__symbolic":"method"}],"removeOnLoadEvent":[{"__symbolic":"method"}],"addEvents":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ImgFallbackDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[src-fallback]"}]}],"members":{"imgSrc":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["src-fallback"]}]}],"loaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["loaded"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnDestroy":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}],"onLoad":[{"__symbolic":"method"}],"removeErrorEvent":[{"__symbolic":"method"}],"removeOnLoadEvent":[{"__symbolic":"method"}],"addEvents":[{"__symbolic":"method"}]}}}}]

package.json

 {
   "name": "ngx-img-fallback",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "Angular4+ directive for image fallback",
@@ -5,0 +5,0 @@ "main": "dist/bundles/ngx-img-fallback.umd.js",

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

21693

increased by5.03%

Number of downloads

5317

increased by7.05%

Lines of code

215

increased by8.59%

No dependency changes