Skip to content
Permalink
Browse files

feat: 💄 implement better algorithm for tracking current item

  • Loading branch information
kitos committed Sep 18, 2019
1 parent c9e3ffc commit 9b65639b6e7b2ec0ee83a32f49601767f2371cbc
Showing with 23 additions and 9 deletions.
  1. +23 −9 src/components/blog/blog-post-content.js
@@ -42,24 +42,38 @@ export let BlogPostContent = ({ post: { title, postUrl, headings, html } }) => {
let [activeHeading, setActiveHeading] = useState(null)

useEffect(() => {
let inView = []

let observer = new IntersectionObserver(
elements => {
let inView = elements.filter(
({ isIntersecting, intersectionRatio }) =>
isIntersecting && intersectionRatio >= 0.9
let [enteredView, leftView] = elements.reduce(
([entered, left], { isIntersecting, intersectionRatio, target }) => {
if (isIntersecting && intersectionRatio >= 0.9) {
entered.push(target)
} else {
left.push(target)
}

return [entered, left]
},
[[], []]
)

if (inView[0]) {
setActiveHeading(inView[0].target.id)
inView = [
...inView.filter(({ id, offsetTop }) =>
leftView.every(left => left.id !== id)
),
...enteredView,
].sort(({ offsetTop: a }, { offsetTop: b }) => a - b)

if (inView.length > 0) {
setActiveHeading(inView[0].id)
}
},
{ threshold: 1.0 }
)

;[
...document.querySelectorAll('h2'),
...document.querySelectorAll('h3'),
].forEach(el => observer.observe(el))
document.querySelectorAll('h2,h3').forEach(el => observer.observe(el))

return () => observer.disconnect()
}, [])

0 comments on commit 9b65639

Please sign in to comment.
You can’t perform that action at this time.