From e8c3ec86ae1b87a42975d862e06c51a5bccc67de Mon Sep 17 00:00:00 2001 From: Jake Howard Date: Mon, 4 Jul 2022 22:17:46 +0100 Subject: [PATCH] Have animated scroll on table of contents Animated and offset correctly with hero. Requires some extra JS to keep the height up to date. --- package-lock.json | 11 ++++++++++ package.json | 1 + static/src/js/base.js | 26 +++++++++++++++++++++++ static/src/scss/_bulma_overrides.scss | 2 ++ static/src/scss/_content.scss | 2 +- website/common/templates/common/hero.html | 6 +++--- 6 files changed, 44 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index daaa1b8..a2eae50 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "elevator.js": "^1.0.1", "firacode": "^6.2.0", "lite-youtube-embed": "^0.2.0", + "lodash.debounce": "^4.0.8", "shareon": "^2.0.0" }, "devDependencies": { @@ -1098,6 +1099,11 @@ "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": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz", @@ -2312,6 +2318,11 @@ "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": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz", diff --git a/package.json b/package.json index 4224b70..6690a2d 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "elevator.js": "^1.0.1", "firacode": "^6.2.0", "lite-youtube-embed": "^0.2.0", + "lodash.debounce": "^4.0.8", "shareon": "^2.0.0" } } diff --git a/static/src/js/base.js b/static/src/js/base.js index 93f7c12..f38e446 100644 --- a/static/src/js/base.js +++ b/static/src/js/base.js @@ -1,4 +1,16 @@ 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", () => { 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"); new Elevator({ element: elevatorButton, @@ -23,3 +46,6 @@ window.addEventListener("load", () => { preloadAudio: false, }); }); + +window.addEventListener("resize", debounce(setHeroHeight, 2000)); +window.addEventListener("load", setHeroHeight); diff --git a/static/src/scss/_bulma_overrides.scss b/static/src/scss/_bulma_overrides.scss index 0ed9dc9..329bf45 100644 --- a/static/src/scss/_bulma_overrides.scss +++ b/static/src/scss/_bulma_overrides.scss @@ -3,3 +3,5 @@ $container-max-width: $widescreen; $pre-background: unset; $family-code: "Fira Code", monospace; +$dropdown-content-radius: 0px; +$dropdown-content-offset: 0px; diff --git a/static/src/scss/_content.scss b/static/src/scss/_content.scss index 48a5a34..d2038f4 100644 --- a/static/src/scss/_content.scss +++ b/static/src/scss/_content.scss @@ -8,7 +8,7 @@ section.content { h5, h6 { .heading-anchor { - scroll-margin-top: 160px; // navbar height (ish) + scroll-margin-top: var(--hero-height); // navbar height (ish) margin-right: 0.5rem; } } diff --git a/website/common/templates/common/hero.html b/website/common/templates/common/hero.html index b02ad7d..1ea3fb5 100644 --- a/website/common/templates/common/hero.html +++ b/website/common/templates/common/hero.html @@ -19,16 +19,16 @@