machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

apply blockchain scroll offset when element is ready

Browse Source
This commit is contained in:
Mononaut 2023-07-21 17:10:58 +09:00
parent 135adfecbd
commit 1bd19e1d8d
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
3 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/components/blockchain/blockchain.component.ts
View File

@ -82,9 +82,7 @@ export class BlockchainComponent implements OnInit, OnDestroy {
}
this.mempoolOffset = Math.max(0, width - this.dividerOffset);
this.cd.markForCheck();
setTimeout(() => {
this.mempoolOffsetChange.emit(this.mempoolOffset);
}, 0);
this.mempoolOffsetChange.emit(this.mempoolOffset);
}
@HostListener('window:resize', ['$event'])

7
frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
View File

@ -31,6 +31,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
@Input() getHref?: (index) => string = (index) => `/mempool-block/${index}`;
@Input() allBlocks: boolean = false;
mempoolWidth: number = 0;
@Output() widthChange: EventEmitter<number> = new EventEmitter();
specialBlocks = specialBlocks;
@ -155,7 +156,11 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
}),
tap(() => {
this.cd.markForCheck();
this.widthChange.emit(this.containerOffset + this.mempoolBlocks.length * this.blockOffset);
const width = this.containerOffset + this.mempoolBlocks.length * this.blockOffset;
if (this.mempoolWidth !== width) {
this.mempoolWidth = width;
this.widthChange.emit(this.mempoolWidth);
}
})
);

14
frontend/src/app/components/start/start.component.ts
View File

@ -1,4 +1,4 @@
import { Component, ElementRef, HostListener, OnInit, OnDestroy, ViewChild, Input } from '@angular/core';
import { Component, ElementRef, HostListener, OnInit, OnDestroy, ViewChild, Input, DoCheck } from '@angular/core';
import { Subscription } from 'rxjs';
import { MarkBlockState, StateService } from '../../services/state.service';
import { specialBlocks } from '../../app.constants';
@ -9,7 +9,7 @@ import { BlockExtended } from '../../interfaces/node-api.interface';
templateUrl: './start.component.html',
styleUrls: ['./start.component.scss'],
})
export class StartComponent implements OnInit, OnDestroy {
export class StartComponent implements OnInit, OnDestroy, DoCheck {
@Input() showLoadingIndicator = false;
interval = 60;
@ -43,6 +43,7 @@ export class StartComponent implements OnInit, OnDestroy {
pageIndex: number = 0;
pages: any[] = [];
pendingMark: number | null = null;
pendingOffset: number | null = null;
lastUpdate: number = 0;
lastMouseX: number;
velocity: number = 0;
@ -54,6 +55,14 @@ export class StartComponent implements OnInit, OnDestroy {
this.isiOS = ['iPhone','iPod','iPad'].includes((navigator as any)?.userAgentData?.platform || navigator.platform);
}
ngDoCheck(): void {
if (this.pendingOffset != null) {
const offset = this.pendingOffset;
this.pendingOffset = null;
this.addConvertedScrollOffset(offset);
}
}
ngOnInit() {
this.firstPageWidth = 40 + (this.blockWidth * this.dynamicBlocksAmount);
this.blockCounterSubscription = this.stateService.blocks$.subscribe((blocks) => {
@ -429,6 +438,7 @@ export class StartComponent implements OnInit, OnDestroy {
addConvertedScrollOffset(offset: number): void {
if (!this.blockchainContainer?.nativeElement) {
this.pendingOffset = offset;
return;
}
if (this.timeLtr) {