From 12d19d9e11560b9d5bace2e1bdbf524ef4307e18 Mon Sep 17 00:00:00 2001
From: Shiva Prasad <shivapv@pm.me>
Date: Sun, 2 Jun 2024 21:55:15 +0200
Subject: [PATCH] Auto-hide toolbar only on small touch devices

The toolbar takes up only a small vertical space on larger devices even
in landscape mode; hence, not much space is gained by hiding it.
---
 src/scripts/doqment.css |  9 ++++++++-
 src/scripts/doqment.js  | 13 +++++++++----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/scripts/doqment.css b/src/scripts/doqment.css
index 78c8ea1..1d0f4dc 100644
--- a/src/scripts/doqment.css
+++ b/src/scripts/doqment.css
@@ -4,9 +4,16 @@
   transition-duration: var(--sidebar-transition-duration);
   transition-timing-function: var(--sidebar-transition-timing-function);
 }
-.toolbarHidden :is(#mainContainer, #sidebarContainer) {
+.toolbarHidden:not(.auto) :is(#mainContainer, #sidebarContainer) {
+  /* Toolbar height is fixed at 32px, plus a 1px box-shadow  */
   margin-top: -33px;
 }
+/* Auto-hide only in small devices */
+@media screen and (max-height: 384px) {
+  .toolbarHidden.auto :is(#mainContainer, #sidebarContainer) {
+    margin-top: -33px;
+  }
+}
 /* Reduce toolbar clutter in small devices */
 @media screen and (max-width: 435px) {
   #toolbarViewerLeft > #numPages {
diff --git a/src/scripts/doqment.js b/src/scripts/doqment.js
index 58c9588..87f1749 100644
--- a/src/scripts/doqment.js
+++ b/src/scripts/doqment.js
@@ -49,8 +49,10 @@ const Doqment = {
   },
 
   toggleToolbar() {
-    if (!this.options.autoToolbar)
+    const smallDevice = window.matchMedia("(max-height: 384px)");
+    if (!this.options.autoToolbar || !smallDevice.matches) {
       return;
+    }
     const hideThresh = 50, showThresh = -20;
     const {viewer} = this.config;
     let delta = viewer.scrollTop - this.oldScrollTop;
@@ -60,12 +62,13 @@ const Doqment = {
       this.scrollMark = viewer.scrollTop;
     }
     if (this.scrollMark) {
+      const { viewerClassList } = this.config;
       delta = viewer.scrollTop - this.scrollMark;
       if (delta > hideThresh) {
-        this.config.viewerClassList.add("toolbarHidden");
+        viewerClassList.add("toolbarHidden", "auto");
         this.scrollMark = 0;
       } else if (delta < showThresh) {
-        this.config.viewerClassList.remove("toolbarHidden");
+        viewerClassList.remove("toolbarHidden", "auto");
         this.scrollMark = 0;
       }
     }
@@ -78,7 +81,9 @@ const Doqment = {
         e.target.isContentEditable || modifier)
       return;
     if (e.code === "F3" && !e.shiftKey) {
-      this.config.viewerClassList.toggle("toolbarHidden");
+      const { viewerClassList } = this.config;
+      viewerClassList.toggle("toolbarHidden");
+      viewerClassList.remove("auto");
       e.preventDefault();
     } else if (e.key === "z" || e.key === "Z") {
       this.toggleSmartZoom(e);