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 id="blockchain-container" [dir]="timeLtr ? 'rtl' : 'ltr'" #blockchainContainer
(mousedown)="onMouseDown($event)"
(pointerdown)="onPointerDown($event)"
(touchmove)="onTouchMove($event)"
(dragstart)="onDragStart($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;
isMobile: boolean = false;
isiOS: boolean = false;
blockWidth = 155;
dynamicBlocksAmount: number = 8;
blockCount: number = 0;
@ -40,7 +41,9 @@ export class StartComponent implements OnInit, OnDestroy {
constructor(
private stateService: StateService,
) { }
) {
this.isiOS = ['iPhone','iPod','iPad'].includes((navigator as any)?.userAgentData?.platform || navigator.platform);
}
ngOnInit() {
this.firstPageWidth = 40 + (this.blockWidth * this.dynamicBlocksAmount);
@ -135,9 +138,21 @@ export class StartComponent implements OnInit, OnDestroy {
this.mouseDragStartX = event.clientX;
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
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
// 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.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) {
const middlePage = this.pageIndex === 0 ? this.pages[0] : this.pages[1];