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

Merge pull request #3211 from mempool/mononaut/fix-ios-block-scrolling

Browse Source 
Fix blockchain scrolling on iOS devices
This commit is contained in:
softsimon 2023-03-03 18:30:05 +09:00 committed by GitHub
commit f90a23bde6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/start/start.component.html
View File

@ -11,6 +11,8 @@
<div class="blockchain-wrapper" [class.time-ltr]="timeLtr" [class.time-rtl]="!timeLtr"> <div class="blockchain-wrapper" [class.time-ltr]="timeLtr" [class.time-rtl]="!timeLtr">
<div id="blockchain-container" [dir]="timeLtr ? 'rtl' : 'ltr'" #blockchainContainer <div id="blockchain-container" [dir]="timeLtr ? 'rtl' : 'ltr'" #blockchainContainer
(mousedown)="onMouseDown($event)" (mousedown)="onMouseDown($event)"
(pointerdown)="onPointerDown($event)"
(touchmove)="onTouchMove($event)"
(dragstart)="onDragStart($event)" (dragstart)="onDragStart($event)"
(scroll)="onScroll($event)" (scroll)="onScroll($event)"
> >

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

@ -27,6 +27,7 @@ export class StartComponent implements OnInit, OnDestroy {
@ViewChild('blockchainContainer') blockchainContainer: ElementRef; @ViewChild('blockchainContainer') blockchainContainer: ElementRef;
isMobile: boolean = false; isMobile: boolean = false;
isiOS: boolean = false;
blockWidth = 155; blockWidth = 155;
dynamicBlocksAmount: number = 8; dynamicBlocksAmount: number = 8;
blockCount: number = 0; blockCount: number = 0;
@ -40,7 +41,9 @@ export class StartComponent implements OnInit, OnDestroy {
constructor( constructor(
private stateService: StateService, private stateService: StateService,
) { } ) {
this.isiOS = ['iPhone','iPod','iPad'].includes((navigator as any)?.userAgentData?.platform || navigator.platform);
}
ngOnInit() { ngOnInit() {
this.firstPageWidth = 40 + (this.blockWidth * this.dynamicBlocksAmount); this.firstPageWidth = 40 + (this.blockWidth * this.dynamicBlocksAmount);
@ -135,9 +138,21 @@ export class StartComponent implements OnInit, OnDestroy {
this.mouseDragStartX = event.clientX; this.mouseDragStartX = event.clientX;
this.blockchainScrollLeftInit = this.blockchainContainer.nativeElement.scrollLeft; this.blockchainScrollLeftInit = this.blockchainContainer.nativeElement.scrollLeft;
} }
onPointerDown(event: PointerEvent) {
if (this.isiOS) {
event.preventDefault();
this.onMouseDown(event);
}
}
onDragStart(event: MouseEvent) { // Ignore Firefox annoying default drag behavior onDragStart(event: MouseEvent) { // Ignore Firefox annoying default drag behavior
event.preventDefault(); event.preventDefault();
} }
onTouchMove(event: TouchEvent) {
// disable native scrolling on iOS
if (this.isiOS) {
event.preventDefault();
}
}
// We're catching the whole page event here because we still want to scroll blocks // We're catching the whole page event here because we still want to scroll blocks
// even if the mouse leave the blockchain blocks container. Same idea for mouseup below. // even if the mouse leave the blockchain blocks container. Same idea for mouseup below.
@ -154,6 +169,20 @@ export class StartComponent implements OnInit, OnDestroy {
this.mouseDragStartX = null; this.mouseDragStartX = null;
this.stateService.setBlockScrollingInProgress(false); this.stateService.setBlockScrollingInProgress(false);
} }
@HostListener('document:pointermove', ['$event'])
onPointerMove(event: PointerEvent): void {
if (this.isiOS) {
this.onMouseMove(event);
}
}
@HostListener('document:pointerup', [])
@HostListener('document:pointercancel', [])
onPointerUp() {
if (this.isiOS) {
this.onMouseUp();
}
}
onScroll(e) { onScroll(e) {
const middlePage = this.pageIndex === 0 ? this.pages[0] : this.pages[1]; const middlePage = this.pageIndex === 0 ? this.pages[0] : this.pages[1];