08a839c5f5
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 #557 Co-authored-by: rohandebsarkar <rohandebsarkar@gmail.com>
81 lines
2.8 KiB
HTML
81 lines
2.8 KiB
HTML
{% 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 %}
|