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

Navigate between blocks using keyboard arrows.

Browse Source
This commit is contained in:
softsimon
2020-03-21 03:38:18 +07:00
parent 4ae5576452
commit 69827843c9
8 changed files with 73 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
View File

@@ -16,5 +16,5 @@
</div>
</div>
</div>
<div [hidden]="!arrowVisible" id="arrow-up" [ngStyle]="{'left': arrowLeftPx + 'px' }"></div>
<div [hidden]="!arrowVisible" id="arrow-up" [style.transition]="transition" [ngStyle]="{'left': arrowLeftPx + 'px' }"></div>
</div>

5
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
View File

@@ -42,8 +42,8 @@
.fees {
font-size: 14px;
margin-top: 10px;
margin-bottom: 8px;
margin-top: 12px;
margin-bottom: 6px;
}
.transaction-count {
@@ -95,7 +95,6 @@
position: relative;
left: 30px;
top: 140px;
transition: 1s;
width: 0;
height: 0;
border-left: 35px solid transparent;

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

@@ -1,7 +1,8 @@
import { Component, OnInit, OnDestroy, Input, OnChanges } from '@angular/core';
import { Component, OnInit, OnDestroy, Input, OnChanges, HostListener } from '@angular/core';
import { Subscription } from 'rxjs';
import { Block } from 'src/app/interfaces/electrs.interface';
import { StateService } from 'src/app/services/state.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-blockchain-blocks',
@@ -18,8 +19,11 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
arrowVisible = false;
arrowLeftPx = 30;
transition = '1s';
constructor(
private stateService: StateService,
private router: Router,
) { }
ngOnInit() {
@@ -31,12 +35,12 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
this.blocks.unshift(block);
this.blocks = this.blocks.slice(0, 8);
this.moveArrowToPosition();
this.moveArrowToPosition(true);
});
}
ngOnChanges() {
this.moveArrowToPosition();
this.moveArrowToPosition(false);
}
ngOnDestroy() {
@@ -44,15 +48,41 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
clearInterval(this.interval);
}
moveArrowToPosition() {
@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(['/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(['/mempool-block/', '0']);
} else {
this.router.navigate(['/block/', this.blocks[blockindex - 1].id], { state: { data: { block: this.blocks[blockindex - 1] }}});
}
}
}
moveArrowToPosition(animate: boolean) {
if (!this.markHeight) {
this.arrowVisible = false;
return;
}
const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
if (blockindex !== -1) {
if (!animate) {
this.transition = 'inherit';
}
this.arrowVisible = true;
this.arrowLeftPx = blockindex * 155 + 30;
if (!animate) {
setTimeout(() => this.transition = '1s');
}
}
}