Hide topbar when mobile orientation in landscape mode (resolve #459)

_javascript/commons/scroll-helper.js

@@ -0,0 +1,36 @@
+/**
+ * A tool for smooth scrolling and topbar switcher
+ */
+const ScrollHelper = (function () {
+  const $body = $("body");
+  const ATTR_TOPBAR_VISIBLE = "topbar-visible";
+  const topbarHeight = $("#topbar-wrapper").outerHeight();
+
+  let scrollUpCount = 0; // the number of times the scroll up was triggered by ToC or anchor
+  let topbarLocked = false;
+  let orientationLocked = false;
+
+  return {
+    hideTopbar: () => $body.attr(ATTR_TOPBAR_VISIBLE, false),
+    showTopbar: () => $body.attr(ATTR_TOPBAR_VISIBLE, true),
+
+    // scroll up
+
+    addScrollUpTask: () => {
+      scrollUpCount += 1;
+      if (!topbarLocked) { topbarLocked = true; }
+    },
+    popScrollUpTask: () => scrollUpCount -= 1,
+    hasScrollUpTask: () => scrollUpCount > 0,
+    topbarLocked: () => topbarLocked === true,
+    unlockTopbar: () => topbarLocked = false,
+    getTopbarHeight: () => topbarHeight,
+
+    // orientation change
+
+    orientationLocked: () => orientationLocked === true,
+    lockOrientation: () => orientationLocked = true,
+    unLockOrientation: () => orientationLocked = false
+  };
+
+}());

_javascript/commons/topbar-switch.js

@@ -1,70 +0,0 @@
-/*
- * Hide Header on scroll down
- */
-
-$(function() {
-  const $topbarWrapper = $("#topbar-wrapper");
-  const $topbarTitle = $("#topbar-title");
-  const $panel = $("#panel-wrapper");
-  const $searchInput = $("#search-input");
-
-  const CLASS_TOPBAR_UP = "topbar-up";
-  const CLASS_TOPBAR_DOWN = "topbar-down";
-  const ATTR_TOC_SCROLLING_UP = "toc-scrolling-up"; // topbar locked
-
-  let didScroll;
-  let lastScrollTop = 0;
-
-  const delta = $topbarWrapper.outerHeight();
-  const topbarHeight = $topbarWrapper.outerHeight();
-
-  function hasScrolled() {
-    let st = $(this).scrollTop();
-
-    /* Make sure they scroll more than delta */
-    if (Math.abs(lastScrollTop - st) <= delta) {
-      return;
-    }
-
-    if (st > lastScrollTop ) { // Scroll Down
-      if (st > topbarHeight) {
-        $topbarWrapper.removeClass(CLASS_TOPBAR_DOWN).addClass(CLASS_TOPBAR_UP);
-        $panel.removeClass(CLASS_TOPBAR_DOWN);
-
-        if ($searchInput.is(":focus")) {
-          $searchInput.blur(); /* remove focus */
-        }
-      }
-    } else  {// Scroll up
-      // did not reach the bottom of the document, i.e., still have space to scroll up
-      if (st + $(window).height() < $(document).height()) {
-        let tocScrollingUp = $topbarWrapper.attr(ATTR_TOC_SCROLLING_UP);
-        if (typeof tocScrollingUp !== "undefined") {
-          if (tocScrollingUp === "false") {
-            $topbarWrapper.removeAttr(ATTR_TOC_SCROLLING_UP);
-          }
-
-        } else {
-          $topbarWrapper.removeClass(CLASS_TOPBAR_UP).addClass(CLASS_TOPBAR_DOWN);
-          $panel.addClass(CLASS_TOPBAR_DOWN);
-        }
-      }
-    }
-
-    lastScrollTop = st;
-  }
-
-  $(window).scroll(function(event) {
-    if ($topbarTitle.is(":hidden")) {
-      didScroll = true;
-    }
-  });
-
-  setInterval(function() {
-    if (didScroll) {
-      hasScrolled();
-      didScroll = false;
-    }
-  }, 250);
-
-});

_javascript/commons/topbar-switcher.js

@@ -0,0 +1,90 @@
+/*
+ * Hide Header on scroll down
+ */
+
+$(function() {
+  const $searchInput = $("#search-input");
+  const delta = ScrollHelper.getTopbarHeight();
+
+  let didScroll;
+  let lastScrollTop = 0;
+
+  function hasScrolled() {
+    let st = $(this).scrollTop();
+
+    /* Make sure they scroll more than delta */
+    if (Math.abs(lastScrollTop - st) <= delta) {
+      return;
+    }
+
+    if (st > lastScrollTop ) { // Scroll Down
+      ScrollHelper.hideTopbar();
+
+      if ($searchInput.is(":focus")) {
+        $searchInput.blur(); /* remove focus */
+      }
+
+    } else  { // Scroll up
+      // has not yet scrolled to the bottom of the screen, that is, there is still space for scrolling
+      if (st + $(window).height() < $(document).height()) {
+
+        if (ScrollHelper.hasScrollUpTask()) {
+          return;
+        }
+
+        if (ScrollHelper.topbarLocked()) { // avoid redundant scroll up event from smooth scrolling
+          ScrollHelper.unlockTopbar();
+        } else {
+          if (ScrollHelper.orientationLocked()) { // avoid device auto scroll up on orientation change
+            ScrollHelper.unLockOrientation();
+          } else {
+            ScrollHelper.showTopbar();
+          }
+        }
+      }
+    }
+
+    lastScrollTop = st;
+
+  } // hasScrolled()
+
+  function handleLandscape() {
+    if ($(window).scrollTop() === 0) {
+      return;
+    }
+    ScrollHelper.lockOrientation();
+    ScrollHelper.hideTopbar();
+  }
+
+  if (screen.orientation) {
+    screen.orientation.onchange = () => {
+      const type = screen.orientation.type;
+      if (type ===  "landscape-primary" || type === "landscape-secondary") {
+        handleLandscape();
+      }
+    };
+
+  } else {
+    // for the browsers that not support `window.screen.orientation` API
+    $(window).on("orientationchange",() => {
+      if ($(window).width() < $(window).height()) { // before rotating, it is still in portrait mode.
+        handleLandscape();
+      }
+    });
+  }
+
+  $(window).scroll(() => {
+    if (didScroll) {
+      return;
+    }
+    didScroll = true;
+  });
+
+  setInterval(() => {
+    if (didScroll) {
+      hasScrolled();
+      didScroll = false;
+    }
+  }, 250);
+
+});

_javascript/commons/topbar-title.js

@@ -14,17 +14,22 @@ $(function() {
   }
 
   const defaultTitleText = $topbarTitle.text().trim();
-  let titleText = $pageTitle.text().trim();
+  let pageTitleText = $pageTitle.text().trim();
   let hasScrolled = false;
   let lastScrollTop = 0;
 
   if ($("#page-category").length || $("#page-tag").length) {
     /* The title in Category or Tag page will be "<title> <count_of_posts>" */
-    if (/\s/.test(titleText)) {
-      titleText = titleText.replace(/[0-9]/g, "").trim();
+    if (/\s/.test(pageTitleText)) {
+      pageTitleText = pageTitleText.replace(/[0-9]/g, "").trim();
     }
   }
 
+  // When the page is scrolled down and then refreshed, the topbar title needs to be initialized
+  if ($pageTitle.offset().top < $(window).scrollTop()) {
+    $topbarTitle.text(pageTitleText);
+  }
+
   let options = {
     rootMargin: '-48px 0px 0px 0px', // 48px equals to the topbar height (3rem)
     threshold: [0, 1]
@@ -43,7 +48,7 @@ $(function() {
 
     if (isScrollDown) {
       if (heading.intersectionRatio === 0) {
-        $topbarTitle.text(titleText);
+        $topbarTitle.text(pageTitleText);
       }
     } else {
       if (heading.intersectionRatio === 1) {