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

Fixed keyboard navigation bugs.

Browse Source
This commit is contained in:
softsimon
2020-05-13 13:03:57 +07:00
parent e565815dfd
commit 4eec633359
5 changed files with 46 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
View File

@@ -54,6 +54,28 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
}
this.moveArrowToPosition(false);
});
this.stateService.keyNavigation$.subscribe((event) => {
if (!this.markHeight) {
return;
}
if (event.key === 'ArrowRight') {
const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
if (this.blocks[blockindex + 1]) {
this.router.navigate([(this.network ? '/' + this.network : '') + '/block/',
this.blocks[blockindex + 1].id], { state: { data: { block: this.blocks[blockindex + 1] } } });
}
} else if (event.key === 'ArrowLeft') {
const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
if (blockindex === 0) {
this.router.navigate([(this.network ? '/' + this.network : '') + '/mempool-block/', '0']);
} else {
this.router.navigate([(this.network ? '/' + this.network : '') + '/block/',
this.blocks[blockindex - 1].id], { state: { data: { block: this.blocks[blockindex - 1] }}});
}
}
});
}
ngOnDestroy() {
@@ -61,28 +83,6 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
clearInterval(this.interval);
}
@HostListener('document:keydown', ['$event'])
handleKeyboardEvents(event: KeyboardEvent) {
if (!this.markHeight) {
return;
}
if (event.key === 'ArrowRight') {
const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
if (this.blocks[blockindex + 1]) {
this.router.navigate([(this.network ? '/' + this.network : '') + '/block/',
this.blocks[blockindex + 1].id], { state: { data: { block: this.blocks[blockindex + 1] } } });
}
} else if (event.key === 'ArrowLeft') {
const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
if (blockindex === 0) {
this.router.navigate([(this.network ? '/' + this.network : '') + '/mempool-block/', '0']);
} else {
this.router.navigate([(this.network ? '/' + this.network : '') + '/block/',
this.blocks[blockindex - 1].id], { state: { data: { block: this.blocks[blockindex - 1] }}});
}
}
}
moveArrowToPosition(animate: boolean) {
if (!this.markHeight) {
this.arrowVisible = false;