created infinite scroll

This commit is contained in:
Nicolas Constant 2018-09-17 22:57:14 -04:00
parent 0795a39502
commit 889ce1fa35
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
1 changed files with 31 additions and 15 deletions

View File

@ -29,7 +29,7 @@ export class StreamComponent implements OnInit {
const instance = splitedUserName[1]; const instance = splitedUserName[1];
this.account = this.getRegisteredAccounts().find(x => x.username == user && x.instance == instance); this.account = this.getRegisteredAccounts().find(x => x.username == user && x.instance == instance);
this.retrieveToots(); //TODO change this for WebSockets this.retrieveToots();
this.launchWebsocket(); this.launchWebsocket();
} }
@ -48,6 +48,9 @@ export class StreamComponent implements OnInit {
@ViewChild('statusstream') public statustream: ElementRef; @ViewChild('statusstream') public statustream: ElementRef;
goToTop(): boolean { goToTop(): boolean {
if (this.statuses.length > 40) {
this.statuses.length = 40;
}
const stream = this.statustream.nativeElement as HTMLElement; const stream = this.statustream.nativeElement as HTMLElement;
stream.scrollTo({ stream.scrollTo({
top: 0, top: 0,
@ -57,26 +60,23 @@ export class StreamComponent implements OnInit {
} }
private streamPositionnedAtTop: boolean = true; private streamPositionnedAtTop: boolean = true;
private streamPositionnedAtBottom: boolean; private isProcessingInfiniteScroll: boolean;
onScroll() { onScroll() {
var element = this.statustream.nativeElement as HTMLElement; var element = this.statustream.nativeElement as HTMLElement;
const atBottom = element.scrollHeight - element.scrollTop === element.clientHeight; console.warn(`atBottom: ${element.scrollHeight} === ${element.clientHeight} + ${element.scrollTop } `);
const atBottom = element.scrollHeight <= element.clientHeight + element.scrollTop + 500;
const atTop = element.scrollTop === 0; const atTop = element.scrollTop === 0;
this.streamPositionnedAtTop = false; this.streamPositionnedAtTop = false;
this.streamPositionnedAtBottom = false; if (atBottom && !this.isProcessingInfiniteScroll) {
this.scrolledToBottom();
if (atBottom) {
console.log('Bottom reached!!');
this.streamPositionnedAtBottom = true;
} else if (atTop) { } else if (atTop) {
this.scrolledToTop() this.scrolledToTop();
} }
} }
private scrolledToTop() { private scrolledToTop() {
console.log('Top reached!!');
this.streamPositionnedAtTop = true; this.streamPositionnedAtTop = true;
for (const status of this.bufferStream) { for (const status of this.bufferStream) {
@ -86,6 +86,24 @@ export class StreamComponent implements OnInit {
this.bufferStream.length = 0; this.bufferStream.length = 0;
} }
private scrolledToBottom() {
this.isProcessingInfiniteScroll = true;
const lastStatus = this.statuses[this.statuses.length - 1];
this.mastodonService.getTimeline(this.account, this._streamElement.type, lastStatus.id)
.then((status: Status[]) => {
for (const s of status) {
this.statuses.push(s);
}
})
.catch(err => {
console.error(err);
})
.then(() => {
this.isProcessingInfiniteScroll = false;
});
}
private getRegisteredAccounts(): AccountInfo[] { private getRegisteredAccounts(): AccountInfo[] {
var regAccounts = <AccountInfo[]>this.store.snapshot().registeredaccounts.accounts; var regAccounts = <AccountInfo[]>this.store.snapshot().registeredaccounts.accounts;
return regAccounts; return regAccounts;
@ -100,8 +118,6 @@ export class StreamComponent implements OnInit {
}); });
} }
private launchWebsocket(): void { private launchWebsocket(): void {
this.websocketStreaming = this.streamingService.getStreaming(this.account, this._streamElement.type); this.websocketStreaming = this.streamingService.getStreaming(this.account, this._streamElement.type);
this.websocketStreaming.statusUpdateSubjet.subscribe((update: StatusUpdate) => { this.websocketStreaming.statusUpdateSubjet.subscribe((update: StatusUpdate) => {