From 2efa4fb7a1cc8d078381730ea1ab6408113e41d8 Mon Sep 17 00:00:00 2001
From: ZXY101 <tennershaun@gmail.com>
Date: Mon, 25 Sep 2023 09:49:26 +0200
Subject: [PATCH] Handle some keyboard shortcuts

---
 src/lib/components/Reader/Reader.svelte | 45 +++++++++++++++++++++----
 src/lib/panzoom/util.ts                 |  8 +++++
 2 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/Reader/Reader.svelte b/src/lib/components/Reader/Reader.svelte
index 410c5ed..25607a0 100644
--- a/src/lib/components/Reader/Reader.svelte
+++ b/src/lib/components/Reader/Reader.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { currentVolume } from '$lib/catalog';
-  import { Panzoom, zoomDefault } from '$lib/panzoom';
+  import { Panzoom, toggleFullScreen, zoomDefault } from '$lib/panzoom';
   import { progress, settings, updateProgress } from '$lib/settings';
   import { clamp } from '$lib/util';
   import { Input, Popover, Range } from 'flowbite-svelte';
@@ -25,14 +25,14 @@
     start = new Date();
   }
 
-  function left() {
+  function left(_e: any, ingoreTimeOut?: boolean) {
     const newPage = $settings.rightToLeft ? page + navAmount : page - navAmount;
-    changePage(newPage);
+    changePage(newPage, ingoreTimeOut);
   }
 
-  function right() {
+  function right(_e: any, ingoreTimeOut?: boolean) {
     const newPage = $settings.rightToLeft ? page - navAmount : page + navAmount;
-    changePage(newPage);
+    changePage(newPage, ingoreTimeOut);
   }
 
   function changePage(newPage: number, ingoreTimeOut = false) {
@@ -91,9 +91,42 @@
   afterUpdate(() => {
     zoomDefault();
   });
+
+  function handleShortcuts(event: KeyboardEvent & { currentTarget: EventTarget & Window }) {
+    switch (event.code) {
+      case 'ArrowLeft':
+      case 'ArrowUp':
+      case 'PageUp':
+        left(event, true);
+        return;
+      case 'ArrowRight':
+      case 'ArrowDown':
+      case 'PageDown':
+        right(event, true);
+        return;
+      case 'Home':
+        changePage(1, true);
+        return;
+      case 'End':
+        if (pages) {
+          changePage(pages.length, true);
+        }
+        return;
+      case 'Space':
+        if (pages && page + 1 <= pages.length) {
+          changePage(page + 1, true);
+        }
+        return;
+      case 'KeyF':
+        toggleFullScreen();
+        return;
+      default:
+        break;
+    }
+  }
 </script>
 
-<svelte:window on:resize={zoomDefault} />
+<svelte:window on:resize={zoomDefault} on:keyup|preventDefault={handleShortcuts} />
 {#if volume && pages}
   <Cropper />
   <Popover placement="bottom-end" trigger="click" triggeredBy="#page-num" class="z-20">
diff --git a/src/lib/panzoom/util.ts b/src/lib/panzoom/util.ts
index 225088d..95ef575 100644
--- a/src/lib/panzoom/util.ts
+++ b/src/lib/panzoom/util.ts
@@ -191,4 +191,12 @@ export function keepInBounds() {
   if (y > maxY) {
     transform.y = maxY;
   }
+}
+
+export function toggleFullScreen() {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen();
+  } else if (document.exitFullscreen) {
+    document.exitFullscreen();
+  }
 }
\ No newline at end of file