79 lines
3.0 KiB
Plaintext
79 lines
3.0 KiB
Plaintext
{% 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 %}
|