aboutsummaryrefslogtreecommitdiffstats
path: root/src/angular/infinite-scroll/infinite-scroll.directive.ts
diff options
context:
space:
mode:
Diffstat (limited to 'src/angular/infinite-scroll/infinite-scroll.directive.ts')
-rw-r--r--src/angular/infinite-scroll/infinite-scroll.directive.ts35
1 files changed, 35 insertions, 0 deletions
diff --git a/src/angular/infinite-scroll/infinite-scroll.directive.ts b/src/angular/infinite-scroll/infinite-scroll.directive.ts
new file mode 100644
index 0000000..a8ea9f4
--- /dev/null
+++ b/src/angular/infinite-scroll/infinite-scroll.directive.ts
@@ -0,0 +1,35 @@
+import { Directive, ElementRef, Output, EventEmitter, HostListener, Input } from "@angular/core";
+
+@Directive({
+ selector: '[infiniteScroll]'
+})
+export class InfiniteScrollDirective {
+ @Input() public infiniteScrollDistance: number = 0;
+ @Output() public infiniteScroll: EventEmitter<void>;
+
+ private scrollWasHit: boolean = false;
+
+ constructor(private elemRef: ElementRef) {
+ this.infiniteScroll = new EventEmitter<void>();
+ }
+
+ @HostListener('scroll', ['$event'])
+ public onScroll(evt) {
+ const scrollContainerElem: HTMLElement = evt.target;
+ if (scrollContainerElem !== this.elemRef.nativeElement) {
+ return;
+ }
+
+ if (scrollContainerElem.scrollTop + scrollContainerElem.clientHeight + this.infiniteScrollDistance >=
+ scrollContainerElem.scrollHeight) {
+ // hit only once when entering the distance area from bottom
+ // (avoid emitting the handler while scrolling in the bottom area)
+ if (!this.scrollWasHit) {
+ this.infiniteScroll.emit();
+ this.scrollWasHit = true;
+ }
+ } else if (this.scrollWasHit) {
+ this.scrollWasHit = false;
+ }
+ }
+}