From afb4f6e70b6d7ba4791e8bc153b13dad48c4dc3d Mon Sep 17 00:00:00 2001 From: softsimon Date: Wed, 13 May 2020 13:03:57 +0700 Subject: [PATCH] Fixed keyboard navigation bugs. --- .../src/app/components/app/app.component.ts | 13 +++++- .../app/components/block/block.component.html | 4 +- .../blockchain-blocks.component.ts | 44 +++++++++---------- .../mempool-blocks.component.ts | 20 ++++----- frontend/src/app/services/state.service.ts | 1 + 5 files changed, 46 insertions(+), 36 deletions(-) diff --git a/frontend/src/app/components/app/app.component.ts b/frontend/src/app/components/app/app.component.ts index 0d50da492..63d1fd5a0 100644 --- a/frontend/src/app/components/app/app.component.ts +++ b/frontend/src/app/components/app/app.component.ts @@ -1,6 +1,7 @@ -import { Component } from '@angular/core'; +import { Component, HostListener } from '@angular/core'; import { Router } from '@angular/router'; import { WebsocketService } from '../../services/websocket.service'; +import { StateService } from 'src/app/services/state.service'; @Component({ selector: 'app-root', @@ -14,5 +15,15 @@ export class AppComponent { constructor( public router: Router, private websocketService: WebsocketService, + private stateService: StateService, ) { } + + @HostListener('document:keydown', ['$event']) + handleKeyboardEvents(event: KeyboardEvent) { + if (event.target !== document.body) { + return; + } + this.stateService.keyNavigation$.next(event); + } + } diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html index 6744f7043..0bb90df60 100644 --- a/frontend/src/app/components/block/block.component.html +++ b/frontend/src/app/components/block/block.component.html @@ -48,7 +48,7 @@ () - Reward + fees: + Subsidy + fees: () @@ -60,7 +60,7 @@ - Reward + fees: + Subsidy + fees: diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts index 9a4dabd8f..90e0d274d 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts @@ -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; diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts index 2cddfd4bf..e26102af7 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts @@ -65,21 +65,12 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy { this.stateService.networkChanged$ .subscribe((network) => this.network = network); - } - @HostListener('window:resize', ['$event']) - onResize() { - if (this.mempoolBlocks && this.mempoolBlocks.length) { - this.mempoolBlocks = this.reduceMempoolBlocksToFitScreen(JSON.parse(JSON.stringify(this.mempoolBlocksFull))); - } - } - - @HostListener('document:keydown', ['$event']) - handleKeyboardEvents(event: KeyboardEvent) { - setTimeout(() => { + this.stateService.keyNavigation$.subscribe((event) => { if (this.markIndex === undefined) { return; } + if (event.key === 'ArrowRight') { if (this.mempoolBlocks[this.markIndex - 1]) { this.router.navigate([(this.network ? '/' + this.network : '') + '/mempool-block/', this.markIndex - 1]); @@ -100,6 +91,13 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy { }); } + @HostListener('window:resize', ['$event']) + onResize() { + if (this.mempoolBlocks && this.mempoolBlocks.length) { + this.mempoolBlocks = this.reduceMempoolBlocksToFitScreen(JSON.parse(JSON.stringify(this.mempoolBlocksFull))); + } + } + ngOnDestroy() { this.mempoolBlocksSubscription.unsubscribe(); } diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts index 51207c744..96dde4526 100644 --- a/frontend/src/app/services/state.service.ts +++ b/frontend/src/app/services/state.service.ts @@ -34,6 +34,7 @@ export class StateService { connectionState$ = new BehaviorSubject<0 | 1 | 2>(2); markBlock$ = new Subject(); + keyNavigation$ = new Subject(); constructor( private router: Router,