From 9b1f74858f782aea2ec17c93c4808d446a84113d Mon Sep 17 00:00:00 2001
From: Abe Jellinek <jellinek@berkeley.edu>
Date: Wed, 30 Oct 2024 17:26:54 -0400
Subject: [PATCH] EPUB: Fix swipe/tap page switching in RTL books

---
 src/dom/epub/epub-view.ts | 16 ++++++++--------
 src/dom/epub/flow.ts      | 26 ++++++++++++++++++++++----
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/dom/epub/epub-view.ts b/src/dom/epub/epub-view.ts
index 5aff68ed..b4db4a32 100644
--- a/src/dom/epub/epub-view.ts
+++ b/src/dom/epub/epub-view.ts
@@ -72,6 +72,8 @@ class EPUBView extends DOMView<EPUBViewState, EPUBViewData> {
 
 	appearance?: EPUBAppearance;
 
+	pageProgressionRTL!: boolean;
+
 	private _lastResizeWidth: number | null = null;
 
 	private _lastResizeHeight: number | null = null;
@@ -82,8 +84,6 @@ class EPUBView extends DOMView<EPUBViewState, EPUBViewData> {
 
 	private readonly _rangeCache = new Map<string, PersistentRange>();
 
-	private _pageProgressionRTL!: boolean;
-
 	private _pageMappingJSON!: string;
 
 	constructor(options: DOMViewOptions<EPUBViewState, EPUBViewData>) {
@@ -123,12 +123,12 @@ class EPUBView extends DOMView<EPUBViewState, EPUBViewData> {
 		cspMeta.setAttribute('content', this._getCSP());
 		this._iframeDocument.head.prepend(cspMeta);
 
-		this._pageProgressionRTL = this.book.packaging.metadata.direction === 'rtl';
-		if (!this._pageProgressionRTL) {
+		this.pageProgressionRTL = this.book.packaging.metadata.direction === 'rtl';
+		if (!this.pageProgressionRTL) {
 			try {
 				let locale = new Intl.Locale(this.book.packaging.metadata.language).maximize();
-				this._pageProgressionRTL = locale.script ? RTL_SCRIPTS.has(locale.script) : false;
-				if (this._pageProgressionRTL) {
+				this.pageProgressionRTL = locale.script ? RTL_SCRIPTS.has(locale.script) : false;
+				if (this.pageProgressionRTL) {
 					console.log('Guessed RTL page progression from maximized locale: ' + locale);
 				}
 			}
@@ -554,7 +554,7 @@ class EPUBView extends DOMView<EPUBViewState, EPUBViewData> {
 
 		if (!event.shiftKey) {
 			if (key == 'ArrowLeft') {
-				if (this._pageProgressionRTL) {
+				if (this.pageProgressionRTL) {
 					this.flow.navigateToNextPage();
 				}
 				else {
@@ -564,7 +564,7 @@ class EPUBView extends DOMView<EPUBViewState, EPUBViewData> {
 				return;
 			}
 			if (key == 'ArrowRight') {
-				if (this._pageProgressionRTL) {
+				if (this.pageProgressionRTL) {
 					this.flow.navigateToPreviousPage();
 				}
 				else {
diff --git a/src/dom/epub/flow.ts b/src/dom/epub/flow.ts
index a64fe21d..c80f7464 100644
--- a/src/dom/epub/flow.ts
+++ b/src/dom/epub/flow.ts
@@ -530,6 +530,24 @@ export class PaginatedFlow extends AbstractFlow {
 		this._onViewUpdate();
 	}
 
+	navigateLeft() {
+		if (this._view.pageProgressionRTL) {
+			this.navigateToNextPage();
+		}
+		else {
+			this.navigateToPreviousPage();
+		}
+	}
+
+	navigateRight() {
+		if (this._view.pageProgressionRTL) {
+			this.navigateToPreviousPage();
+		}
+		else {
+			this.navigateToNextPage();
+		}
+	}
+
 	navigateToFirstPage(): void {
 		this.currentSectionIndex = this._view.renderers[0].section.index;
 		this._sectionsContainer.scrollTo({ left: 0, top: 0 });
@@ -641,20 +659,20 @@ export class PaginatedFlow extends AbstractFlow {
 		// Switch pages after swiping
 		let swipeAmount = (event.clientX - this._touchStartX) / PAGE_TURN_SWIPE_LENGTH_PX;
 		if (swipeAmount <= -1) {
-			this.navigateToNextPage();
+			this.navigateRight();
 		}
 		else if (swipeAmount >= 1) {
-			this.navigateToPreviousPage();
+			this.navigateLeft();
 		}
 		// If there's no selection, allow single-tap page turns
 		else if (this._iframeWindow.getSelection()!.isCollapsed
 				&& Math.abs(event.clientX - this._touchStartX) < EPSILON_PX
 				&& Math.abs(event.clientY - this._touchStartY) < EPSILON_PX) {
 			if (event.clientX >= this._iframeWindow.innerWidth - PAGE_TURN_TAP_MARGIN_PX) {
-				this.navigateToNextPage();
+				this.navigateRight();
 			}
 			else if (event.clientX <= PAGE_TURN_TAP_MARGIN_PX) {
-				this.navigateToPreviousPage();
+				this.navigateLeft();
 			}
 		}
 	};