|
| 1 | +{% if site.enable_progressbar %} |
| 2 | + |
| 3 | +<!-- Scrolling Progress Bar --> |
| 4 | +<script type="text/javascript"> |
| 5 | + /* |
| 6 | + * This JavaScript code has been adapted from the article |
| 7 | + * https://css-tricks.com/reading-position-indicator/ authored by Pankaj Parashar, |
| 8 | + * published on the website https://css-tricks.com on the 7th of May, 2014. |
| 9 | + * Couple of changes were made to the original code to make it compatible |
| 10 | + * with the `al-foio` theme. |
| 11 | + */ |
| 12 | + const progressBar = $("#progress"); |
| 13 | + /* |
| 14 | + * We set up the bar after all elements are done loading. |
| 15 | + * In some cases, if the images in the page are larger than the intended |
| 16 | + * size they'll have on the page, they'll be resized via CSS to accomodate |
| 17 | + * the desired size. This mistake, however, breaks the computations as the |
| 18 | + * scroll size is computed as soon as the elements finish loading. |
| 19 | + * To account for this, a minimal delay was introduced before computing the |
| 20 | + * values. |
| 21 | + */ |
| 22 | + window.onload = function () { |
| 23 | + setTimeout(progressBarSetup, 50); |
| 24 | + }; |
| 25 | + /* |
| 26 | + * We set up the bar according to the browser. |
| 27 | + * If the browser supports the progress element we use that. |
| 28 | + * Otherwise, we resize the bar thru CSS styling |
| 29 | + */ |
| 30 | + function progressBarSetup() { |
| 31 | + if ("max" in document.createElement("progress")) { |
| 32 | + initializeProgressElement(); |
| 33 | + $(document).on("scroll", function() { |
| 34 | + progressBar.attr({ value: getCurrentScrollPosition() }); |
| 35 | + }); |
| 36 | + $(window).on("resize", initializeProgressElement); |
| 37 | + } else { |
| 38 | + resizeProgressBar(); |
| 39 | + $(document).on("scroll", resizeProgressBar); |
| 40 | + $(window).on("resize", resizeProgressBar); |
| 41 | + } |
| 42 | + } |
| 43 | + /* |
| 44 | + * The vertical scroll position is the same as the number of pixels that |
| 45 | + * are hidden from view above the scrollable area. Thus, a value > 0 is |
| 46 | + * how much the user has scrolled from the top |
| 47 | + */ |
| 48 | + function getCurrentScrollPosition() { |
| 49 | + return $(window).scrollTop(); |
| 50 | + } |
| 51 | + |
| 52 | + function initializeProgressElement() { |
| 53 | + let navbarHeight = $("#navbar").outerHeight(true); |
| 54 | + $("body").css({ "padding-top": navbarHeight }); |
| 55 | + $("progress-container").css({ "padding-top": navbarHeight }); |
| 56 | + progressBar.css({ top: navbarHeight }); |
| 57 | + progressBar.attr({ |
| 58 | + max: getDistanceToScroll(), |
| 59 | + value: getCurrentScrollPosition(), |
| 60 | + }); |
| 61 | + } |
| 62 | + /* |
| 63 | + * The offset between the html document height and the browser viewport |
| 64 | + * height will be greater than zero if vertical scroll is possible. |
| 65 | + * This is the distance the user can scroll |
| 66 | + */ |
| 67 | + function getDistanceToScroll() { |
| 68 | + return $(document).height() - $(window).height(); |
| 69 | + } |
| 70 | + |
| 71 | + function resizeProgressBar() { |
| 72 | + progressBar.css({ width: getWidthPercentage() + "%" }); |
| 73 | + } |
| 74 | + // The scroll ratio equals the percentage to resize the bar |
| 75 | + function getWidthPercentage() { |
| 76 | + return (getCurrentScrollPosition() / getDistanceToScroll()) * 100; |
| 77 | + } |
| 78 | +</script> |
| 79 | + |
| 80 | +{%- endif %} |
0 commit comments