From 660a212dcbb244301fec6dac13c6b95fdce86eaa Mon Sep 17 00:00:00 2001 From: rimlin Date: Tue, 9 Jan 2018 22:17:53 +0300 Subject: [PATCH 1/4] Removed platformId prop from LazyLoadImageDirective --- src/lazyload-image.directive.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lazyload-image.directive.ts b/src/lazyload-image.directive.ts index a4452a9..5e14fb3 100644 --- a/src/lazyload-image.directive.ts +++ b/src/lazyload-image.directive.ts @@ -45,7 +45,6 @@ export class LazyLoadImageDirective implements OnChanges, AfterContentInit, OnDe private propertyChanges$: ReplaySubject; private elementRef: ElementRef; private ngZone: NgZone; - private platformId: string; private scrollSubscription; constructor(el: ElementRef, ngZone: NgZone) { From 84e4d4390e066cdc39a9e42dad4303887a5998c4 Mon Sep 17 00:00:00 2001 From: rimlin Date: Tue, 9 Jan 2018 22:26:12 +0300 Subject: [PATCH 2/4] Implement isWindowExists function --- src/lazyload-image.directive.ts | 7 +++---- src/scroll-listener.ts | 4 +++- src/utils.ts | 3 +++ 3 files changed, 9 insertions(+), 5 deletions(-) create mode 100644 src/utils.ts diff --git a/src/lazyload-image.directive.ts b/src/lazyload-image.directive.ts index 5e14fb3..4575ffc 100644 --- a/src/lazyload-image.directive.ts +++ b/src/lazyload-image.directive.ts @@ -17,8 +17,9 @@ import { } from '@angular/core'; import { getScrollListener } from './scroll-listener'; import { lazyLoadImage } from './lazyload-image'; +import { isWindowExists } from './utils'; -const windowTarget = typeof window !== 'undefined' ? window : undefined; +const windowTarget = isWindowExists() ? window : undefined; interface LazyLoadImageDirectiveProps { lazyImage: string; @@ -68,10 +69,8 @@ export class LazyLoadImageDirective implements OnChanges, AfterContentInit, OnDe ngAfterContentInit() { /** * Disable lazy load image in server side - * @see https://github.com/tjoskar/ng-lazyload-image/issues/178 - * @see https://github.com/tjoskar/ng-lazyload-image/issues/183 */ - if (typeof window === 'undefined') { + if (isWindowExists() === false) { return null; } diff --git a/src/scroll-listener.ts b/src/scroll-listener.ts index a643ea1..aaa7e0b 100644 --- a/src/scroll-listener.ts +++ b/src/scroll-listener.ts @@ -4,6 +4,8 @@ import 'rxjs/add/operator/share'; import 'rxjs/add/observable/empty'; import { Observable } from 'rxjs/Observable'; +import { isWindowExists } from './utils'; + const scrollListeners = new WeakMap>(); export function sampleObservable(obs: Observable, scheduler?: any) { @@ -17,7 +19,7 @@ export function sampleObservable(obs: Observable, scheduler?: any) { // Typical, there will only be one observable per application export const getScrollListener = (scrollTarget): Observable => { if (!scrollTarget || typeof scrollTarget.addEventListener !== 'function') { - if (typeof window !== 'undefined') { + if (isWindowExists()) { console.warn('`addEventListener` on ' + scrollTarget + ' (scrollTarget) is not a function. Skipping this target'); } return Observable.empty(); diff --git a/src/utils.ts b/src/utils.ts new file mode 100644 index 0000000..0a0f26c --- /dev/null +++ b/src/utils.ts @@ -0,0 +1,3 @@ +export function isWindowExists() { + return typeof window !== 'undefined'; +} From ca0a1c1f5d12f74ab153bb2c35e2596fc6292e3c Mon Sep 17 00:00:00 2001 From: rimlin Date: Tue, 9 Jan 2018 22:34:48 +0300 Subject: [PATCH 3/4] Extract all css class names to object --- src/lazyload-image.ts | 11 ++++++----- src/utils.ts | 6 ++++++ 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/lazyload-image.ts b/src/lazyload-image.ts index ad08180..9581ab2 100644 --- a/src/lazyload-image.ts +++ b/src/lazyload-image.ts @@ -8,6 +8,7 @@ import 'rxjs/add/observable/of'; import { Observable } from 'rxjs/Observable'; import { getScrollListener } from './scroll-listener'; import { Rect } from './rect'; +import { cssClassNames } from './utils'; export function isVisible(element: HTMLElement, threshold = 0, _window: Window, scrollContainer?: HTMLElement) { const elementBounds = Rect.fromElement(element); @@ -110,16 +111,16 @@ function setLoadedStyle(element: HTMLImageElement | HTMLDivElement) { const styles = element.className .split(' ') .filter(s => !!s) - .filter(s => s !== 'ng-lazyloading'); - styles.push('ng-lazyloaded'); + .filter(s => s !== cssClassNames.loading); + styles.push(cssClassNames.loaded); element.className = styles.join(' '); return element; } export function lazyLoadImage(element: HTMLImageElement | HTMLDivElement, imagePath: string, defaultImagePath: string, errorImgPath: string, offset: number, useSrcset: boolean = false, scrollContainer?: HTMLElement) { setImageAndSourcesToDefault(element, defaultImagePath, useSrcset); - if (element.className && element.className.includes('ng-lazyloaded')) { - element.className = element.className.replace('ng-lazyloaded', ''); + if (element.className && element.className.includes(cssClassNames.loaded)) { + element.className = element.className.replace(cssClassNames.loaded, ''); } return (scrollObservable: Observable) => { @@ -131,7 +132,7 @@ export function lazyLoadImage(element: HTMLImageElement | HTMLDivElement, imageP .map(() => true) .catch(() => { setImageAndSourcesToError(element, errorImgPath, useSrcset); - element.className += ' ng-failed-lazyloaded'; + element.className += ' ' + cssClassNames.failed; return Observable.of(false); }) .do(() => setLoadedStyle(element)); diff --git a/src/utils.ts b/src/utils.ts index 0a0f26c..1892772 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,3 +1,9 @@ export function isWindowExists() { return typeof window !== 'undefined'; } + +export const cssClassNames = { + loaded: 'ng-lazyloaded', + loading: 'ng-lazyloading', + failed: 'ng-failed-lazyloaded', +} From c544b3abbebb1dba3c3958616b7fb08c7d9bc08c Mon Sep 17 00:00:00 2001 From: rimlin Date: Wed, 10 Jan 2018 00:03:50 +0300 Subject: [PATCH 4/4] Fixed code style --- src/constants.ts | 5 +++++ src/lazyload-image.directive.ts | 7 +++---- src/lazyload-image.ts | 2 +- src/scroll-listener.ts | 5 ++--- src/utils.ts | 8 +------- 5 files changed, 12 insertions(+), 15 deletions(-) create mode 100644 src/constants.ts diff --git a/src/constants.ts b/src/constants.ts new file mode 100644 index 0000000..a9ddbd8 --- /dev/null +++ b/src/constants.ts @@ -0,0 +1,5 @@ +export const cssClassNames = { + loaded: 'ng-lazyloaded', + loading: 'ng-lazyloading', + failed: 'ng-failed-lazyloaded', +} diff --git a/src/lazyload-image.directive.ts b/src/lazyload-image.directive.ts index 4575ffc..e25cd56 100644 --- a/src/lazyload-image.directive.ts +++ b/src/lazyload-image.directive.ts @@ -17,9 +17,7 @@ import { } from '@angular/core'; import { getScrollListener } from './scroll-listener'; import { lazyLoadImage } from './lazyload-image'; -import { isWindowExists } from './utils'; - -const windowTarget = isWindowExists() ? window : undefined; +import { isWindowDefined } from './utils'; interface LazyLoadImageDirectiveProps { lazyImage: string; @@ -70,7 +68,7 @@ export class LazyLoadImageDirective implements OnChanges, AfterContentInit, OnDe /** * Disable lazy load image in server side */ - if (isWindowExists() === false) { + if (!isWindowDefined()) { return null; } @@ -79,6 +77,7 @@ export class LazyLoadImageDirective implements OnChanges, AfterContentInit, OnDe if (this.scrollObservable) { scrollObservable = this.scrollObservable.startWith(''); } else { + const windowTarget = isWindowDefined() ? window : undefined; scrollObservable = getScrollListener(this.scrollTarget || windowTarget); } this.scrollSubscription = this.propertyChanges$ diff --git a/src/lazyload-image.ts b/src/lazyload-image.ts index 9581ab2..957bd87 100644 --- a/src/lazyload-image.ts +++ b/src/lazyload-image.ts @@ -8,7 +8,7 @@ import 'rxjs/add/observable/of'; import { Observable } from 'rxjs/Observable'; import { getScrollListener } from './scroll-listener'; import { Rect } from './rect'; -import { cssClassNames } from './utils'; +import { cssClassNames } from './constants'; export function isVisible(element: HTMLElement, threshold = 0, _window: Window, scrollContainer?: HTMLElement) { const elementBounds = Rect.fromElement(element); diff --git a/src/scroll-listener.ts b/src/scroll-listener.ts index aaa7e0b..b7a2c12 100644 --- a/src/scroll-listener.ts +++ b/src/scroll-listener.ts @@ -3,8 +3,7 @@ import 'rxjs/add/operator/sampleTime'; import 'rxjs/add/operator/share'; import 'rxjs/add/observable/empty'; import { Observable } from 'rxjs/Observable'; - -import { isWindowExists } from './utils'; +import { isWindowDefined } from './utils'; const scrollListeners = new WeakMap>(); @@ -19,7 +18,7 @@ export function sampleObservable(obs: Observable, scheduler?: any) { // Typical, there will only be one observable per application export const getScrollListener = (scrollTarget): Observable => { if (!scrollTarget || typeof scrollTarget.addEventListener !== 'function') { - if (isWindowExists()) { + if (isWindowDefined()) { console.warn('`addEventListener` on ' + scrollTarget + ' (scrollTarget) is not a function. Skipping this target'); } return Observable.empty(); diff --git a/src/utils.ts b/src/utils.ts index 1892772..4c51a90 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,9 +1,3 @@ -export function isWindowExists() { +export function isWindowDefined() { return typeof window !== 'undefined'; } - -export const cssClassNames = { - loaded: 'ng-lazyloaded', - loading: 'ng-lazyloading', - failed: 'ng-failed-lazyloaded', -}