From 2f0f94dc531ca8eb1633018e2c6ecd3c2e1a5151 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Tue, 5 Dec 2023 14:30:20 +0800
Subject: [PATCH] feat(epubreader): add navigation modes with click/tap,
 buttons, or both

---
 komga-webui/src/locales/en.json      |  6 +++
 komga-webui/src/views/EpubReader.vue | 66 +++++++++++++++++++++++++---
 2 files changed, 66 insertions(+), 6 deletions(-)

diff --git a/komga-webui/src/locales/en.json b/komga-webui/src/locales/en.json
index 20de97e9..a38548da 100644
--- a/komga-webui/src/locales/en.json
+++ b/komga-webui/src/locales/en.json
@@ -706,6 +706,12 @@
       "layout": "Layout",
       "layout_paginated": "Paginated",
       "layout_scroll": "Scroll",
+      "navigation_mode": "Navigation mode",
+      "navigation_options": {
+        "both": "Both",
+        "buttons": "Buttons",
+        "click": "Click / Tap"
+      },
       "page_margins": "Page margins",
       "viewing_theme": "Viewing theme"
     },
diff --git a/komga-webui/src/views/EpubReader.vue b/komga-webui/src/views/EpubReader.vue
index 3ea03af9..b210d4cb 100644
--- a/komga-webui/src/views/EpubReader.vue
+++ b/komga-webui/src/views/EpubReader.vue
@@ -146,24 +146,30 @@
       <a id="previous-chapter" rel="prev" role="button" aria-labelledby="previous-label"
          style="left: 50%;position: fixed;color: #000;height: 24px;background: #d3d3d33b; width: 150px;transform: translate(-50%, 0); display: block"
          :style="`top: ${showToolbars ? 48 : 0}px`"
+         :class="settings.navigationButtons ? '' : 'hidden'"
       >
         <v-icon style="left: calc(50% - 12px); position: relative;">mdi-chevron-up</v-icon>
       </a>
       <a id="next-chapter" rel="next" role="button" aria-labelledby="next-label"
+         :class="settings.navigationButtons ? '' : 'hidden'"
          style="bottom: 0;left: 50%;position: fixed;color: #000;height: 24px;background: #d3d3d33b; width: 150px;transform: translate(-50%, 0); display: block">
         <v-icon style="left: calc(50% - 12px);position: relative;">mdi-chevron-down</v-icon>
       </a>
     </div>
 
     <footer id="footerMenu">
-      <a rel="prev" class="disabled" role="button" aria-labelledby="previous-label" style="top: 50%;left:0;position: fixed;height: 100px;
-                    background: #d3d3d33b;">
+      <a rel="prev" class="disabled" role="button" aria-labelledby="previous-label"
+         style="top: 50%;left:0;position: fixed;height: 100px;background: #d3d3d33b;"
+         :class="settings.navigationButtons ? '' : 'hidden'"
+      >
         <v-icon style="top: calc(50% - 12px);
                         position: relative;">mdi-chevron-left
         </v-icon>
       </a>
-      <a rel="next" class="disabled" role="button" aria-labelledby="next-label" style="top: 50%;right:0;position: fixed;height: 100px;
-                    background: #d3d3d33b;">
+      <a rel="next" class="disabled" role="button" aria-labelledby="next-label"
+         style="top: 50%;right:0;position: fixed;height: 100px;background: #d3d3d33b;"
+         :class="settings.navigationButtons ? '' : 'hidden'"
+      >
         <v-icon style="top: calc(50% - 12px);position: relative;">mdi-chevron-right</v-icon>
       </a>
     </footer>
@@ -191,6 +197,14 @@
                                :disabled="!screenfull.isEnabled"/>
             </v-list-item>
 
+            <v-list-item>
+              <settings-select
+                :items="navigationOptions"
+                v-model="navigationMode"
+                :label="$t('epubreader.settings.navigation_mode')"
+              />
+            </v-list-item>
+
             <v-subheader class="font-weight-black text-h6">{{ $t('bookreader.settings.display') }}</v-subheader>
 
             <v-list-item>
@@ -293,10 +307,11 @@ import {flattenToc} from '@/functions/toc'
 import ShortcutHelpDialog from '@/components/dialogs/ShortcutHelpDialog.vue'
 import screenfull from 'screenfull'
 import {getBookReadRouteFromMediaProfile} from '@/functions/book-format'
+import SettingsSelect from '@/components/SettingsSelect.vue'
 
 export default Vue.extend({
   name: 'EpubReader',
-  components: {ShortcutHelpDialog, TocList, SettingsSwitch},
+  components: {SettingsSelect, ShortcutHelpDialog, TocList, SettingsSwitch},
   data: function () {
     return {
       screenfull,
@@ -340,14 +355,23 @@ export default Vue.extend({
         {text: this.$t('enums.epubreader.column_count.two').toString(), value: '2'},
       ],
       settings: {
+        // R2D2BC
         appearance: 'readium-default-on',
         pageMargins: 1,
         lineHeight: 1,
         fontSize: 100,
         verticalScroll: false,
         columnCount: 'auto',
+        // Epub Reader
         alwaysFullscreen: false,
+        navigationClick: true,
+        navigationButtons: true,
       },
+      navigationOptions: [
+        {text: this.$t('epubreader.settings.navigation_options.buttons').toString(), value: 'button'},
+        {text: this.$t('epubreader.settings.navigation_options.click').toString(), value: 'click'},
+        {text: this.$t('epubreader.settings.navigation_options.both').toString(), value: 'buttonclick'},
+      ],
       tocs: {
         toc: undefined as unknown as TocEntry[],
         landmarks: undefined as unknown as TocEntry[],
@@ -516,6 +540,18 @@ export default Vue.extend({
         else screenfull.isEnabled && screenfull.exit()
       },
     },
+    navigationMode: {
+      get: function (): string {
+        let r = this.settings.navigationButtons ? 'button' : ''
+        if (this.settings.navigationClick) r += 'click'
+        return r
+      },
+      set: function (value: string): void {
+        this.settings.navigationButtons = value.includes('button')
+        this.settings.navigationClick = value.includes('click')
+        this.$store.commit('setEpubreaderSettings', this.settings)
+      },
+    },
   },
   methods: {
     previousBook() {
@@ -568,13 +604,27 @@ export default Vue.extend({
     clickThrough(e: MouseEvent) {
       if (e.detail === 1) {
         this.clickTimer = setTimeout(() => {
-          this.toggleToolbars()
+          this.singleClick(e)
         }, 200)
       }
       if (e.detail === 2) {
         clearTimeout(this.clickTimer)
       }
     },
+    singleClick(e: MouseEvent) {
+      if (this.verticalScroll) {
+        if (this.settings.navigationClick) {
+          if (e.y < this.$vuetify.breakpoint.height / 4) return this.d2Reader.previousPage()
+          if (e.y > this.$vuetify.breakpoint.height * .75) return this.d2Reader.nextPage()
+        }
+      } else {
+        if (this.settings.navigationClick) {
+          if (e.x < this.$vuetify.breakpoint.width / 4) return this.d2Reader.previousPage()
+          if (e.x > this.$vuetify.breakpoint.width * .75) return this.d2Reader.nextPage()
+        }
+      }
+      this.toggleToolbars()
+    },
     async setup(bookId: string) {
       this.book = await this.$komgaBooks.getBook(bookId)
       this.series = await this.$komgaSeries.getOneSeries(this.book.seriesId)
@@ -828,4 +878,8 @@ export default Vue.extend({
 .scrolltab-content {
   max-height: calc(100vh - 48px);
 }
+
+.hidden {
+  display: none !important;
+}
 </style>