infrastructure/matrix-stickers
infrastructure/matrix-stickers
2
0
Fork 0
forked from mirrors/stickerpicker
Code Issues Pull requests Activity

Scroll navbar when scrolling picker. Fixes #14

Browse source
This commit is contained in:
Tulir Asokan 2020-09-10 17:14:15 +03:00
parent 74cd8d82fe
commit e28540aba5
1 changed files with 19 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
web/src/index.js
View file

@ -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() {