forked from alshedivat/al-folio
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Correcting progressbar following al-folio's alshedivat#934
- Loading branch information
Ana Carolina Richter
authored and
Ana Carolina Richter
committed
Oct 31, 2022
1 parent
cf91c45
commit c77834d
Showing
6 changed files
with
151 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| <!-- [*Edited* on 31.10.2022 following pull request #934] --> | ||
|
|
||
| <header> | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| <!-- [*Added* on 31.10.2022 following pull request #934] --> | ||
|
|
||
|
|
||
| {% 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 %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters