refactoring onScroll
This commit is contained in:
parent
1e9f0d4137
commit
ab30bb1a06
|
@ -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<Status[]>;
|
||||
// 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<Status[]>;
|
||||
|
||||
|
||||
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
// }
|
||||
}
|
||||
|
|
|
@ -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));
|
||||
});
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue