Fixed auto-hiding of the toolbar

kiwix · Sep 28, 2022 · 039866a · 039866a
1 parent cdd4a88
commit 039866a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 34 deletions.
diff --git a/static/skin/viewer.js b/static/skin/viewer.js
@@ -152,6 +152,27 @@ function updateSearchBoxForBookChange() {
   }
 }
 
+let previousScrollTop = Infinity;
+
+function updateToolbarVisibilityState() {
+  const iframeDoc = contentIframe.contentDocument;
+  const st = iframeDoc.documentElement.scrollTop || iframeDoc.body.scrollTop;
+  if ( Math.abs(previousScrollTop - st) <= 5 )
+      return;
+
+  const kiwixToolBar = document.querySelector('#kiwixtoolbar');
+
+  if (st > previousScrollTop) {
+      kiwixToolBar.style.position = 'fixed';
+      kiwixToolBar.style.top = '-100%';
+  } else {
+      kiwixToolBar.style.position = 'static';
+      kiwixToolBar.style.top = '0';
+  }
+
+  previousScrollTop = st;
+}
+
 function handle_visual_viewport_change() {
   contentIframe.height = window.visualViewport.height - contentIframe.offsetTop - 4;
 }
@@ -165,6 +186,7 @@ function handle_location_hash_change() {
     contentIframe.contentWindow.location.replace(iframeContentUrl);
   }
   updateSearchBoxForLocationChange();
+  previousScrollTop = Infinity;
 }
 
 function handle_content_url_change() {
@@ -276,39 +298,7 @@ function htmlDecode(input) {
 }
 
 function setupAutoHidingOfTheToolbar() {
-  let lastScrollTop = 0;
-  const delta = 5;
-  let didScroll = false;
-  const kiwixToolBar = document.querySelector('#kiwixtoolbar');
-
-  contentIframe.contentWindow.addEventListener('scroll', () => {
-    didScroll = true;
-  });
-
-  setInterval(function() {
-    if (didScroll) {
-      hasScrolled();
-      didScroll = false;
-    }
-  }, 250);
-
-  function hasScrolled() {
-    const iframeDoc = contentIframe.contentDocument;
-    const st = iframeDoc.documentElement.scrollTop || iframeDoc.body.scrollTop;
-    if (Math.abs(lastScrollTop - st) <= delta)
-        return;
-
-    if (st > lastScrollTop) {
-        kiwixToolBar.style.position = 'fixed';
-        kiwixToolBar.style.top = '-100%';
-    } else {
-        kiwixToolBar.style.position = 'static';
-        kiwixToolBar.style.top = '0';
-    }
-
-    lastScrollTop = st;
-  }
-
+  setInterval(updateToolbarVisibilityState, 250);
 }
 
 function setupSuggestions() {

diff --git a/test/server.cpp b/test/server.cpp
@@ -199,7 +199,7 @@ R"EXPECTEDRESULT(                                <img src="../skin/download.png?
       /* url */ "/ROOT/viewer",
 R"EXPECTEDRESULT(    <link type="text/css" href="./skin/taskbar.css?cacheid=216d6b5d" rel="Stylesheet" />
     <link type="text/css" href="./skin/css/autoComplete.css?cacheid=08951e06" rel="Stylesheet" />
-    <script type="text/javascript" src="./skin/viewer.js?cacheid=17213478" defer></script>
+    <script type="text/javascript" src="./skin/viewer.js?cacheid=51e745c2" defer></script>
     <script type="text/javascript" src="./skin/autoComplete.min.js?cacheid=1191aaaf"></script>
       const blankPageUrl = `${root}/skin/blank.html`;
             <label for="kiwix_button_show_toggle"><img src="./skin/caret.png?cacheid=22b942b4" alt=""></label>