Implement taskbar scroll actions in vanilla JS

Completes the porting of remaining jQuery code in taskbar.js - scroll function, blur and focus events and the cybook hack.

static/skin/taskbar.js

@@ -3,6 +3,39 @@ function htmlDecode(input) {
     return doc.documentElement.textContent;
 }
 
+function setupAutoHidingOfTheToolbar() {
+  let lastScrollTop = 0;
+  const delta = 5;
+  let didScroll = false;
+  const kiwixToolBar = document.querySelector('#kiwixtoolbar');
+
+  window.addEventListener('scroll', () => {
+    didScroll = true;
+  });
+
+  setInterval(function() {
+    if (didScroll) {
+      hasScrolled();
+      didScroll = false;
+    }
+  }, 250);
+
+  function hasScrolled() {
+    const st = document.documentElement.scrollTop || document.body.scrollTop;
+    if (Math.abs(lastScrollTop - st) <= delta)
+        return;
+
+    if (st > lastScrollTop) {
+        kiwixToolBar.style.top = '-100%';
+    } else {
+        kiwixToolBar.style.top = '0';
+    }
+
+    lastScrollTop = st;
+  }
+
+}
+
 document.addEventListener('DOMContentLoaded', function () {
   const root = document.querySelector(`link[type='root']`).getAttribute("href");
   const bookName = (window.location.pathname == `${root}/search`)
@@ -64,57 +97,26 @@ document.addEventListener('DOMContentLoaded', function () {
     } catch (err) {}
   });
 
-  /*
+  const kiwixSearchBox = document.querySelector('#kiwixsearchbox');
-        // cybook hack
+  const kiwixSearchForm = document.querySelector('.kiwix_searchform');
-        if (navigator.userAgent.indexOf("bookeen/cybook") != -1) {
+  kiwixSearchBox.addEventListener('focus', () => {
-            $("html").addClass("cybook");
+      kiwixSearchForm.classList.add('full_width');
-        }
+      document.querySelector('label[for="kiwix_button_show_toggle"]').classList.add('searching');
+      document.querySelector('.kiwix_button_cont').classList.add('searching');
+  });
+  kiwixSearchBox.addEventListener('blur', () => {
+      kiwixSearchForm.classList.remove('full_width');
+      document.querySelector('label[for="kiwix_button_show_toggle"]').classList.remove('searching');
+      document.querySelector('.kiwix_button_cont').classList.remove('searching');
+  });
 
-        if ($(window).width() < 520) {
+  // cybook hack
-            var didScroll;
+  if (navigator.userAgent.indexOf("bookeen/cybook") != -1) {
-            var lastScrollTop = 0;
+      document.querySelector('html').classList.add('cybook');
-            var delta = 5;
+  }
-            // on scroll, let the interval function know the user has scrolled
-            $(window).scroll(function (event) {
-                didScroll = true;
-            });
-            // run hasScrolled() and reset didScroll status
-            setInterval(function () {
-                if (didScroll) {
-                    hasScrolled();
-                    didScroll = false;
-                }
-            }, 250);
-            function hasScrolled() {
-                var st = $(this).scrollTop();
 
-                // Make sure they scroll more than delta
+  if (document.body.clientWidth < 520) {
-                if (Math.abs(lastScrollTop - st) <= delta)
+    setupAutoHidingOfTheToolbar();
-                    return;
+  }
   
-                // If they scrolled down and are past the navbar, add class .nav-up.
-                // This is necessary so you never see what is "behind" the navbar.
-                if (st > lastScrollTop) {
-                    // Scroll Down
-                    $('#kiwixtoolbar').css({ top: '-100%' });
-                } else {
-                    // Scroll Up
-                    $('#kiwixtoolbar').css({ top: '0' });
-                }
-    
-                lastScrollTop = st;
-            }
-        }
-    
-        $('#kiwixsearchbox').on({
-            focus: function () {
-                $('.kiwix_searchform').addClass('full_width');
-                $('label[for="kiwix_button_show_toggle"], .kiwix_button_cont').addClass('searching');
-            },
-            blur: function () {
-                $('.kiwix_searchform').removeClass('full_width');
-                $('label[for="kiwix_button_show_toggle"], .kiwix_button_cont').removeClass('searching');
-            }
-        });
-    };*/
 });

test/server.cpp

@@ -199,7 +199,7 @@ R"EXPECTEDRESULT(<link type="root" href="/ROOT"><link type="text/css" href="/ROO
 <link type="text/css" href="/ROOT/skin/css/autoComplete.css?cacheid=08951e06" rel="Stylesheet" />
 <script type="text/javascript" src="/ROOT/skin/jquery-ui/external/jquery/jquery.js?cacheid=1d85f0f3" defer></script>
 <script type="text/javascript" src="/ROOT/skin/jquery-ui/jquery-ui.min.js?cacheid=d927c2ff" defer></script>
-<script type="text/javascript" src="/ROOT/skin/taskbar.js?cacheid=12655f29" defer></script>
+<script type="text/javascript" src="/ROOT/skin/taskbar.js?cacheid=1aec4a68" defer></script>
 <script type="text/javascript" src="/ROOT/skin/autoComplete.min.js?cacheid=1191aaaf"></script>
         <label for="kiwix_button_show_toggle"><img src="/ROOT/skin/caret.png?cacheid=22b942b4" alt=""></label>
 )EXPECTEDRESULT"
@@ -215,7 +215,7 @@ R"EXPECTEDRESULT(    <link type="text/css" href="/ROOT/skin/search_results.css?c
 <link type="text/css" href="/ROOT/skin/css/autoComplete.css?cacheid=08951e06" rel="Stylesheet" />
 <script type="text/javascript" src="/ROOT/skin/jquery-ui/external/jquery/jquery.js?cacheid=1d85f0f3" defer></script>
 <script type="text/javascript" src="/ROOT/skin/jquery-ui/jquery-ui.min.js?cacheid=d927c2ff" defer></script>
-<script type="text/javascript" src="/ROOT/skin/taskbar.js?cacheid=12655f29" defer></script>
+<script type="text/javascript" src="/ROOT/skin/taskbar.js?cacheid=1aec4a68" defer></script>
 <script type="text/javascript" src="/ROOT/skin/autoComplete.min.js?cacheid=1191aaaf"></script>
         <label for="kiwix_button_show_toggle"><img src="/ROOT/skin/caret.png?cacheid=22b942b4" alt=""></label>
 )EXPECTEDRESULT"
@@ -449,7 +449,7 @@ std::string TestContentIn404HtmlResponse::expectedResponse() const
 <link type="text/css" href="/ROOT/skin/css/autoComplete.css?cacheid=08951e06" rel="Stylesheet" />
 <script type="text/javascript" src="/ROOT/skin/jquery-ui/external/jquery/jquery.js?cacheid=1d85f0f3" defer></script>
 <script type="text/javascript" src="/ROOT/skin/jquery-ui/jquery-ui.min.js?cacheid=d927c2ff" defer></script>
-<script type="text/javascript" src="/ROOT/skin/taskbar.js?cacheid=12655f29" defer></script>
+<script type="text/javascript" src="/ROOT/skin/taskbar.js?cacheid=1aec4a68" defer></script>
 <script type="text/javascript" src="/ROOT/skin/autoComplete.min.js?cacheid=1191aaaf"></script>
 </head>
   <body><span class="kiwix">