ng-lazyload-image-angular-universal
Version:
This is an extension from ng-lazyload-image, made available for Angular Universal.
175 lines • 13.7 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';
var LazyLoadImageDirective = /** @class */ (function () {
function LazyLoadImageDirective(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 {?}
*/
LazyLoadImageDirective.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
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 {?}
*/
LazyLoadImageDirective.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
// Disable lazy load image in server side
if (isPlatformServer(this.platformId)) {
this.scrollSubscription = this.propertyChanges$
.pipe(tap((/**
* @param {?} attributes
* @return {?}
*/
function (attributes) { return _this.hooks.setup(attributes); })), first())
.subscribe();
return null;
}
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
function () {
_this.scrollSubscription = _this.propertyChanges$
.pipe(tap((/**
* @param {?} attributes
* @return {?}
*/
function (attributes) { return _this.hooks.setup(attributes); })), switchMap((/**
* @param {?} attributes
* @return {?}
*/
function (attributes) {
return _this.hooks
.getObservable(attributes)
.pipe(lazyLoadImage(_this.hooks, attributes));
})))
.subscribe((/**
* @param {?} success
* @return {?}
*/
function (success) { return _this.onLoad.emit(success); }));
}));
};
/**
* @return {?}
*/
LazyLoadImageDirective.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
[this.scrollSubscription]
.filter((/**
* @param {?} subscription
* @return {?}
*/
function (subscription) { return subscription && !subscription.isUnsubscribed; }))
.forEach((/**
* @param {?} subscription
* @return {?}
*/
function (subscription) { return subscription.unsubscribe(); }));
};
LazyLoadImageDirective.decorators = [
{ type: Directive, args: [{
selector: '[lazyLoad]'
},] }
];
/** @nocollapse */
LazyLoadImageDirective.ctorParameters = function () { return [
{ 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 }]
};
return LazyLoadImageDirective;
}());
export { LazyLoadImageDirective };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGF6eWxvYWQtaW1hZ2UuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmctbGF6eWxvYWQtaW1hZ2UtYW5ndWxhci11bml2ZXJzYWwvIiwic291cmNlcyI6WyJsaWIvbGF6eWxvYWQtaW1hZ2UuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBRUwsU0FBUyxFQUNULFVBQVUsRUFDVixZQUFZLEVBQ1osTUFBTSxFQUNOLEtBQUssRUFDTCxNQUFNLEVBR04sUUFBUSxFQUNSLE1BQU0sRUFDTixXQUFXLEVBQ1osTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDbkQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUNyQyxPQUFPLEVBQUUsU0FBUyxFQUFFLEdBQUcsRUFBRSxLQUFLLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUN2RCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBR2pEO0lBbUJFLGdDQUNFLEVBQWMsRUFDZCxNQUFjLEVBQ2UsVUFBa0IsRUFDaEIsT0FBdUI7UUFEekIsZUFBVSxHQUFWLFVBQVUsQ0FBUTs7UUFWdkMsV0FBTSxHQUEwQixJQUFJLFlBQVksRUFBRSxDQUFDLENBQUMsbUNBQW1DO1FBYS9GLElBQUksQ0FBQyxVQUFVLEdBQUcsRUFBRSxDQUFDO1FBQ3JCLElBQUksQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDO1FBQ3JCLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxJQUFJLGFBQWEsRUFBRSxDQUFDO1FBQzVDLElBQUksQ0FBQyxLQUFLLEdBQUcsWUFBWSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQ3JDLENBQUM7Ozs7SUFFRCw0Q0FBVzs7O0lBQVg7UUFDRSxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFB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QixvREFBMkI7Ozs7O0lBQzNCLHVDQUE0Qjs7Ozs7SUFLMUIsNENBQStDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQWZ0ZXJDb250ZW50SW5pdCxcbiAgRGlyZWN0aXZlLFxuICBFbGVtZW50UmVmLFxuICBFdmVudEVtaXR0ZXIsXG4gIEluamVjdCxcbiAgSW5wdXQsXG4gIE5nWm9uZSxcbiAgT25DaGFuZ2VzLFxuICBPbkRlc3Ryb3ksXG4gIE9wdGlvbmFsLFxuICBPdXRwdXQsXG4gIFBMQVRGT1JNX0lEXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgaXNQbGF0Zm9ybVNlcnZlciB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBSZXBsYXlTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBzd2l0Y2hNYXAsIHRhcCwgZmlyc3QgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBjcmV0YXRlSG9va3MgfSBmcm9tICcuL2hvb2tzLWZhY3RvcnknO1xuaW1wb3J0IHsgbGF6eUxvYWRJbWFnZSB9IGZyb20gJy4vbGF6eWxvYWQtaW1hZ2UnO1xuaW1wb3J0IHsgQXR0cmlidXRlcywgSG9va1NldCwgTW9kdWxlT3B0aW9ucyB9IGZyb20gJy4vdHlwZXMnO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbbGF6eUxvYWRdJ1xufSlcbmV4cG9ydCBjbGFzcyBMYXp5TG9hZEltYWdlRGlyZWN0aXZlXG4gIGltcGxlbWVudHMgT25DaGFuZ2VzLCBBZnRlckNvbnRlbnRJbml0LCBPbkRlc3Ryb3kge1xuICBASW5wdXQoJ2xhenlMb2FkJykgbGF6eUltYWdlOyAvLyBUaGUgaW1hZ2UgdG8gYmUgbGF6eSBsb2FkZWRcbiAgQElucHV0KCkgZGVmYXVsdEltYWdlOiBzdHJpbmc7IC8vIFRoZSBpbWFnZSB0byBiZSBkaXNwbGF5ZWQgYmVmb3JlIGxhenlJbWFnZSBpcyBsb2FkZWRcbiAgQElucHV0KCkgZXJyb3JJbWFnZTogc3RyaW5nOyAvLyBUaGUgaW1hZ2UgdG8gYmUgZGlzcGxheWVkIGlmIGxhenlJbWFnZSBsb2FkIGZhaWxzXG4gIEBJbnB1dCgpIHNjcm9sbFRhcmdldDogYW55OyAvLyBTY3JvbGwgY29udGFpbmVyIHRoYXQgY29udGFpbnMgdGhlIGltYWdlIGFuZCBlbWl0cyBzY29sbCBldmVudHNcbiAgQElucHV0KCkgc2Nyb2xsT2JzZXJ2YWJsZTsgLy8gUGFzcyB5b3VyIG93biBzY3JvbGwgZW1pdHRlclxuICBASW5wdXQoKSBvZmZzZXQ6IG51bWJlcjsgLy8gVGhlIG51bWJlciBvZiBweCBhIGltYWdlIHNob3VsZCBiZSBsb2FkZWQgYmVmb3JlIGl0IGlzIGluIHZpZXcgcG9ydFxuICBASW5wdXQoKSB1c2VTcmNzZXQ6IGJvb2xlYW47IC8vIFdoZXRoZXIgc3Jjc2V0IGF0dHJpYnV0ZSBzaG91bGQgYmUgdXNlZCBpbnN0ZWFkIG9mIHNyY1xuICBAT3V0cHV0KCkgb25Mb2FkOiBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7IC8vIENhbGxiYWNrIHdoZW4gYW4gaW1hZ2UgaXMgbG9hZGVkXG4gIHByaXZhdGUgcHJvcGVydHlDaGFuZ2VzJDogUmVwbGF5U3ViamVjdDxBdHRyaWJ1dGVzPjtcbiAgcHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmO1xuICBwcml2YXRlIG5nWm9uZTogTmdab25lO1xuICBwcml2YXRlIHNjcm9sbFN1YnNjcmlwdGlvbjtcbiAgcHJpdmF0ZSBob29rczogSG9va1NldDxhbnk+O1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIGVsOiBFbGVtZW50UmVmLFxuICAgIG5nWm9uZTogTmdab25lLFxuICAgIEBJbmplY3QoUExBVEZPUk1fSUQpIHByaXZhdGUgcGxhdGZvcm1JZDogT2JqZWN0LFxuICAgIEBPcHRpb25hbCgpIEBJbmplY3QoJ29wdGlvbnMnKSBvcHRpb25zPzogTW9kdWxlT3B0aW9uc1xuICApIHtcbiAgICB0aGlzLmVsZW1lbnRSZWYgPSBlbDtcbiAgICB0aGlzLm5nWm9uZSA9IG5nWm9uZTtcbiAgICB0aGlzLnByb3BlcnR5Q2hhbmdlcyQgPSBuZXcgUmVwbGF5U3ViamVjdCgpO1xuICAgIHRoaXMuaG9va3MgPSBjcmV0YXRlSG9va3Mob3B0aW9ucyk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcygpIHtcbiAgICB0aGlzLnByb3BlcnR5Q2hhbmdlcyQubmV4dCh7XG4gICAgICBlbGVtZW50OiB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCxcbiAgICAgIGltYWdlUGF0aDogdGhpcy5sYXp5SW1hZ2UsXG4gICAgICBkZWZhdWx0SW1hZ2VQYXRoOiB0aGlzLmRlZmF1bHRJbWFnZSxcbiAgICAgIGVycm9ySW1hZ2VQYXRoOiB0aGlzLmVycm9ySW1hZ2UsXG4gICAgICB1c2VTcmNzZXQ6IHRoaXMudXNlU3Jjc2V0LFxuICAgICAgb2Zmc2V0OiB0aGlzLm9mZnNldCB8IDAsXG4gICAgICBzY3JvbGxDb250YWluZXI6IHRoaXMuc2Nyb2xsVGFyZ2V0LFxuICAgICAgc2Nyb2xsT2JzZXJ2YWJsZTogdGhpcy5zY3JvbGxPYnNlcnZhYmxlXG4gICAgfSk7XG4gIH1cblxuICBuZ0FmdGVyQ29udGVudEluaXQoKSB7XG4gICAgLy8gRGlzYWJsZSBsYXp5IGxvYWQgaW1hZ2UgaW4gc2VydmVyIHNpZGVcbiAgICBpZiAoaXNQbGF0Zm9ybVNlcnZlcih0aGlzLnBsYXRmb3JtSWQpKSB7XG4gICAgICB0aGlzLnNjcm9sbFN1YnNjcmlwdGlvbiA9IHRoaXMucHJvcGVydHlDaGFuZ2VzJFxuICAgICAgICAucGlwZShcbiAgICAgICAgICB0YXAoYXR0cmlidXRlcyA9PiB0aGlzLmhvb2tzLnNldHVwKGF0dHJpYnV0ZXMpKSxcbiAgICAgICAgICBmaXJzdCgpXG4gICAgICAgIClcbiAgICAgICAgLnN1YnNjcmliZSgpO1xuICAgICAgcmV0dXJuIG51bGw7XG4gICAgfVxuXG4gICAgdGhpcy5uZ1pvbmUucnVuT3V0c2lkZUFuZ3VsYXIoKCkgPT4ge1xuICAgICAgdGhpcy5zY3JvbGxTdWJzY3JpcHRpb24gPSB0aGlzLnByb3BlcnR5Q2hhbmdlcyRcbiAgICAgICAgLnBpcGUoXG4gICAgICAgICAgdGFwKGF0dHJpYnV0ZXMgPT4gdGhpcy5ob29rcy5zZXR1cChhdHRyaWJ1dGVzKSksXG4gICAgICAgICAgc3dpdGNoTWFwKGF0dHJpYnV0ZXMgPT5cbiAgICAgICAgICAgIHRoaXMuaG9va3NcbiAgICAgICAgICAgICAgLmdldE9ic2VydmFibGUoYXR0cmlidXRlcylcbiAgICAgICAgICAgICAgLnBpcGUobGF6eUxvYWRJbWFnZSh0aGlzLmhvb2tzLCBhdHRyaWJ1dGVzKSlcbiAgICAgICAgICApXG4gICAgICAgIClcbiAgICAgICAgLnN1YnNjcmliZShzdWNjZXNzID0+IHRoaXMub25Mb2FkLmVtaXQoc3VjY2VzcykpO1xuICAgIH0pO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgW3RoaXMuc2Nyb2xsU3Vic2NyaXB0aW9uXVxuICAgICAgLmZpbHRlcihzdWJzY3JpcHRpb24gPT4gc3Vic2NyaXB0aW9uICYmICFzdWJzY3JpcHRpb24uaXNVbnN1YnNjcmliZWQpXG4gICAgICAuZm9yRWFjaChzdWJzY3JpcHRpb24gPT4gc3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCkpO1xuICB9XG59XG4iXX0=