From 83b122ab753c9b4c6b932a5a73b706f303506f29 Mon Sep 17 00:00:00 2001
From: Leeingnyo <dyd1928@naver.com>
Date: Wed, 18 Aug 2021 23:38:29 +0900
Subject: [PATCH] Implement a controller to toggle flip animation

---
 public/js/reader.js       | 20 +++++++++++++++-----
 src/views/reader.html.ecr |  8 +++++++-
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/public/js/reader.js b/public/js/reader.js
index 79943af..575d3ba 100644
--- a/public/js/reader.js
+++ b/public/js/reader.js
@@ -6,6 +6,7 @@ const readerComponent = () => {
 		alertClass: 'uk-alert-primary',
 		items: [],
 		curItem: {},
+		enableFlipAnimation: true,
 		flipAnimation: null,
 		longPages: false,
 		lastSavedPage: page,
@@ -60,6 +61,9 @@ const readerComponent = () => {
 					for (let idx = page + 1; idx <= limit; idx++) {
 						this.preloadImage(this.items[idx - 1].url);
 					}
+
+					const savedFlipAnimation = localStorage.getItem('enableFlipAnimation');
+					this.enableFlipAnimation = savedFlipAnimation === null || savedFlipAnimation === 'true';
 				})
 				.catch(e => {
 					const errMsg = `Failed to get the page dimensions. ${e}`;
@@ -131,10 +135,12 @@ const readerComponent = () => {
 
 			this.toPage(newIdx);
 
-			if (isNext)
-				this.flipAnimation = 'right';
-			else
-				this.flipAnimation = 'left';
+			if (this.enableFlipAnimation) {
+				if (isNext)
+					this.flipAnimation = 'right';
+				else
+					this.flipAnimation = 'left';
+			}
 
 			setTimeout(() => {
 				this.flipAnimation = null;
@@ -309,6 +315,10 @@ const readerComponent = () => {
 
 		preloadLookaheadChanged() {
 			localStorage.setItem('preloadLookahead', this.preloadLookahead);
-		}
+		},
+
+		enableFlipAnimationChanged() {
+			localStorage.setItem('enableFlipAnimation', this.enableFlipAnimation);
+		},
 	};
 }
diff --git a/src/views/reader.html.ecr b/src/views/reader.html.ecr
index 3d90a10..0e46ed2 100644
--- a/src/views/reader.html.ecr
+++ b/src/views/reader.html.ecr
@@ -101,7 +101,13 @@
             </div>
           </div>
 
-          <div class="uk-margin" x-show="mode !== 'continuous'">
+          <div class="uk-margin uk-form-horizontal" x-show="mode !== 'continuous'">
+            <label class="uk-form-label" for="enable-flip-animation">Enable Flip Animation</label>
+            <div class="uk-form-controls">
+              <input id="enable-flip-animation" class="uk-checkbox" type="checkbox" x-model="enableFlipAnimation" @change="enableFlipAnimationChanged()">
+            </div>
+          </div>
+          <div class="uk-margin uk-form-horizontal" x-show="mode !== 'continuous'">
             <label class="uk-form-label" for="preload-lookahead" x-text="`Preload Image: ${preloadLookahead} page(s)`"></label>
             <div class="uk-form-controls">
               <input id="preload-lookahead" class="uk-range" type="range" min="0" max="5" step="1" x-model.number="preloadLookahead" @change="preloadLookaheadChanged()">