ngx-intersection-observer
Version:
Intersection observer for Angular
82 lines • 11.7 kB
JavaScript
import { Injectable, Optional } from '@angular/core';
import { debounceTime, distinctUntilChanged, EMPTY, fromEvent, merge, ReplaySubject } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "./intersection-observer-config.model";
export class IntersectionObserverService {
constructor(intersectionObserverConfig) {
this.intersectionObserverConfig = intersectionObserverConfig;
this._windowScrollY$ = new ReplaySubject();
this._windowResize$ = new ReplaySubject();
this._windowViewportChange$ = new ReplaySubject();
this._pageYOffset = 0;
// Get the config or default
this._config = intersectionObserverConfig ? intersectionObserverConfig : {
debounce: 10,
threshold: 20
};
// Manage scroll position initially
this.manageScrollPos();
// Subscribe to window scroll event and debounce it
this.onScroll$ =
typeof window !== "undefined" ? fromEvent(window, "scroll") : EMPTY;
this.scrollSub = this.onScroll$
.pipe(debounceTime(this._config.debounce), distinctUntilChanged())
.subscribe(t => {
this.manageScrollPos();
this._windowScrollY$.next(this._pageYOffset);
});
// Subscribe to window resize event and debounce it
this.onResize$ =
typeof window !== "undefined" ? fromEvent(window, "resize") : EMPTY;
this.resizeSub = this.onResize$
.pipe(debounceTime(this._config.debounce), distinctUntilChanged())
.subscribe(t => {
this.manageScrollPos();
this._windowResize$.next(this._pageYOffset);
});
// Observable that fires on scroll or resize
this.viewportChangeSub = merge(this._windowScrollY$, this._windowResize$)
.subscribe(t => {
this._windowViewportChange$.next(this._pageYOffset);
});
}
/** Gets the page offset Y axis */
get pageYOffset() {
return this._pageYOffset;
}
/** Gets the intersection observer config */
get config() {
return this._config;
}
/** Gets an observable to the window scroll event */
get windowScrollY$() {
return this._windowScrollY$;
}
/** Gets an observable to the window resize event */
get windowResize$() {
return this._windowResize$;
}
/** Gets an observable to the window viewport event (combination of resize and scroll) */
get windowViewportChange$() {
return this._windowViewportChange$;
}
manageScrollPos() {
this._pageYOffset = typeof window !== "undefined" ? window.pageYOffset : 0;
}
ngOnDestroy() {
this.scrollSub.unsubscribe();
this.resizeSub.unsubscribe();
this.viewportChangeSub.unsubscribe();
}
}
IntersectionObserverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: IntersectionObserverService, deps: [{ token: i1.IntersectionObserverConfig, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
IntersectionObserverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: IntersectionObserverService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: IntersectionObserverService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return [{ type: i1.IntersectionObserverConfig, decorators: [{
type: Optional
}] }]; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW50ZXJzZWN0aW9uLW9ic2VydmVyLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9pbnRlcnNlY3Rpb24tb2JzZXJ2ZXIvc3JjL2xpYi9pbnRlcnNlY3Rpb24tb2JzZXJ2ZXIuc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFhLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNoRSxPQUFPLEVBQUUsWUFBWSxFQUFFLG9CQUFvQixFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFjLGFBQWEsRUFBZ0IsTUFBTSxNQUFNLENBQUM7OztBQU01SCxNQUFNLE9BQU8sMkJBQTJCO0lBY3RDLFlBQWdDLDBCQUF1RDtRQUF2RCwrQkFBMEIsR0FBMUIsMEJBQTBCLENBQTZCO1FBYi9FLG9CQUFlLEdBQTBCLElBQUksYUFBYSxFQUFVLENBQUM7UUFDckUsbUJBQWMsR0FBMEIsSUFBSSxhQUFhLEVBQVUsQ0FBQztRQUNwRSwyQkFBc0IsR0FBMEIsSUFBSSxhQUFhLEVBQVUsQ0FBQztRQUM1RSxpQkFBWSxHQUFXLENBQUMsQ0FBQztRQVkvQiw0QkFBNEI7UUFDNUIsSUFBSSxDQUFDLE9BQU8sR0FBRywwQkFBMEIsQ0FBQyxDQUFDLENBQUMsMEJBQTBCLENBQUMsQ0FBQyxDQUFDO1lBQ3ZFLFFBQVEsRUFBRSxFQUFFO1lBQ1osU0FBUyxFQUFFLEVBQUU7U0FDZ0IsQ0FBQztRQUVoQyxtQ0FBbUM7UUFDbkMsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBRXZCLG1EQUFtRDtRQUNuRCxJQUFJLENBQUMsU0FBUztZQUNaLE9BQU8sTUFBTSxLQUFLLFdBQVcsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLE1BQU0sRUFBRSxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDO1FBQ3RFLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLFNBQVM7YUFDNUIsSUFBSSxDQUNILFlBQVksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxFQUNuQyxvQkFBb0IsRUFBRSxDQUFDO2FBQ3hCLFNBQVMsQ0FBQyxDQUFDLENBQUMsRUFBRTtZQUNiLElBQUksQ0FBQyxlQUFlLEVBQUUsQ0FBQztZQUN2QixJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUM7UUFDL0MsQ0FBQyxDQUFDLENBQUM7UUFFTCxtREFBbUQ7UUFDbkQsSUFBSSxDQUFDLFNBQVM7WUFDWixPQUFPLE1BQU0sS0FBSyxXQUFXLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxNQUFNLEVBQUUsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQztRQUN0RSxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxTQUFTO2FBQzVCLElBQUksQ0FDSCxZQUFZLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsRUFDbkMsb0JBQW9CLEVBQUUsQ0FBQzthQUN4QixTQUFTLENBQUMsQ0FBQyxDQUFDLEVBQUU7WUFDYixJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7WUFDdkIsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO1FBQzlDLENBQUMsQ0FBQyxDQUFDO1FBRUwsNENBQTRDO1FBQzVDLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFDLGVBQWUsRUFBRSxJQUFJLENBQUMsY0FBYyxDQUFDO2FBQ3RFLFNBQVMsQ0FBQyxDQUFDLENBQUMsRUFBRTtZQUNiLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO1FBQ3RELENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVELGtDQUFrQztJQUNsQyxJQUFJLFdBQVc7UUFDYixPQUFPLElBQUksQ0FBQyxZQUFZLENBQUM7SUFDM0IsQ0FBQztJQUVELDRDQUE0QztJQUM1QyxJQUFJLE1BQU07UUFDUixPQUFPLElBQUksQ0FBQyxPQUFPLENBQUM7SUFDdEIsQ0FBQztJQUVELG9EQUFvRDtJQUNwRCxJQUFJLGNBQWM7UUFDaEIsT0FBTyxJQUFJLENBQUMsZUFBZSxDQUFDO0lBQzlCLENBQUM7SUFFRCxvREFBb0Q7SUFDcEQsSUFBSSxhQUFhO1FBQ2YsT0FBTyxJQUFJLENBQUMsY0FBYyxDQUFDO0lBQzdCLENBQUM7SUFFRCx5RkFBeUY7SUFDekYsSUFBSSxxQkFBcUI7UUFDdkIsT0FBTyxJQUFJLENBQUMsc0JBQXNCLENBQUM7SUFDckMsQ0FBQztJQUVPLGVBQWU7UUFDckIsSUFBSSxDQUFDLFlBQVksR0FBRyxPQUFPLE1BQU0sS0FBSyxXQUFXLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUM3RSxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxTQUFTLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDN0IsSUFBSSxDQUFDLFNBQVMsQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUM3QixJQUFJLENBQUMsaUJBQWlCLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDdkMsQ0FBQzs7d0hBekZVLDJCQUEyQjs0SEFBM0IsMkJBQTJCLGNBRjFCLE1BQU07MkZBRVAsMkJBQTJCO2tCQUh2QyxVQUFVO21CQUFDO29CQUNWLFVBQVUsRUFBRSxNQUFNO2lCQUNuQjs7MEJBZWMsUUFBUSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEluamVjdGFibGUsIE9uRGVzdHJveSwgT3B0aW9uYWwgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgZGVib3VuY2VUaW1lLCBkaXN0aW5jdFVudGlsQ2hhbmdlZCwgRU1QVFksIGZyb21FdmVudCwgbWVyZ2UsIE9ic2VydmFibGUsIFJlcGxheVN1YmplY3QsIFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xyXG5pbXBvcnQgeyBJbnRlcnNlY3Rpb25PYnNlcnZlckNvbmZpZyB9IGZyb20gJy4vaW50ZXJzZWN0aW9uLW9ic2VydmVyLWNvbmZpZy5tb2RlbCc7XHJcblxyXG5ASW5qZWN0YWJsZSh7XHJcbiAgcHJvdmlkZWRJbjogJ3Jvb3QnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBJbnRlcnNlY3Rpb25PYnNlcnZlclNlcnZpY2UgaW1wbGVtZW50cyBPbkRlc3Ryb3kge1xyXG4gIHByaXZhdGUgX3dpbmRvd1Njcm9sbFkkOiBSZXBsYXlTdWJqZWN0PG51bWJlcj4gPSBuZXcgUmVwbGF5U3ViamVjdDxudW1iZXI+KCk7XHJcbiAgcHJpdmF0ZSBfd2luZG93UmVzaXplJDogUmVwbGF5U3ViamVjdDxudW1iZXI+ID0gbmV3IFJlcGxheVN1YmplY3Q8bnVtYmVyPigpO1xyXG4gIHByaXZhdGUgX3dpbmRvd1ZpZXdwb3J0Q2hhbmdlJDogUmVwbGF5U3ViamVjdDxudW1iZXI+ID0gbmV3IFJlcGxheVN1YmplY3Q8bnVtYmVyPigpO1xyXG4gIHByaXZhdGUgX3BhZ2VZT2Zmc2V0OiBudW1iZXIgPSAwO1xyXG4gIHByaXZhdGUgX2NvbmZpZzogSW50ZXJzZWN0aW9uT2JzZXJ2ZXJDb25maWc7XHJcblxyXG4gIHByaXZhdGUgb25TY3JvbGwkOiBPYnNlcnZhYmxlPGFueT47XHJcbiAgcHJpdmF0ZSBvblJlc2l6ZSQ6IE9ic2VydmFibGU8YW55PjtcclxuXHJcbiAgcHJpdmF0ZSBzY3JvbGxTdWI6IFN1YnNjcmlwdGlvbjtcclxuICBwcml2YXRlIHJlc2l6ZVN1YjogU3Vic2NyaXB0aW9uO1xyXG4gIHByaXZhdGUgdmlld3BvcnRDaGFuZ2VTdWI6IFN1YnNjcmlwdGlvbjtcclxuXHJcbiAgY29uc3RydWN0b3IoQE9wdGlvbmFsKCkgcHJpdmF0ZSBpbnRlcnNlY3Rpb25PYnNlcnZlckNvbmZpZz86IEludGVyc2VjdGlvbk9ic2VydmVyQ29uZmlnKSB7XHJcblxyXG4gICAgLy8gR2V0IHRoZSBjb25maWcgb3IgZGVmYXVsdFxyXG4gICAgdGhpcy5fY29uZmlnID0gaW50ZXJzZWN0aW9uT2JzZXJ2ZXJDb25maWcgPyBpbnRlcnNlY3Rpb25PYnNlcnZlckNvbmZpZyA6IHtcclxuICAgICAgZGVib3VuY2U6IDEwLFxyXG4gICAgICB0aHJlc2hvbGQ6IDIwXHJcbiAgICB9IGFzIEludGVyc2VjdGlvbk9ic2VydmVyQ29uZmlnO1xyXG5cclxuICAgIC8vIE1hbmFnZSBzY3JvbGwgcG9zaXRpb24gaW5pdGlhbGx5XHJcbiAgICB0aGlzLm1hbmFnZVNjcm9sbFBvcygpO1xyXG5cclxuICAgIC8vIFN1YnNjcmliZSB0byB3aW5kb3cgc2Nyb2xsIGV2ZW50IGFuZCBkZWJvdW5jZSBpdFxyXG4gICAgdGhpcy5vblNjcm9sbCQgPVxyXG4gICAgICB0eXBlb2Ygd2luZG93ICE9PSBcInVuZGVmaW5lZFwiID8gZnJvbUV2ZW50KHdpbmRvdywgXCJzY3JvbGxcIikgOiBFTVBUWTtcclxuICAgIHRoaXMuc2Nyb2xsU3ViID0gdGhpcy5vblNjcm9sbCRcclxuICAgICAgLnBpcGUoXHJcbiAgICAgICAgZGVib3VuY2VUaW1lKHRoaXMuX2NvbmZpZy5kZWJvdW5jZSksXHJcbiAgICAgICAgZGlzdGluY3RVbnRpbENoYW5nZWQoKSlcclxuICAgICAgLnN1YnNjcmliZSh0ID0+IHtcclxuICAgICAgICB0aGlzLm1hbmFnZVNjcm9sbFBvcygpO1xyXG4gICAgICAgIHRoaXMuX3dpbmRvd1Njcm9sbFkkLm5leHQodGhpcy5fcGFnZVlPZmZzZXQpO1xyXG4gICAgICB9KTtcclxuXHJcbiAgICAvLyBTdWJzY3JpYmUgdG8gd2luZG93IHJlc2l6ZSBldmVudCBhbmQgZGVib3VuY2UgaXRcclxuICAgIHRoaXMub25SZXNpemUkID1cclxuICAgICAgdHlwZW9mIHdpbmRvdyAhPT0gXCJ1bmRlZmluZWRcIiA/IGZyb21FdmVudCh3aW5kb3csIFwicmVzaXplXCIpIDogRU1QVFk7XHJcbiAgICB0aGlzLnJlc2l6ZVN1YiA9IHRoaXMub25SZXNpemUkXHJcbiAgICAgIC5waXBlKFxyXG4gICAgICAgIGRlYm91bmNlVGltZSh0aGlzLl9jb25maWcuZGVib3VuY2UpLFxyXG4gICAgICAgIGRpc3RpbmN0VW50aWxDaGFuZ2VkKCkpXHJcbiAgICAgIC5zdWJzY3JpYmUodCA9PiB7XHJcbiAgICAgICAgdGhpcy5tYW5hZ2VTY3JvbGxQb3MoKTtcclxuICAgICAgICB0aGlzLl93aW5kb3dSZXNpemUkLm5leHQodGhpcy5fcGFnZVlPZmZzZXQpO1xyXG4gICAgICB9KTtcclxuXHJcbiAgICAvLyBPYnNlcnZhYmxlIHRoYXQgZmlyZXMgb24gc2Nyb2xsIG9yIHJlc2l6ZVxyXG4gICAgdGhpcy52aWV3cG9ydENoYW5nZVN1YiA9IG1lcmdlKHRoaXMuX3dpbmRvd1Njcm9sbFkkLCB0aGlzLl93aW5kb3dSZXNpemUkKVxyXG4gICAgICAuc3Vic2NyaWJlKHQgPT4ge1xyXG4gICAgICAgIHRoaXMuX3dpbmRvd1ZpZXdwb3J0Q2hhbmdlJC5uZXh0KHRoaXMuX3BhZ2VZT2Zmc2V0KTtcclxuICAgICAgfSk7XHJcbiAgfVxyXG5cclxuICAvKiogR2V0cyB0aGUgcGFnZSBvZmZzZXQgWSBheGlzICovXHJcbiAgZ2V0IHBhZ2VZT2Zmc2V0KCkge1xyXG4gICAgcmV0dXJuIHRoaXMuX3BhZ2VZT2Zmc2V0O1xyXG4gIH1cclxuXHJcbiAgLyoqIEdldHMgdGhlIGludGVyc2VjdGlvbiBvYnNlcnZlciBjb25maWcgKi9cclxuICBnZXQgY29uZmlnKCkge1xyXG4gICAgcmV0dXJuIHRoaXMuX2NvbmZpZztcclxuICB9XHJcblxyXG4gIC8qKiBHZXRzIGFuIG9ic2VydmFibGUgdG8gdGhlIHdpbmRvdyBzY3JvbGwgZXZlbnQgKi9cclxuICBnZXQgd2luZG93U2Nyb2xsWSQoKSB7XHJcbiAgICByZXR1cm4gdGhpcy5fd2luZG93U2Nyb2xsWSQ7XHJcbiAgfVxyXG5cclxuICAvKiogR2V0cyBhbiBvYnNlcnZhYmxlIHRvIHRoZSB3aW5kb3cgcmVzaXplIGV2ZW50ICovXHJcbiAgZ2V0IHdpbmRvd1Jlc2l6ZSQoKSB7XHJcbiAgICByZXR1cm4gdGhpcy5fd2luZG93UmVzaXplJDtcclxuICB9XHJcblxyXG4gIC8qKiBHZXRzIGFuIG9ic2VydmFibGUgdG8gdGhlIHdpbmRvdyB2aWV3cG9ydCBldmVudCAoY29tYmluYXRpb24gb2YgcmVzaXplIGFuZCBzY3JvbGwpICovXHJcbiAgZ2V0IHdpbmRvd1ZpZXdwb3J0Q2hhbmdlJCgpIHtcclxuICAgIHJldHVybiB0aGlzLl93aW5kb3dWaWV3cG9ydENoYW5nZSQ7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIG1hbmFnZVNjcm9sbFBvcygpOiB2b2lkIHtcclxuICAgIHRoaXMuX3BhZ2VZT2Zmc2V0ID0gdHlwZW9mIHdpbmRvdyAhPT0gXCJ1bmRlZmluZWRcIiA/IHdpbmRvdy5wYWdlWU9mZnNldCA6IDA7XHJcbiAgfVxyXG5cclxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcclxuICAgIHRoaXMuc2Nyb2xsU3ViLnVuc3Vic2NyaWJlKCk7XHJcbiAgICB0aGlzLnJlc2l6ZVN1Yi51bnN1YnNjcmliZSgpO1xyXG4gICAgdGhpcy52aWV3cG9ydENoYW5nZVN1Yi51bnN1YnNjcmliZSgpO1xyXG4gIH1cclxufVxyXG4iXX0=