commit 6df7fc77f84e4ae8e35925f175f3916d622ab6d7
Author: Bùi Thành Nhân <hi@imnhan.com>
Date:   Mon Sep 6 20:32:13 2021 +0700

    keyboard shortcuts to adjust page size

diff --git a/README.md b/README.md
index 69c7bde..9b30a0a 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,10 @@ # Pytaku
   provides a good baseline of SPA functionality without having to pull in the
   Rube Goldberg machine that is """modern""" JS devtools.
 
+# Keyboard shortcuts
+
+On Chapter page, press `?` to show keyboard shortcuts.
+
 # Development
 
 ```sh
diff --git a/src/pytaku/js-src/routes/chapter.js b/src/pytaku/js-src/routes/chapter.js
index fa150ec..2d19e54 100644
--- a/src/pytaku/js-src/routes/chapter.js
+++ b/src/pytaku/js-src/routes/chapter.js
@@ -1,6 +1,11 @@
 import { Auth, ChapterModel } from "../models.js";
 import { LoadingMessage, fullChapterName, Button } from "../utils.js";
 
+const KEYCODE_PLUS = 43;
+const KEYCODE_MINUS = 45;
+const KEYCODE_ZERO = 48;
+const KEYCODE_QUESTION_MARK = 63;
+
 const LoadingPlaceholder = {
   view: () => m("h2", [m("i.icon.icon-loader.spin")]),
 };
@@ -70,6 +75,29 @@ function Chapter(initialVNode) {
   let nextChapterPendingPages = null;
   let nextChapterLoadedPages = [];
 
+  let imgMaxWidth = 100; // in percent
+
+  function onKeyPress(event) {
+    switch (event.keyCode) {
+      case KEYCODE_PLUS:
+        imgMaxWidth += 20;
+        break;
+      case KEYCODE_MINUS:
+        if (imgMaxWidth > 20) imgMaxWidth -= 20;
+        break;
+      case KEYCODE_ZERO:
+        imgMaxWidth = 100;
+        break;
+      case KEYCODE_QUESTION_MARK:
+        window.alert(`Keyboard shortcuts:
+    + to increase page size
+    - to decrease page size
+    0 (zero) to reset page size`);
+        break;
+    }
+    m.redraw();
+  }
+
   function loadNextPage() {
     if (pendingPages.length > 0) {
       let [src, altsrc] = pendingPages.splice(0, 1)[0];
@@ -202,6 +230,12 @@ function Chapter(initialVNode) {
   }
 
   return {
+    oncreate: (vnode) => {
+      document.addEventListener("keypress", onKeyPress);
+    },
+    onremove: (vnode) => {
+      document.removeEventListener("keypress", onKeyPress);
+    },
     oninit: (vnode) => {
       document.title = "Manga chapter";
       site = vnode.attrs.site;
@@ -267,6 +301,7 @@ function Chapter(initialVNode) {
                   style: {
                     display:
                       page.status === ImgStatus.SUCCEEDED ? "block" : "none",
+                    maxWidth: `${imgMaxWidth}%`,
                   },
                   onload: (ev) => {
                     page.status = ImgStatus.SUCCEEDED;