ng-lazyload-image-angular-universal
Version:
This is an extension from ng-lazyload-image, made available for Angular Universal.
167 lines • 13 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Directive, ElementRef, EventEmitter, Inject, Input, NgZone, Optional, Output, PLATFORM_ID } from '@angular/core';
import { isPlatformServer } from '@angular/common';
import { ReplaySubject } from 'rxjs';
import { switchMap, tap, first } from 'rxjs/operators';
import { cretateHooks } from './hooks-factory';
import { lazyLoadImage } from './lazyload-image';
export class LazyLoadImageDirective {
/**
* @param {?} el
* @param {?} ngZone
* @param {?} platformId
* @param {?=} options
*/
constructor(el, ngZone, platformId, options) {
this.platformId = platformId;
// Whether srcset attribute should be used instead of src
this.onLoad = new EventEmitter(); // Callback when an image is loaded
this.elementRef = el;
this.ngZone = ngZone;
this.propertyChanges$ = new ReplaySubject();
this.hooks = cretateHooks(options);
}
/**
* @return {?}
*/
ngOnChanges() {
this.propertyChanges$.next({
element: this.elementRef.nativeElement,
imagePath: this.lazyImage,
defaultImagePath: this.defaultImage,
errorImagePath: this.errorImage,
useSrcset: this.useSrcset,
offset: this.offset | 0,
scrollContainer: this.scrollTarget,
scrollObservable: this.scrollObservable
});
}
/**
* @return {?}
*/
ngAfterContentInit() {
// Disable lazy load image in server side
if (isPlatformServer(this.platformId)) {
this.scrollSubscription = this.propertyChanges$
.pipe(tap((/**
* @param {?} attributes
* @return {?}
*/
attributes => this.hooks.setup(attributes))), first())
.subscribe();
return null;
}
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
() => {
this.scrollSubscription = this.propertyChanges$
.pipe(tap((/**
* @param {?} attributes
* @return {?}
*/
attributes => this.hooks.setup(attributes))), switchMap((/**
* @param {?} attributes
* @return {?}
*/
attributes => this.hooks
.getObservable(attributes)
.pipe(lazyLoadImage(this.hooks, attributes)))))
.subscribe((/**
* @param {?} success
* @return {?}
*/
success => this.onLoad.emit(success)));
}));
}
/**
* @return {?}
*/
ngOnDestroy() {
[this.scrollSubscription]
.filter((/**
* @param {?} subscription
* @return {?}
*/
subscription => subscription && !subscription.isUnsubscribed))
.forEach((/**
* @param {?} subscription
* @return {?}
*/
subscription => subscription.unsubscribe()));
}
}
LazyLoadImageDirective.decorators = [
{ type: Directive, args: [{
selector: '[lazyLoad]'
},] }
];
/** @nocollapse */
LazyLoadImageDirective.ctorParameters = () => [
{ type: ElementRef },
{ type: NgZone },
{ type: Object, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] },
{ type: undefined, decorators: [{ type: Optional }, { type: Inject, args: ['options',] }] }
];
LazyLoadImageDirective.propDecorators = {
lazyImage: [{ type: Input, args: ['lazyLoad',] }],
defaultImage: [{ type: Input }],
errorImage: [{ type: Input }],
scrollTarget: [{ type: Input }],
scrollObservable: [{ type: Input }],
offset: [{ type: Input }],
useSrcset: [{ type: Input }],
onLoad: [{ type: Output }]
};
if (false) {
/** @type {?} */
LazyLoadImageDirective.prototype.lazyImage;
/** @type {?} */
LazyLoadImageDirective.prototype.defaultImage;
/** @type {?} */
LazyLoadImageDirective.prototype.errorImage;
/** @type {?} */
LazyLoadImageDirective.prototype.scrollTarget;
/** @type {?} */
LazyLoadImageDirective.prototype.scrollObservable;
/** @type {?} */
LazyLoadImageDirective.prototype.offset;
/** @type {?} */
LazyLoadImageDirective.prototype.useSrcset;
/** @type {?} */
LazyLoadImageDirective.prototype.onLoad;
/**
* @type {?}
* @private
*/
LazyLoadImageDirective.prototype.propertyChanges$;
/**
* @type {?}
* @private
*/
LazyLoadImageDirective.prototype.elementRef;
/**
* @type {?}
* @private
*/
LazyLoadImageDirective.prototype.ngZone;
/**
* @type {?}
* @private
*/
LazyLoadImageDirective.prototype.scrollSubscription;
/**
* @type {?}
* @private
*/
LazyLoadImageDirective.prototype.hooks;
/**
* @type {?}
* @private
*/
LazyLoadImageDirective.prototype.platformId;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGF6eWxvYWQtaW1hZ2UuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmctbGF6eWxvYWQtaW1hZ2UtYW5ndWxhci11bml2ZXJzYWwvIiwic291cmNlcyI6WyJsaWIvbGF6eWxvYWQtaW1hZ2UuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBRUwsU0FBUyxFQUNULFVBQVUsRUFDVixZQUFZLEVBQ1osTUFBTSxFQUNOLEtBQUssRUFDTCxNQUFNLEVBR04sUUFBUSxFQUNSLE1BQU0sRUFDTixXQUFXLEVBQ1osTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDbkQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUNyQyxPQUFPLEVBQUUsU0FBUyxFQUFFLEdBQUcsRUFBRSxLQUFLLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUN2RCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBTWpELE1BQU0sT0FBTyxzQkFBc0I7Ozs7Ozs7SUFnQmpDLFlBQ0UsRUFBYyxFQUNkLE1BQWMsRUFDZSxVQUFrQixFQUNoQixPQUF1QjtRQUR6QixlQUFVLEdBQVYsVUFBVSxDQUFROztRQVZ2QyxXQUFNLEdBQTBCLElBQUksWUFBWSxFQUFFLENBQUMsQ0FBQyxtQ0FBbUM7UUFhL0YsSUFBSSxDQUFDLFVBQVUsR0FBRyxFQUFFLENBQUM7UUFDckIsSUFBSSxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUM7UUFDckIsSUFBSSxDQUFDLGdCQUFnQixHQUFHLElBQUksYUFBYSxFQUFFLENBQUM7UUFDNUMsSUFBSSxDQUFDLEtBQUssR0FBRyxZQUFZLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDckMsQ0FBQzs7OztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDO1lBQ3pCLE9BQU8sRUFBRSxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWE7WUFDdEMsU0FBUyxFQUFFLElBQUksQ0FBQyxTQUFTO1lBQ3pCLGdCQUFnQixFQUFFLElBQUksQ0FBQyxZQUFZO1lBQ25DLGNBQWMsRUFBRSxJQUFJLENBQUMsVUFBVTtZQUMvQixTQUFTLEVBQUUsSUFBSSxDQUFDLFNBQVM7WUFDekIsTUFBTSxFQUFFLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQztZQUN2QixlQUFlLEVBQUUsSUFBSSxDQUFDLFlBQVk7WUFDbEMsZ0JBQWdCLEVBQUUsSUFBSSxDQUFDLGdCQUFnQjtTQUN4QyxDQUFDLENBQUM7SUFDTCxDQUFDOzs7O0lBRUQsa0JBQWtCO1FBQ2hCLHlDQUF5QztRQUN6QyxJQUFJLGdCQUFnQixDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsRUFBRTtZQUNyQyxJQUFJLENBQUMsa0JBQWtCLEdBQUcsSUFBSSxDQUFDLGdCQUFnQjtpQkFDNUMsSUFBSSxDQUNILEdBQUc7Ozs7WUFBQyxVQUFVLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLFVBQVUsQ0FBQyxFQUFDLEVBQy9DLEtBQUssRUFBRSxDQUNSO2lCQUNBLFNBQVMsRUFBRSxDQUFDO1lBQ2YsT0FBTyxJQUFJLENBQUM7U0FDYjtRQUVELElBQUksQ0FBQyxNQUFNLENBQUMsaUJBQWlCOzs7UUFBQyxHQUFHLEVBQUU7WUFDakMsSUFBSSxDQUFDLGtCQUFrQixHQUFHLElBQUksQ0FBQyxnQkFBZ0I7aUJBQzVDLElBQUksQ0FDSCxHQUFHOzs7O1lBQUMsVUFBVSxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxVQUFVLENBQUMsRUFBQyxFQUMvQyxTQUFTOzs7O1lBQUMsVUFBVSxDQUFDLEVBQUUsQ0FDckIsSUFBSSxDQUFDLEtBQUs7aUJBQ1AsYUFBYSxDQUFDLFVBQVUsQ0FBQztpQkFDekIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLFVBQVUsQ0FBQyxDQUFDLEVBQy9DLENBQ0Y7aUJBQ0EsU0FBUzs7OztZQUFDLE9BQU8sQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLEVBQUMsQ0FBQztRQUNyRCxDQUFDLEVBQUMsQ0FBQztJQUNMLENBQUM7Ozs7SUFFRCxXQUFXO1FBQ1QsQ0FBQyxJQUFJLENBQUMsa0JBQWtCLENBQUM7YUFDdEIsTUFBTTs7OztRQUFDLFlBQVksQ0FBQyxFQUFFLENBQUMsWUFBWSxJQUFJLENBQUMsWUFBWSxDQUFDLGNBQWMsRUFBQzthQUNwRSxPQUFPOzs7O1FBQUMsWUFBWSxDQUFDLEVBQUUsQ0FBQyxZQUFZLENBQUMsV0FBVyxFQUFFLEVBQUMsQ0FBQztJQUN6RCxDQUFDOzs7WUExRUYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxZQUFZO2FBQ3ZCOzs7O1lBcEJDLFVBQVU7WUFJVixNQUFNO1lBb0NxQyxNQUFNLHVCQUE5QyxNQUFNLFNBQUMsV0FBVzs0Q0FDbEIsUUFBUSxZQUFJLE1BQU0sU0FBQyxTQUFTOzs7d0JBbEI5QixLQUFLLFNBQUMsVUFBVTsyQkFDaEIsS0FBSzt5QkFDTCxLQUFLOzJCQUNMLEtBQUs7K0JBQ0wsS0FBSztxQkFDTCxLQUFLO3dCQUNMLEtBQUs7cUJBQ0wsTUFBTTs7OztJQVBQLDJDQUE2Qjs7SUFDN0IsOENBQThCOztJQUM5Qiw0Q0FBNEI7O0lBQzVCLDhDQUEyQjs7SUFDM0Isa0RBQTBCOztJQUMxQix3Q0FBd0I7O0lBQ3hCLDJDQUE0Qjs7SUFDNUIsd0NBQTZEOzs7OztJQUM3RCxrREFBb0Q7Ozs7O0lBQ3BELDRDQUErQjs7Ozs7SUFDL0Isd0NBQXVCOzs7OztJQUN2QixvREFBMkI7Ozs7O0lBQzNCLHVDQUE0Qjs7Ozs7SUFLMUIsNENBQStDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQWZ0ZXJDb250ZW50SW5pdCxcbiAgRGlyZWN0aXZlLFxuICBFbGVtZW50UmVmLFxuICBFdmVudEVtaXR0ZXIsXG4gIEluamVjdCxcbiAgSW5wdXQsXG4gIE5nWm9uZSxcbiAgT25DaGFuZ2VzLFxuICBPbkRlc3Ryb3ksXG4gIE9wdGlvbmFsLFxuICBPdXRwdXQsXG4gIFBMQVRGT1JNX0lEXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgaXNQbGF0Zm9ybVNlcnZlciB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBSZXBsYXlTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBzd2l0Y2hNYXAsIHRhcCwgZmlyc3QgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBjcmV0YXRlSG9va3MgfSBmcm9tICcuL2hvb2tzLWZhY3RvcnknO1xuaW1wb3J0IHsgbGF6eUxvYWRJbWFnZSB9IGZyb20gJy4vbGF6eWxvYWQtaW1hZ2UnO1xuaW1wb3J0IHsgQXR0cmlidXRlcywgSG9va1NldCwgTW9kdWxlT3B0aW9ucyB9IGZyb20gJy4vdHlwZXMnO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbbGF6eUxvYWRdJ1xufSlcbmV4cG9ydCBjbGFzcyBMYXp5TG9hZEltYWdlRGlyZWN0aXZlXG4gIGltcGxlbWVudHMgT25DaGFuZ2VzLCBBZnRlckNvbnRlbnRJbml0LCBPbkRlc3Ryb3kge1xuICBASW5wdXQoJ2xhenlMb2FkJykgbGF6eUltYWdlOyAvLyBUaGUgaW1hZ2UgdG8gYmUgbGF6eSBsb2FkZWRcbiAgQElucHV0KCkgZGVmYXVsdEltYWdlOiBzdHJpbmc7IC8vIFRoZSBpbWFnZSB0byBiZSBkaXNwbGF5ZWQgYmVmb3JlIGxhenlJbWFnZSBpcyBsb2FkZWRcbiAgQElucHV0KCkgZXJyb3JJbWFnZTogc3RyaW5nOyAvLyBUaGUgaW1hZ2UgdG8gYmUgZGlzcGxheWVkIGlmIGxhenlJbWFnZSBsb2FkIGZhaWxzXG4gIEBJbnB1dCgpIHNjcm9sbFRhcmdldDogYW55OyAvLyBTY3JvbGwgY29udGFpbmVyIHRoYXQgY29udGFpbnMgdGhlIGltYWdlIGFuZCBlbWl0cyBzY29sbCBldmVudHNcbiAgQElucHV0KCkgc2Nyb2xsT2JzZXJ2YWJsZTsgLy8gUGFzcyB5b3VyIG93biBzY3JvbGwgZW1pdHRlclxuICBASW5wdXQoKSBvZmZzZXQ6IG51bWJlcjsgLy8gVGhlIG51bWJlciBvZiBweCBhIGltYWdlIHNob3VsZCBiZSBsb2FkZWQgYmVmb3JlIGl0IGlzIGluIHZpZXcgcG9ydFxuICBASW5wdXQoKSB1c2VTcmNzZXQ6IGJvb2xlYW47IC8vIFdoZXRoZXIgc3Jjc2V0IGF0dHJpYnV0ZSBzaG91bGQgYmUgdXNlZCBpbnN0ZWFkIG9mIHNyY1xuICBAT3V0cHV0KCkgb25Mb2FkOiBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7IC8vIENhbGxiYWNrIHdoZW4gYW4gaW1hZ2UgaXMgbG9hZGVkXG4gIHByaXZhdGUgcHJvcGVydHlDaGFuZ2VzJDogUmVwbGF5U3ViamVjdDxBdHRyaWJ1dGVzPjtcbiAgcHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmO1xuICBwcml2YXRlIG5nWm9uZTogTmdab25lO1xuICBwcml2YXRlIHNjcm9sbFN1YnNjcmlwdGlvbjtcbiAgcHJpdmF0ZSBob29rczogSG9va1NldDxhbnk+O1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIGVsOiBFbGVtZW50UmVmLFxuICAgIG5nWm9uZTogTmdab25lLFxuICAgIEBJbmplY3QoUExBVEZPUk1fSUQpIHByaXZhdGUgcGxhdGZvcm1JZDogT2JqZWN0LFxuICAgIEBPcHRpb25hbCgpIEBJbmplY3QoJ29wdGlvbnMnKSBvcHRpb25zPzogTW9kdWxlT3B0aW9uc1xuICApIHtcbiAgICB0aGlzLmVsZW1lbnRSZWYgPSBlbDtcbiAgICB0aGlzLm5nWm9uZSA9IG5nWm9uZTtcbiAgICB0aGlzLnByb3BlcnR5Q2hhbmdlcyQgPSBuZXcgUmVwbGF5U3ViamVjdCgpO1xuICAgIHRoaXMuaG9va3MgPSBjcmV0YXRlSG9va3Mob3B0aW9ucyk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcygpIHtcbiAgICB0aGlzLnByb3BlcnR5Q2hhbmdlcyQubmV4dCh7XG4gICAgICBlbGVtZW50OiB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCxcbiAgICAgIGltYWdlUGF0aDogdGhpcy5sYXp5SW1hZ2UsXG4gICAgICBkZWZhdWx0SW1hZ2VQYXRoOiB0aGlzLmRlZmF1bHRJbWFnZSxcbiAgICAgIGVycm9ySW1hZ2VQYXRoOiB0aGlzLmVycm9ySW1hZ2UsXG4gICAgICB1c2VTcmNzZXQ6IHRoaXMudXNlU3Jjc2V0LFxuICAgICAgb2Zmc2V0OiB0aGlzLm9mZnNldCB8IDAsXG4gICAgICBzY3JvbGxDb250YWluZXI6IHRoaXMuc2Nyb2xsVGFyZ2V0LFxuICAgICAgc2Nyb2xsT2JzZXJ2YWJsZTogdGhpcy5zY3JvbGxPYnNlcnZhYmxlXG4gICAgfSk7XG4gIH1cblxuICBuZ0FmdGVyQ29udGVudEluaXQoKSB7XG4gICAgLy8gRGlzYWJsZSBsYXp5IGxvYWQgaW1hZ2UgaW4gc2VydmVyIHNpZGVcbiAgICBpZiAoaXNQbGF0Zm9ybVNlcnZlcih0aGlzLnBsYXRmb3JtSWQpKSB7XG4gICAgICB0aGlzLnNjcm9sbFN1YnNjcmlwdGlvbiA9IHRoaXMucHJvcGVydHlDaGFuZ2VzJFxuICAgICAgICAucGlwZShcbiAgICAgICAgICB0YXAoYXR0cmlidXRlcyA9PiB0aGlzLmhvb2tzLnNldHVwKGF0dHJpYnV0ZXMpKSxcbiAgICAgICAgICBmaXJzdCgpXG4gICAgICAgIClcbiAgICAgICAgLnN1YnNjcmliZSgpO1xuICAgICAgcmV0dXJuIG51bGw7XG4gICAgfVxuXG4gICAgdGhpcy5uZ1pvbmUucnVuT3V0c2lkZUFuZ3VsYXIoKCkgPT4ge1xuICAgICAgdGhpcy5zY3JvbGxTdWJzY3JpcHRpb24gPSB0aGlzLnByb3BlcnR5Q2hhbmdlcyRcbiAgICAgICAgLnBpcGUoXG4gICAgICAgICAgdGFwKGF0dHJpYnV0ZXMgPT4gdGhpcy5ob29rcy5zZXR1cChhdHRyaWJ1dGVzKSksXG4gICAgICAgICAgc3dpdGNoTWFwKGF0dHJpYnV0ZXMgPT5cbiAgICAgICAgICAgIHRoaXMuaG9va3NcbiAgICAgICAgICAgICAgLmdldE9ic2VydmFibGUoYXR0cmlidXRlcylcbiAgICAgICAgICAgICAgLnBpcGUobGF6eUxvYWRJbWFnZSh0aGlzLmhvb2tzLCBhdHRyaWJ1dGVzKSlcbiAgICAgICAgICApXG4gICAgICAgIClcbiAgICAgICAgLnN1YnNjcmliZShzdWNjZXNzID0+IHRoaXMub25Mb2FkLmVtaXQoc3VjY2VzcykpO1xuICAgIH0pO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgW3RoaXMuc2Nyb2xsU3Vic2NyaXB0aW9uXVxuICAgICAgLmZpbHRlcihzdWJzY3JpcHRpb24gPT4gc3Vic2NyaXB0aW9uICYmICFzdWJzY3JpcHRpb24uaXNVbnN1YnNjcmliZWQpXG4gICAgICAuZm9yRWFjaChzdWJzY3JpcHRpb24gPT4gc3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCkpO1xuICB9XG59XG4iXX0=