From 2eae83f561ef2fc0009770d1fbc21ff2fff56b78 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Tue, 3 Mar 2020 12:10:54 +0800
Subject: [PATCH] fix(webreader): defaults to LTR and fix touch

---
 komga-webui/src/views/BookReader.vue | 86 ++++++++++++++++------------
 1 file changed, 48 insertions(+), 38 deletions(-)

diff --git a/komga-webui/src/views/BookReader.vue b/komga-webui/src/views/BookReader.vue
index 88660e5fe..2af1b5ac7 100644
--- a/komga-webui/src/views/BookReader.vue
+++ b/komga-webui/src/views/BookReader.vue
@@ -1,8 +1,8 @@
 <template>
   <v-container class="ma-0 pa-0 full-height" fluid v-if="pages.length > 0" style="width: 100%;"
-       v-touch="{
-       left: () => turnLeft(),
-       right: () => turnRight(),
+               v-touch="{
+       left: () => turnRight(),
+       right: () => turnLeft(),
        }"
   >
     <div>
@@ -45,7 +45,7 @@
           v-if="toolbar"
         >
           <v-row justify="center">
-              <!--  Menu: page slider  -->
+            <!--  Menu: page slider  -->
             <v-col>
               <v-slider
                 hide-details
@@ -57,7 +57,7 @@
                 :max="pagesCount"
               >
                 <template v-slot:prepend>
-                  <v-icon  @click="goToFirst" class="mx-2">mdi-arrow-collapse-left</v-icon>
+                  <v-icon @click="goToFirst" class="mx-2">mdi-arrow-collapse-left</v-icon>
                   <v-label>
                     {{ currentPage }}
                   </v-label>
@@ -66,31 +66,31 @@
                   <v-label>
                     {{ pagesCount }}
                   </v-label>
-                  <v-icon @click="goToLast"   class="mx-2">mdi-arrow-collapse-right</v-icon>
+                  <v-icon @click="goToLast" class="mx-2">mdi-arrow-collapse-right</v-icon>
                 </template>
               </v-slider>
-    <!--              <v-dialog v-model="dialogGoto" persistent max-width="290">-->
-    <!--                <template v-slot:activator="{ on }">-->
-    <!--                  <v-icon large class="ma-auto" v-on="on">mdi-arrow-right-bold-circle</v-icon>-->
-    <!--                </template>-->
-    <!--                <v-card >-->
-    <!--                  <v-card-text class="d-flex flex-row">-->
-    <!--                    <v-text-field-->
-    <!--                      v-model="goToPage"-->
-    <!--                      hide-details-->
-    <!--                      single-line-->
-    <!--                      type="number"-->
-    <!--                      autofocus-->
-    <!--                    />-->
-    <!--                  </v-card-text>-->
+              <!--              <v-dialog v-model="dialogGoto" persistent max-width="290">-->
+              <!--                <template v-slot:activator="{ on }">-->
+              <!--                  <v-icon large class="ma-auto" v-on="on">mdi-arrow-right-bold-circle</v-icon>-->
+              <!--                </template>-->
+              <!--                <v-card >-->
+              <!--                  <v-card-text class="d-flex flex-row">-->
+              <!--                    <v-text-field-->
+              <!--                      v-model="goToPage"-->
+              <!--                      hide-details-->
+              <!--                      single-line-->
+              <!--                      type="number"-->
+              <!--                      autofocus-->
+              <!--                    />-->
+              <!--                  </v-card-text>-->
 
-    <!--                  <v-card-actions>-->
-    <!--                    <v-spacer></v-spacer>-->
-    <!--                    <v-btn color="darken-1" text @click="dialogGoto = false">Close</v-btn>-->
-    <!--                    <v-btn color="green darken-1" text @click="goTo(goToPage)">Go To</v-btn>-->
-    <!--                  </v-card-actions>-->
-    <!--                </v-card>-->
-    <!--              </v-dialog>-->
+              <!--                  <v-card-actions>-->
+              <!--                    <v-spacer></v-spacer>-->
+              <!--                    <v-btn color="darken-1" text @click="dialogGoto = false">Close</v-btn>-->
+              <!--                    <v-btn color="green darken-1" text @click="goTo(goToPage)">Go To</v-btn>-->
+              <!--                  </v-card-actions>-->
+              <!--                </v-card>-->
+              <!--              </v-dialog>-->
             </v-col>
           </v-row>
 
@@ -117,7 +117,7 @@
     />
 
     <div class="full-height">
-    <!--  Carousel  -->
+      <!--  Carousel  -->
       <v-carousel v-model="carouselPage"
                   :show-arrows="false"
                   :continuous="false"
@@ -135,7 +135,7 @@
                          :reverse-transition="animations ? undefined : false"
         >
           <div class="full-height d-flex flex-column justify-center reader-background">
-            <div :class="`d-flex flex-row${flipDirection ? '-reverse' : ''} justify-center px-0 mx-0` " >
+            <div :class="`d-flex flex-row${flipDirection ? '-reverse' : ''} justify-center px-0 mx-0` ">
               <img :src="getPageUrl(p)"
                    :height="maxHeight"
                    :width="maxWidth(p)"
@@ -185,14 +185,14 @@
               v-model="readingDirection"
               label="Reading Direction"
             >
-              <template v-slot:item="data" >
+              <template v-slot:item="data">
                 <div class="text-capitalize">
                   {{ readingDirectionDisplay(data.item) }}
                 </div>
               </template>
               <template v-slot:selection="data">
                 <div class="text-capitalize">
-                  {{ readingDirectionDisplay(data.item)  }}
+                  {{ readingDirectionDisplay(data.item) }}
                 </div>
               </template>
             </settings-select>
@@ -210,7 +210,7 @@
               </template>
               <template v-slot:selection="data">
                 <div class="text-capitalize">
-                  {{ imageFitDisplay(data.item)  }}
+                  {{ imageFitDisplay(data.item) }}
                 </div>
               </template>
             </settings-select>
@@ -304,7 +304,7 @@ export default Vue.extend({
         imageFits: Object.values(ImageFit),
         fit: ImageFit.HEIGHT,
         readingDirections: Object.values(ReadingDirection),
-        readingDirection: ReadingDirection.RightToLeft,
+        readingDirection: ReadingDirection.LeftToRight,
         animations: true
       }
     }
@@ -320,10 +320,20 @@ export default Vue.extend({
     window.addEventListener('keydown', this.keyPressed)
     this.setup(this.bookId, Number(this.$route.query.page))
 
-    this.loadFromCookie(cookieReadingDirection, (v) => { this.readingDirection = v })
-    this.loadFromCookie(cookieAnimations, (v) => { this.animations = (v === 'true') })
-    this.loadFromCookie(cookieDoublePages, (v) => { this.doublePages = (v === 'true') })
-    this.loadFromCookie(cookieFit, (v) => { if (v) { this.imageFit = v } })
+    this.loadFromCookie(cookieReadingDirection, (v) => {
+      this.readingDirection = v
+    })
+    this.loadFromCookie(cookieAnimations, (v) => {
+      this.animations = (v === 'true')
+    })
+    this.loadFromCookie(cookieDoublePages, (v) => {
+      this.doublePages = (v === 'true')
+    })
+    this.loadFromCookie(cookieFit, (v) => {
+      if (v) {
+        this.imageFit = v
+      }
+    })
   },
   destroyed () {
     window.removeEventListener('keydown', this.keyPressed)
@@ -600,7 +610,7 @@ export default Vue.extend({
 <style scoped>
 
 .reader-background {
-     background-color: white; /* TODO add a setting for this, some books might not be white */
+  background-color: white; /* TODO add a setting for this, some books might not be white */
 }
 
 .settings {