From 4b302af2a199b61d721093fba7362b86696455fd Mon Sep 17 00:00:00 2001
From: Robbo <robertscundi@gmail.com>
Date: Tue, 4 Jan 2022 00:20:52 +1100
Subject: [PATCH 1/3] Add Right to Left option to Paged viewing mode

---
 public/js/reader.js       | 14 +++++++++++++-
 src/views/reader.html.ecr | 10 ++++++++--
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/public/js/reader.js b/public/js/reader.js
index 9b17276..0b927cb 100644
--- a/public/js/reader.js
+++ b/public/js/reader.js
@@ -13,6 +13,7 @@ const readerComponent = () => {
 		selectedIndex: 0, // 0: not selected; 1: the first page
 		margin: 30,
 		preloadLookahead: 3,
+		enableRightToLeft: false,
 
 		/**
 		 * Initialize the component by fetching the page dimensions
@@ -64,6 +65,13 @@ const readerComponent = () => {
 
 					const savedFlipAnimation = localStorage.getItem('enableFlipAnimation');
 					this.enableFlipAnimation = savedFlipAnimation === null || savedFlipAnimation === 'true';
+
+					const savedRightToLeft = localStorage.getItem('enableRightToLeft');
+					if (savedRightToLeft === null) {
+						this.enableRightToLeft = false;
+					} else {
+						this.enableRightToLeft = savedRightToLeft;
+					}
 				})
 				.catch(e => {
 					const errMsg = `Failed to get the page dimensions. ${e}`;
@@ -136,7 +144,7 @@ const readerComponent = () => {
 			this.toPage(newIdx);
 
 			if (this.enableFlipAnimation) {
-				if (isNext)
+				if (isNext ^ this.enableRightToLeft)
 					this.flipAnimation = 'right';
 				else
 					this.flipAnimation = 'left';
@@ -320,5 +328,9 @@ const readerComponent = () => {
 		enableFlipAnimationChanged() {
 			localStorage.setItem('enableFlipAnimation', this.enableFlipAnimation);
 		},
+
+		enableRightToLeftChanged() {
+			localStorage.setItem('enableRightToLeft', this.enableRightToLeft);
+		},
 	};
 }
diff --git a/src/views/reader.html.ecr b/src/views/reader.html.ecr
index 0e46ed2..395de41 100644
--- a/src/views/reader.html.ecr
+++ b/src/views/reader.html.ecr
@@ -55,8 +55,8 @@
                                                                                                                                                                  object-fit: contain;
                                                                                                                                                                  `" />
 
-          <div style="position:absolute;z-index:1; top:0;left:0; width:30%;height:100%;" @click="flipPage(false)"></div>
-          <div style="position:absolute;z-index:1; top:0;right:0; width:30%;height:100%;" @click="flipPage(true)"></div>
+          <div style="position:absolute;z-index:1; top:0;left:0; width:30%;height:100%;" @click="flipPage(false ^ enableRightToLeft)"></div>
+          <div style="position:absolute;z-index:1; top:0;right:0; width:30%;height:100%;" @click="flipPage(true ^ enableRightToLeft)"></div>
         </div>
 
       </div>
@@ -114,6 +114,12 @@
             </div>
           </div>
 
+          <div class="uk-margin uk-form-horizontal" x-show="mode !== 'continuous'">
+            <label class="uk-form-label" for="enable-right-to-left">Right to Left</label>
+            <div class="uk-form-controls">
+              <input id="enable-right-to-left" class="uk-checkbox" type="checkbox" x-model="enableRightToLeft" @change="enableRightToLeftChanged()">
+            </div>
+          </div>
           <hr class="uk-divider-icon">
 
           <div class="uk-margin">

From 27cc669012c93b3109de8555795c96a4146bb58f Mon Sep 17 00:00:00 2001
From: Robbo <robertscundi@gmail.com>
Date: Tue, 4 Jan 2022 20:43:55 +1100
Subject: [PATCH 2/3] Fix Right to Left for keyboard input

---
 public/js/reader.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/js/reader.js b/public/js/reader.js
index 0b927cb..b20f1cd 100644
--- a/public/js/reader.js
+++ b/public/js/reader.js
@@ -122,9 +122,9 @@ const readerComponent = () => {
 			if (this.mode === 'continuous') return;
 
 			if (event.key === 'ArrowLeft' || event.key === 'k')
-				this.flipPage(false);
+				this.flipPage(false ^ this.enableRightToLeft);
 			if (event.key === 'ArrowRight' || event.key === 'j')
-				this.flipPage(true);
+				this.flipPage(true ^ this.enableRightToLeft);
 		},
 		/**
 		 * Flips to the next or the previous page

From 86beed0c5f396514e5f0b7102e836725d7240228 Mon Sep 17 00:00:00 2001
From: Robbo <robertscundi@gmail.com>
Date: Wed, 5 Jan 2022 18:45:15 +1100
Subject: [PATCH 3/3] Cast RightToLeft value to boolean when retrieving from
 local storage.

---
 public/js/reader.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/js/reader.js b/public/js/reader.js
index b20f1cd..2cb3a66 100644
--- a/public/js/reader.js
+++ b/public/js/reader.js
@@ -70,7 +70,7 @@ const readerComponent = () => {
 					if (savedRightToLeft === null) {
 						this.enableRightToLeft = false;
 					} else {
-						this.enableRightToLeft = savedRightToLeft;
+						this.enableRightToLeft = (savedRightToLeft === 'true');
 					}
 				})
 				.catch(e => {