ng2-img-fallback - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

CHANGELOG.md

 # Changelog
 
+## 0.2.2
+* [[#11](https://github.com/VadimDez/ng2-img-fallback/issues/11)] - Added `(loaded)` event
+
 ## 0.2.1
@@ -4,0 +7,0 @@ * [[#10](https://github.com/VadimDez/ng2-img-fallback/issues/10)] - Error Ionic2 run android device

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

@@ -1,11 +0,15 @@
-import { ElementRef } from '@angular/core';
+import { ElementRef, EventEmitter } from '@angular/core';
 export declare class Ng2ImgFallbackDirective {
     imgSrc: string;
+    loaded: EventEmitter<boolean>;
     private el;
     private isApplied;
-    private EVENT_TYPE;
+    private ERROR_EVENT_TYPE;
+    private LOAD_EVENT_TYPE;
     constructor(el: ElementRef);
     private onError();
-    private removeEvents();
+    private onLoad();
+    private removeErrorEvent();
+    private removeOnLoadEvent();
     ngOnDestroy(): void;
 }

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

@@ -5,9 +5,12 @@ "use strict";
     function Ng2ImgFallbackDirective(el) {
+        this.loaded = new core_1.EventEmitter();
         this.isApplied = false;
-        this.EVENT_TYPE = 'error';
+        this.ERROR_EVENT_TYPE = 'error';
+        this.LOAD_EVENT_TYPE = 'load';
         this.el = el.nativeElement;
-        this.el.addEventListener(this.EVENT_TYPE, this.onError.bind(this));
+        this.el.addEventListener(this.ERROR_EVENT_TYPE, this.onError.bind(this));
+        this.el.addEventListener(this.LOAD_EVENT_TYPE, this.onLoad.bind(this));
     }
     Ng2ImgFallbackDirective.prototype.onError = function () {
-        this.removeEvents();
+        this.removeErrorEvent();
         if (!this.isApplied) {
@@ -17,8 +20,16 @@ this.isApplied = true;
         }
+        this.removeOnLoadEvent();
     };
-    Ng2ImgFallbackDirective.prototype.removeEvents = function () {
-        this.el.removeEventListener(this.EVENT_TYPE, this.onError);
+    Ng2ImgFallbackDirective.prototype.onLoad = function () {
+        this.loaded.emit(this.isApplied);
     };
+    Ng2ImgFallbackDirective.prototype.removeErrorEvent = function () {
+        this.el.removeEventListener(this.ERROR_EVENT_TYPE, this.onError);
+    };
+    Ng2ImgFallbackDirective.prototype.removeOnLoadEvent = function () {
+        this.el.removeEventListener(this.LOAD_EVENT_TYPE, this.onLoad);
+    };
     Ng2ImgFallbackDirective.prototype.ngOnDestroy = function () {
-        this.removeEvents();
+        this.removeErrorEvent();
+        this.removeOnLoadEvent();
     };
@@ -36,2 +47,3 @@ Ng2ImgFallbackDirective.decorators = [
         'imgSrc': [{ type: core_1.Input, args: ['src-fallback',] },],
+        'loaded': [{ type: core_1.Output, args: ['loaded',] },],
     };
@@ -38,0 +50,0 @@ return Ng2ImgFallbackDirective;

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

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"Ng2ImgFallbackDirective":{"__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"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"onError":[{"__symbolic":"method"}],"removeEvents":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"Ng2ImgFallbackDirective":{"__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"}]}],"onError":[{"__symbolic":"method"}],"onLoad":[{"__symbolic":"method"}],"removeErrorEvent":[{"__symbolic":"method"}],"removeOnLoadEvent":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}

package.json

 {
   "name": "ng2-img-fallback",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Angular2 directive for image fallback",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -1,2 +0,2 @@
-# Angular2 Image Fallback [![npm version](https://badge.fury.io/js/ng2-img-fallback.svg)](https://badge.fury.io/js/ng2-img-fallback) [![Bower version](https://badge.fury.io/bo/ng2-img-fallback.svg)](https://badge.fury.io/bo/ng2-img-fallback) ![Dependencies](https://david-dm.org/vadimdez/ng2-img-fallback.svg)
+# Angular2 Image Fallback [![npm version](https://badge.fury.io/js/ng2-img-fallback.svg)](https://badge.fury.io/js/ng2-img-fallback)  ![Dependencies](https://david-dm.org/vadimdez/ng2-img-fallback.svg)
 
@@ -11,13 +11,6 @@ > Load placeholder image on image error
 
-*NPM:*
-
 ```
 npm install  ng2-img-fallback --save
 ```
-or *Bower:*
 
-```
-bower install ng2-img-fallback --save
-```
-
 ### Usage
@@ -30,3 +23,3 @@
 
-```js
+```ts
 import { NgModule } from '@angular/core';
@@ -49,3 +42,3 @@ import { BrowserModule  } from '@angular/platform-browser';
 
-```js
+```ts
 import { Component } from '@angular/core';
@@ -65,4 +58,26 @@
 
+### Callbacks
+
+#### `(loaded)`
+
+`ng2-img-fallback` provides `(loaded)` event which is fired when either `src` or `src-fallback` is loaded.
+To determinate whether original source or fallback is loaded - add a param to your callback for the `(loaded)` event.
+ 
+Example:
+
+First add callback to your component
+
+```ts
+onLoaded(isFallback: boolean) {
+  // make somthing based on 'isFallback'
+}
+```
+and then bind it to the `loaded` event
+
+```html
+<img src="picture1.png" src-fallback="picture2.png" (loaded)="onLoaded($event)"> 
+```
+
 ### License
 
 [MIT](https://tldrlegal.com/license/mit-license) © [Vadym Yatsyuk](https://github.com/vadimdez)

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

13025

increased by17.93%

Lines of code

100

increased by19.05%

Number of lines in readme file

80

increased by23.08%

No dependency changes