From ab30bb1a0663276858948b37502c83c120ff22e5 Mon Sep 17 00:00:00 2001 From: Nicolas Constant Date: Fri, 22 May 2020 02:31:14 -0400 Subject: [PATCH] refactoring onScroll --- src/app/components/common/timeline-base.ts | 39 ++++++++++-- .../bookmarks/bookmarks.component.ts | 41 +++++++------ .../stream-statuses.component.ts | 59 +++++++++++-------- 3 files changed, 88 insertions(+), 51 deletions(-) diff --git a/src/app/components/common/timeline-base.ts b/src/app/components/common/timeline-base.ts index 6443b3b4..c2e9af49 100644 --- a/src/app/components/common/timeline-base.ts +++ b/src/app/components/common/timeline-base.ts @@ -1,4 +1,4 @@ -import { OnInit, Input, OnDestroy, Output, EventEmitter } from '@angular/core'; +import { OnInit, Input, OnDestroy, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core'; import { HttpErrorResponse } from '@angular/common/http'; import { Store } from '@ngxs/store'; import { Observable } from 'rxjs'; @@ -44,6 +44,8 @@ export abstract class TimelineBase implements OnInit, OnDestroy { @Input() userLocked = true; + @ViewChild('statusstream') public statustream: ElementRef; + constructor( // protected readonly store: Store, protected readonly toolsService: ToolsService, @@ -56,8 +58,24 @@ export abstract class TimelineBase implements OnInit, OnDestroy { abstract ngOnInit(); abstract ngOnDestroy(); + protected abstract scrolledToTop(); + protected abstract statusProcessOnGoToTop(); + protected abstract getNextStatuses(): Promise; // protected abstract load(streamElement: StreamElement); + onScroll() { + var element = this.statustream.nativeElement as HTMLElement; + const atBottom = element.scrollHeight <= element.clientHeight + element.scrollTop + 1000; + const atTop = element.scrollTop === 0; + + this.streamPositionnedAtTop = false; + if (atBottom && !this.isProcessingInfiniteScroll) { + this.scrolledToBottom(); + } else if (atTop) { + this.scrolledToTop(); + } + } + protected scrolledToBottom() { if (this.isLoading || this.maxReached) return; @@ -85,11 +103,7 @@ export abstract class TimelineBase implements OnInit, OnDestroy { this.isProcessingInfiniteScroll = false; }); } - - protected abstract getNextStatuses(): Promise; - - - + browseAccount(accountName: string): void { this.browseAccountEvent.next(accountName); } @@ -101,4 +115,17 @@ export abstract class TimelineBase implements OnInit, OnDestroy { browseThread(openThreadEvent: OpenThreadEvent): void { this.browseThreadEvent.next(openThreadEvent); } + + applyGoToTop(): boolean { + this.statusProcessOnGoToTop(); + + const stream = this.statustream.nativeElement as HTMLElement; + setTimeout(() => { + stream.scrollTo({ + top: 0, + behavior: 'smooth' + }); + }, 0); + return false; + } } \ No newline at end of file diff --git a/src/app/components/floating-column/manage-account/bookmarks/bookmarks.component.ts b/src/app/components/floating-column/manage-account/bookmarks/bookmarks.component.ts index 7540151e..478c62b1 100644 --- a/src/app/components/floating-column/manage-account/bookmarks/bookmarks.component.ts +++ b/src/app/components/floating-column/manage-account/bookmarks/bookmarks.component.ts @@ -87,15 +87,14 @@ export class BookmarksComponent extends TimelineBase { }); } - onScroll() { - var element = this.statustream.nativeElement as HTMLElement; - const atBottom = element.scrollHeight <= element.clientHeight + element.scrollTop + 1000; - - if (atBottom) { - this.scrolledToBottom(); - } - } + // onScroll() { + // var element = this.statustream.nativeElement as HTMLElement; + // const atBottom = element.scrollHeight <= element.clientHeight + element.scrollTop + 1000; + // if (atBottom) { + // this.scrolledToBottom(); + // } + // } // private scrolledToBottom() { // if (this.isLoading || this.maxReached) return; @@ -138,6 +137,10 @@ export class BookmarksComponent extends TimelineBase { }); } + protected scrolledToTop() {} + + protected statusProcessOnGoToTop(){} + // browseAccount(accountName: string): void { // this.browseAccountEvent.next(accountName); // } @@ -148,16 +151,16 @@ export class BookmarksComponent extends TimelineBase { // browseThread(openThreadEvent: OpenThreadEvent): void { // this.browseThreadEvent.next(openThreadEvent); - // } + // } - applyGoToTop(): boolean { - const stream = this.statustream.nativeElement as HTMLElement; - setTimeout(() => { - stream.scrollTo({ - top: 0, - behavior: 'smooth' - }); - }, 0); - return false; - } + // applyGoToTop(): boolean { + // const stream = this.statustream.nativeElement as HTMLElement; + // setTimeout(() => { + // stream.scrollTo({ + // top: 0, + // behavior: 'smooth' + // }); + // }, 0); + // return false; + // } } diff --git a/src/app/components/stream/stream-statuses/stream-statuses.component.ts b/src/app/components/stream/stream-statuses/stream-statuses.component.ts index 89eedd3a..9629ae1b 100644 --- a/src/app/components/stream/stream-statuses/stream-statuses.component.ts +++ b/src/app/components/stream/stream-statuses/stream-statuses.component.ts @@ -209,36 +209,43 @@ export class StreamStatusesComponent extends TimelineBase { }); } - @ViewChild('statusstream') public statustream: ElementRef; - private applyGoToTop(): boolean { - // this.loadBuffer(); + protected statusProcessOnGoToTop(){ if (this.statuses.length > 2 * this.streamingService.nbStatusPerIteration) { this.statuses.length = 2 * this.streamingService.nbStatusPerIteration; } - - const stream = this.statustream.nativeElement as HTMLElement; - setTimeout(() => { - stream.scrollTo({ - top: 0, - behavior: 'smooth' - }); - }, 0); - - return false; } - onScroll() { - var element = this.statustream.nativeElement as HTMLElement; - const atBottom = element.scrollHeight <= element.clientHeight + element.scrollTop + 1000; - const atTop = element.scrollTop === 0; + // @ViewChild('statusstream') public statustream: ElementRef; - this.streamPositionnedAtTop = false; - if (atBottom && !this.isProcessingInfiniteScroll) { - this.scrolledToBottom(); - } else if (atTop) { - this.scrolledToTop(); - } - } + // private applyGoToTop(): boolean { + // // this.loadBuffer(); + // if (this.statuses.length > 2 * this.streamingService.nbStatusPerIteration) { + // this.statuses.length = 2 * this.streamingService.nbStatusPerIteration; + // } + + // const stream = this.statustream.nativeElement as HTMLElement; + // setTimeout(() => { + // stream.scrollTo({ + // top: 0, + // behavior: 'smooth' + // }); + // }, 0); + + // return false; + // } + + // onScroll() { + // var element = this.statustream.nativeElement as HTMLElement; + // const atBottom = element.scrollHeight <= element.clientHeight + element.scrollTop + 1000; + // const atTop = element.scrollTop === 0; + + // this.streamPositionnedAtTop = false; + // if (atBottom && !this.isProcessingInfiniteScroll) { + // this.scrolledToBottom(); + // } else if (atTop) { + // this.scrolledToTop(); + // } + // } // browseAccount(accountName: string): void { // this.browseAccountEvent.next(accountName); @@ -256,7 +263,7 @@ export class StreamStatusesComponent extends TimelineBase { console.warn(`status comp: textSelected`); //TODO } - private scrolledToTop() { + protected scrolledToTop() { this.streamPositionnedAtTop = true; if (this.timelineLoadingMode !== TimeLineModeEnum.SlowMode) { @@ -321,7 +328,7 @@ export class StreamStatusesComponent extends TimelineBase { return this.mastodonService.getTimeline(this.account, this._streamElement.type, lastStatus.status.id, null, this.streamingService.nbStatusPerIteration, this._streamElement.tag, this._streamElement.listId) .then((status: Status[]) =>{ - return status.filter(x => this.isFiltered(x)); + return status.filter(x => !this.isFiltered(x)); }); }