From e28540aba58bd16dbcaa29e962de46929a354457 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Thu, 10 Sep 2020 17:14:15 +0300
Subject: [PATCH] Scroll navbar when scrolling picker. Fixes #14
---
web/src/index.js | 19 +++++++++++++++++++
1 file changed, 19 insertions(+)
diff --git a/web/src/index.js b/web/src/index.js
index e81bfd1..585d854 100644
--- a/web/src/index.js
+++ b/web/src/index.js
@@ -43,6 +43,8 @@ class App extends Component {
this.sendSticker = this.sendSticker.bind(this)
this.navScroll = this.navScroll.bind(this)
this.reloadPacks = this.reloadPacks.bind(this)
+ this.observeSectionIntersections = this.observeSectionIntersections.bind(this)
+ this.observeImageIntersections = this.observeImageIntersections.bind(this)
}
_getStickersByID(ids) {
@@ -129,15 +131,32 @@ class App extends Component {
}
observeSectionIntersections(intersections) {
+ const navWidth = this.navRef.getBoundingClientRect().width
+ let minX = 0, maxX = navWidth
+ let minXElem = null
+ let maxXElem = null
for (const entry of intersections) {
const packID = entry.target.getAttribute("data-pack-id")
const navElement = document.getElementById(`nav-${packID}`)
if (entry.isIntersecting) {
navElement.classList.add("visible")
+ const bb = navElement.getBoundingClientRect()
+ if (bb.x < minX) {
+ minX = bb.x
+ minXElem = navElement
+ } else if (bb.right > maxX) {
+ maxX = bb.right
+ maxXElem = navElement
+ }
} else {
navElement.classList.remove("visible")
}
}
+ if (minXElem !== null) {
+ minXElem.scrollIntoView({ inline: "start", behavior: "smooth" })
+ } else if (maxXElem !== null) {
+ maxXElem.scrollIntoView({ inline: "end", behavior: "instant" })
+ }
}
componentDidUpdate() {
--
GitLab