Repos / pytaku / 1af1ab83ee
commit 1af1ab83eedaebbff5911ffc7301f2967ced6158
Author: Bùi Thành Nhân <hi@imnhan.com>
Date:   Sun Sep 26 21:04:35 2021 +0700

    hjkl navigation because why not

diff --git a/src/pytaku/js-src/routes/chapter.js b/src/pytaku/js-src/routes/chapter.js
index 806af56..285972a 100644
--- a/src/pytaku/js-src/routes/chapter.js
+++ b/src/pytaku/js-src/routes/chapter.js
@@ -5,6 +5,10 @@ const KEYCODE_PLUS = 43;
 const KEYCODE_MINUS = 45;
 const KEYCODE_ZERO = 48;
 const KEYCODE_QUESTION_MARK = 63;
+const KEYCODE_J = 106;
+const KEYCODE_K = 107;
+const KEYCODE_H = 104;
+const KEYCODE_L = 108;
 
 const LoadingPlaceholder = {
   view: () => m("h2", [m("i.icon.icon-loader.spin")]),
@@ -78,6 +82,8 @@ function Chapter(initialVNode) {
   let pageMaxWidth = 100; // in percent
 
   function onKeyPress(event) {
+    if (event.target.tagName === "INPUT") return;
+
     switch (event.keyCode) {
       case KEYCODE_PLUS:
         if (pageMaxWidth <= 85) pageMaxWidth += 15;
@@ -92,8 +98,28 @@ function Chapter(initialVNode) {
         window.alert(`Keyboard shortcuts:
     - to decrease page size
     + to increase page size (max 100%)
-    0 (zero) to reset page size`);
+    0 (zero) to reset page size
+    j to scroll down
+    k to scroll up
+    h to go to previous chapter
+    l to go to next chapter`);
+        break;
+      case KEYCODE_J:
+        window.scrollBy({ top: 350, behavior: "smooth" });
+        break;
+      case KEYCODE_K:
+        window.scrollBy({ top: -350, behavior: "smooth" });
+        break;
+      case KEYCODE_H:
+        document.querySelector(".chapter--prev-button").click();
+        break;
+      case KEYCODE_L:
+        document.querySelector(".chapter--next-button").click();
         break;
+      /*
+      default:
+        console.log("Keycode:", event.keyCode);
+      */
     }
     m.redraw();
   }
@@ -167,12 +193,13 @@ function Chapter(initialVNode) {
         ? m(
             m.route.Link,
             {
-              class: "touch-friendly",
+              class: "touch-friendly chapter--prev-button",
               href: `/m/${site}/${titleId}/${prev.id}`,
             },
             [m("i.icon.icon-chevrons-left"), m("span", "prev")]
           )
         : m(Button, {
+            class: "chapter--prev-button",
             text: "prev",
             icon: "chevrons-left",
             disabled: true,
@@ -189,7 +216,8 @@ function Chapter(initialVNode) {
         m.route.Link,
         {
           class:
-            "touch-friendly" + (isMarkingLastChapterAsRead ? " disabled" : ""),
+            "touch-friendly chapter--next-button" +
+            (isMarkingLastChapterAsRead ? " disabled" : ""),
           href: nextRoute,
           disabled: isMarkingLastChapterAsRead,
           onclick: (ev) => {