stryan/saintnet_stickers
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add slightly hacky fix for scrolling to pack on Element iOS (ref #8)

Browse Source
This commit is contained in:
Tulir Asokan 2020-09-05 18:50:40 +03:00
parent de072dcd81
commit eb6967fdb6
1 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/index.js
View File

@ -16,6 +16,7 @@ let HOMESERVER_URL = "https://matrix-client.matrix.org"
const makeThumbnailURL = mxc => `${HOMESERVER_URL}/_matrix/media/r0/thumbnail/${mxc.substr(6)}?height=128&width=128&method=scale` const makeThumbnailURL = mxc => `${HOMESERVER_URL}/_matrix/media/r0/thumbnail/${mxc.substr(6)}?height=128&width=128&method=scale`
// We need to detect iOS webkit because it has a bug related to scrolling non-fixed divs // We need to detect iOS webkit because it has a bug related to scrolling non-fixed divs
// This is also used to fix scrolling to sections on Element iOS
const isMobileSafari = navigator.userAgent.match(/(iPod|iPhone|iPad)/) && navigator.userAgent.match(/AppleWebKit/) const isMobileSafari = navigator.userAgent.match(/(iPod|iPhone|iPad)/) && navigator.userAgent.match(/AppleWebKit/)
class App extends Component { class App extends Component {
@ -119,8 +120,17 @@ class App extends Component {
} }
} }
// By default we just let the browser handle scrolling to sections, but webviews on Element iOS
// open the link in the browser instead of just scrolling there, so we need to scroll manually:
const scrollToSection = (evt, id) => {
const pack = document.getElementById(`pack-${id}`)
pack.scrollIntoView({ block: "start", behavior: "instant" })
evt.preventDefault()
}
const NavBarItem = ({ pack }) => html` const NavBarItem = ({ pack }) => html`
<a href="#pack-${pack.id}" id="nav-${pack.id}" data-pack-id=${pack.id} title=${pack.title}> <a href="#pack-${pack.id}" id="nav-${pack.id}" data-pack-id=${pack.id} title=${pack.title}
onClick=${isMobileSafari ? (evt => scrollToSection(evt, pack.id)) : undefined}>
<div class="sticker"> <div class="sticker">
<img src=${makeThumbnailURL(pack.stickers[0].url)} <img src=${makeThumbnailURL(pack.stickers[0].url)}
alt=${pack.stickers[0].body} class="visible" /> alt=${pack.stickers[0].body} class="visible" />