Add a progress bar to show the scroll position (alshedivat#934)

cmoralesmx · rohandebsarkar · web-flow · commit 08a839c5f595 · 2022-10-24T15:08:26.000+05:30
This feature adds a horizontal bar under the top menu which tracks the vertical scroll position. Such a feature can be useful to represent how much is left to read on the current page more aesthetically. As this is an optional feature, `enable_progressbar` must be set to `true` in `_config.yml` to activate the functionality. I am not the original author of this code. I just made it compatible with the current version of the template at the time of this commit. The original code was most likely authored by Pankaj Parashar in this [post](https://css-tricks.com/reading-position-indicator/) made a few years before the first inclusion in an `al-folio` site. Then, the code was adapted for compatibility with the template at Anthony Plantanios' site. Finally, I did the last updates to have the code fit the new conventions used in the project. This was discussed in alshedivat#557 Co-authored-by: rohandebsarkar <rohandebsarkar@gmail.com>
diff --git a/_config.yml b/_config.yml
@@ -308,7 +308,7 @@ enable_navbar_social:       false  # enables displaying social links in the
 enable_project_categories:  true   # enables categorization of projects into
                                    # multiple categories
 enable_medium_zoom:         true   # enables image zoom feature (as on medium.com)
-
+enable_progressbar:         false  # enables a horizontal progress bar linked to the vertical scroll position
 
 # -----------------------------------------------------------------------------
 # Library versions
diff --git a/_includes/header.html b/_includes/header.html
@@ -108,4 +108,12 @@
           </div>
         </div>
       </nav>
-    </header>
+{% if site.enable_progressbar %}
+      <!-- Scrolling Progress Bar -->
+      <progress id="progress" value="0">
+        <div class="progress-container">
+          <span class="progress-bar"></span>
+        </div>
+      </progress>
+{%- endif %}
+    </header>
diff --git a/_includes/scripts/progressBar.html b/_includes/scripts/progressBar.html
@@ -0,0 +1,80 @@
+{% if site.enable_progressbar %}
+
+<!-- Scrolling Progress Bar -->
+<script type="text/javascript">
+  /*
+   * This JavaScript code has been adapted from the article 
+   * https://css-tricks.com/reading-position-indicator/ authored by Pankaj Parashar, 
+   * published on the website https://css-tricks.com on the 7th of May, 2014.
+   * Couple of changes were made to the original code to make it compatible 
+   * with the `al-foio` theme.
+   */
+  const progressBar = $("#progress");
+  /*
+   * We set up the bar after all elements are done loading.
+   * In some cases, if the images in the page are larger than the intended
+   * size they'll have on the page, they'll be resized via CSS to accomodate
+   * the desired size. This mistake, however, breaks the computations as the
+   * scroll size is computed as soon as the elements finish loading.
+   * To account for this, a minimal delay was introduced before computing the
+   * values.
+   */
+  window.onload = function () {
+    setTimeout(progressBarSetup, 50);
+  };
+  /*
+   * We set up the bar according to the browser.
+   * If the browser supports the progress element we use that.
+   * Otherwise, we resize the bar thru CSS styling
+   */
+  function progressBarSetup() {
+    if ("max" in document.createElement("progress")) {
+      initializeProgressElement();
+      $(document).on("scroll", function() {
+        progressBar.attr({ value: getCurrentScrollPosition() });
+      });
+      $(window).on("resize", initializeProgressElement);
+    } else {
+      resizeProgressBar();
+      $(document).on("scroll", resizeProgressBar);
+      $(window).on("resize", resizeProgressBar);
+    }
+  }
+  /*
+   * The vertical scroll position is the same as the number of pixels that
+   * are hidden from view above the scrollable area. Thus, a value > 0 is
+   * how much the user has scrolled from the top
+   */
+  function getCurrentScrollPosition() {
+    return $(window).scrollTop();
+  }
+
+  function initializeProgressElement() {
+    let navbarHeight = $("#navbar").outerHeight(true);
+    $("body").css({ "padding-top": navbarHeight });
+    $("progress-container").css({ "padding-top": navbarHeight });
+    progressBar.css({ top: navbarHeight });
+    progressBar.attr({
+      max: getDistanceToScroll(),
+      value: getCurrentScrollPosition(),
+    });
+  }
+  /*
+   * The offset between the html document height and the browser viewport
+   * height will be greater than zero if vertical scroll is possible.
+   * This is the distance the user can scroll
+   */
+  function getDistanceToScroll() {
+    return $(document).height() - $(window).height();
+  }
+
+  function resizeProgressBar() {
+    progressBar.css({ width: getWidthPercentage() + "%" });
+  }
+  // The scroll ratio equals the percentage to resize the bar
+  function getWidthPercentage() {
+    return (getCurrentScrollPosition() / getDistanceToScroll()) * 100;
+  }
+</script>
+
+{%- endif %}
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -30,5 +30,6 @@
     {% include scripts/misc.html %}
     {% include scripts/mathjax.html %}
     {% include scripts/analytics.html %}
+    {% include scripts/progressBar.html %}
   </body>
 </html>
diff --git a/_layouts/distill.html b/_layouts/distill.html
@@ -105,5 +105,6 @@ <h3>Contents</h3>
     
     {% include scripts/bootstrap.html %}
     {% include scripts/analytics.html %}
+    {% include scripts/progressBar.html %}
   </body>
 </html>
diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -656,3 +656,58 @@ html.transition *:after {
     }
   }
 }
+
+progress {
+     /* Positioning */
+     position: fixed;
+     left: 0;
+     top: 56px;
+     z-index: 10;
+   
+     /* Dimensions */
+     width: 100%;
+     height: 5px;
+   
+     /* Reset the appearance */
+     -webkit-appearance: none;
+        -moz-appearance: none;
+             appearance: none;
+   
+     /* Get rid of the default border in Firefox/Opera. */
+     border: none;
+   
+     /* Progress bar container for Firefox/IE10  */
+     background-color: transparent;
+   
+     /* Progress bar value for IE10  */
+     color: var(--global-theme-color);
+ }
+ 
+ progress::-webkit-progress-bar {
+     background-color: transparent;
+ }
+   
+ progress::-webkit-progress-value {
+     background-color: var(--global-theme-color);
+ }
+   
+ progress::-moz-progress-bar {
+     background-color: var(--global-theme-color);
+ }
+ 
+ .progress-container {
+     width: 100%;
+     background-color: transparent;
+     position: fixed;
+     top: 56px;
+     left: 0;
+     height: 5px;
+     display: block;
+ }
+ 
+ .progress-bar {
+     background-color: var(--global-theme-color);
+     width: 0%;
+     display: block;
+     height: inherit;
+ }
