Have animated scroll on table of contents

Animated and offset correctly with hero. Requires some extra JS to keep the height up to date.
This commit is contained in:
Jake Howard 2022-07-04 22:17:46 +01:00
parent 664e59cf37
commit e8c3ec86ae
Signed by: jake
GPG key ID: 57AFB45680EDD477
6 changed files with 44 additions and 4 deletions

11
package-lock.json generated
View file

@ -14,6 +14,7 @@
"elevator.js": "^1.0.1", "elevator.js": "^1.0.1",
"firacode": "^6.2.0", "firacode": "^6.2.0",
"lite-youtube-embed": "^0.2.0", "lite-youtube-embed": "^0.2.0",
"lodash.debounce": "^4.0.8",
"shareon": "^2.0.0" "shareon": "^2.0.0"
}, },
"devDependencies": { "devDependencies": {
@ -1098,6 +1099,11 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
},
"node_modules/memorystream": { "node_modules/memorystream": {
"version": "0.3.1", "version": "0.3.1",
"resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz", "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@ -2312,6 +2318,11 @@
"strip-bom": "^3.0.0" "strip-bom": "^3.0.0"
} }
}, },
"lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
},
"memorystream": { "memorystream": {
"version": "0.3.1", "version": "0.3.1",
"resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz", "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",

View file

@ -26,6 +26,7 @@
"elevator.js": "^1.0.1", "elevator.js": "^1.0.1",
"firacode": "^6.2.0", "firacode": "^6.2.0",
"lite-youtube-embed": "^0.2.0", "lite-youtube-embed": "^0.2.0",
"lodash.debounce": "^4.0.8",
"shareon": "^2.0.0" "shareon": "^2.0.0"
} }
} }

View file

@ -1,4 +1,16 @@
const Elevator = require("elevator.js"); const Elevator = require("elevator.js");
const debounce = require("lodash.debounce");
const HERO = document.querySelector("section.hero");
const ROOT = document.querySelector(":root");
function getHeroHeight() {
return HERO.getBoundingClientRect().height;
}
function setHeroHeight() {
ROOT.style.setProperty("--hero-height", `${getHeroHeight()}px`);
}
window.addEventListener("load", () => { window.addEventListener("load", () => {
const navbarBurger = document.getElementById("navbar-burger"); const navbarBurger = document.getElementById("navbar-burger");
@ -15,6 +27,17 @@ window.addEventListener("load", () => {
}); });
}); });
document.querySelectorAll("#table-of-contents li a").forEach((element) => {
element.addEventListener("click", (event) => {
event.preventDefault();
const rect = document
.querySelector(event.target.hash)
.getBoundingClientRect();
const top = rect.top - getHeroHeight();
window.scrollBy({ top: top, behavior: "smooth" });
});
});
const elevatorButton = document.getElementById("to-top-elevator"); const elevatorButton = document.getElementById("to-top-elevator");
new Elevator({ new Elevator({
element: elevatorButton, element: elevatorButton,
@ -23,3 +46,6 @@ window.addEventListener("load", () => {
preloadAudio: false, preloadAudio: false,
}); });
}); });
window.addEventListener("resize", debounce(setHeroHeight, 2000));
window.addEventListener("load", setHeroHeight);

View file

@ -3,3 +3,5 @@
$container-max-width: $widescreen; $container-max-width: $widescreen;
$pre-background: unset; $pre-background: unset;
$family-code: "Fira Code", monospace; $family-code: "Fira Code", monospace;
$dropdown-content-radius: 0px;
$dropdown-content-offset: 0px;

View file

@ -8,7 +8,7 @@ section.content {
h5, h5,
h6 { h6 {
.heading-anchor { .heading-anchor {
scroll-margin-top: 160px; // navbar height (ish) scroll-margin-top: var(--hero-height); // navbar height (ish)
margin-right: 0.5rem; margin-right: 0.5rem;
} }
} }

View file

@ -19,16 +19,16 @@
</div> </div>
<div class="column is-narrow dropdown-wrapper is-hidden-touch is-grouped"> <div class="column is-narrow dropdown-wrapper is-hidden-touch is-grouped">
{% if page.table_of_contents %} {% if page.table_of_contents %}
<div class="dropdown is-hoverable is-right"> <div class="dropdown is-hoverable is-right" id="table-of-contents">
<div class="dropdown-trigger"> <div class="dropdown-trigger">
<button class="button is-radiusless" aria-haspopup="true" aria-controls="dropdown-menu"> <button class="button is-radiusless" aria-haspopup="true" aria-controls="toc-menu">
<span>Table of Contents</span> <span>Table of Contents</span>
<span class="icon is-small"> <span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i> <i class="fas fa-angle-down" aria-hidden="true"></i>
</span> </span>
</button> </button>
</div> </div>
<div class="dropdown-menu" id="dropdown-menu" role="menu"> <div class="dropdown-menu" id="toc-menu" role="menu">
<div class="dropdown-content menu"> <div class="dropdown-content menu">
<ul class="menu-list"> <ul class="menu-list">
{% for toc_item in page.table_of_contents %} {% for toc_item in page.table_of_contents %}