diff options
Diffstat (limited to 'client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts')
-rw-r--r-- | client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts | 96 |
1 files changed, 96 insertions, 0 deletions
diff --git a/client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts b/client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts new file mode 100644 index 000000000..f09c3d1fc --- /dev/null +++ b/client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts | |||
@@ -0,0 +1,96 @@ | |||
1 | import { distinctUntilChanged, filter, map, share, startWith, throttleTime } from 'rxjs/operators' | ||
2 | import { AfterContentChecked, Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core' | ||
3 | import { fromEvent, Observable, Subscription } from 'rxjs' | ||
4 | |||
5 | @Directive({ | ||
6 | selector: '[myInfiniteScroller]' | ||
7 | }) | ||
8 | export class InfiniteScrollerDirective implements OnInit, OnDestroy, AfterContentChecked { | ||
9 | @Input() percentLimit = 70 | ||
10 | @Input() autoInit = false | ||
11 | @Input() onItself = false | ||
12 | @Input() dataObservable: Observable<any[]> | ||
13 | |||
14 | @Output() nearOfBottom = new EventEmitter<void>() | ||
15 | |||
16 | private decimalLimit = 0 | ||
17 | private lastCurrentBottom = -1 | ||
18 | private scrollDownSub: Subscription | ||
19 | private container: HTMLElement | ||
20 | |||
21 | private checkScroll = false | ||
22 | |||
23 | constructor (private el: ElementRef) { | ||
24 | this.decimalLimit = this.percentLimit / 100 | ||
25 | } | ||
26 | |||
27 | ngAfterContentChecked () { | ||
28 | if (this.checkScroll) { | ||
29 | this.checkScroll = false | ||
30 | |||
31 | console.log('Checking if the initial state has a scroll.') | ||
32 | |||
33 | if (this.hasScroll() === false) this.nearOfBottom.emit() | ||
34 | } | ||
35 | } | ||
36 | |||
37 | ngOnInit () { | ||
38 | if (this.autoInit === true) return this.initialize() | ||
39 | } | ||
40 | |||
41 | ngOnDestroy () { | ||
42 | if (this.scrollDownSub) this.scrollDownSub.unsubscribe() | ||
43 | } | ||
44 | |||
45 | initialize () { | ||
46 | this.container = this.onItself | ||
47 | ? this.el.nativeElement | ||
48 | : document.documentElement | ||
49 | |||
50 | // Emit the last value | ||
51 | const throttleOptions = { leading: true, trailing: true } | ||
52 | |||
53 | const scrollableElement = this.onItself ? this.container : window | ||
54 | const scrollObservable = fromEvent(scrollableElement, 'scroll') | ||
55 | .pipe( | ||
56 | startWith(true), | ||
57 | throttleTime(200, undefined, throttleOptions), | ||
58 | map(() => this.getScrollInfo()), | ||
59 | distinctUntilChanged((o1, o2) => o1.current === o2.current), | ||
60 | share() | ||
61 | ) | ||
62 | |||
63 | // Scroll Down | ||
64 | this.scrollDownSub = scrollObservable | ||
65 | .pipe( | ||
66 | filter(({ current }) => this.isScrollingDown(current)), | ||
67 | filter(({ current, maximumScroll }) => (current / maximumScroll) > this.decimalLimit) | ||
68 | ) | ||
69 | .subscribe(() => this.nearOfBottom.emit()) | ||
70 | |||
71 | if (this.dataObservable) { | ||
72 | this.dataObservable | ||
73 | .pipe(filter(d => d.length !== 0)) | ||
74 | .subscribe(() => this.checkScroll = true) | ||
75 | } | ||
76 | } | ||
77 | |||
78 | private getScrollInfo () { | ||
79 | return { current: this.container.scrollTop, maximumScroll: this.getMaximumScroll() } | ||
80 | } | ||
81 | |||
82 | private getMaximumScroll () { | ||
83 | return this.container.scrollHeight - window.innerHeight | ||
84 | } | ||
85 | |||
86 | private hasScroll () { | ||
87 | return this.getMaximumScroll() > 0 | ||
88 | } | ||
89 | |||
90 | private isScrollingDown (current: number) { | ||
91 | const result = this.lastCurrentBottom < current | ||
92 | |||
93 | this.lastCurrentBottom = current | ||
94 | return result | ||
95 | } | ||
96 | } | ||