diff options
author | (quasar) nebula <qznebula@protonmail.com> | 2023-02-28 19:50:01 -0400 |
---|---|---|
committer | (quasar) nebula <qznebula@protonmail.com> | 2023-02-28 19:50:01 -0400 |
commit | 6d8f75dd5873f1427a343971edd0e0ea40b015a5 (patch) | |
tree | 07fbe364b2aae401650fa234b3bba5d30d3b5081 /src/static/client.js | |
parent | 7cb7f029625302dcdc185efa7e0539bb09bfcf2b (diff) |
hash link highlighting & additional skippers
Diffstat (limited to 'src/static/client.js')
-rw-r--r-- | src/static/client.js | 34 |
1 files changed, 34 insertions, 0 deletions
diff --git a/src/static/client.js b/src/static/client.js index 87b74004..4eb1d2ba 100644 --- a/src/static/client.js +++ b/src/static/client.js @@ -452,6 +452,8 @@ function addHashLinkHandlers() { // This lets the scroll offset be consolidated where it makes sense, and // sets an appropriate offset when (re)loading a page with hash for free! + let wasHighlighted; + for (const a of document.links) { const href = a.getAttribute('href'); if (!href || !href.startsWith('#')) { @@ -469,6 +471,17 @@ function addHashLinkHandlers() { const href = evt.target.getAttribute('href'); const id = href.slice(1); const linked = document.getElementById(id); + + if (!linked) { + return; + } + + // Hide skipper box right away, so the layout is updated on time for the + // math operations coming up next. + const skipper = document.getElementById('skippers'); + skipper.style.display = 'none'; + setTimeout(() => skipper.style.display = ''); + const box = linked.getBoundingClientRect(); const style = window.getComputedStyle(linked); @@ -480,6 +493,27 @@ function addHashLinkHandlers() { evt.preventDefault(); history.pushState({}, '', href); window.scrollTo({top: scrollY, behavior: 'smooth'}); + linked.focus({preventScroll: true}); + + const maxScroll = + document.body.scrollHeight + - window.innerHeight; + + if (scrollY > maxScroll && linked.classList.contains('content-heading')) { + if (wasHighlighted) { + wasHighlighted.classList.remove('highlight-hash-link'); + } + + wasHighlighted = linked; + linked.classList.add('highlight-hash-link'); + linked.addEventListener('animationend', function handle(evt) { + if (evt.animationName === 'highlight-hash-link') { + linked.removeEventListener('animationend', handle); + linked.classList.remove('highlight-hash-link'); + wasHighlighted = null; + } + }); + } } } |