From eb6967fdb6b1024598f37ed4e9b1a94079758f5d Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Sat, 5 Sep 2020 18:50:40 +0300
Subject: [PATCH] Add slightly hacky fix for scrolling to pack on Element iOS
 (ref #8)

---
 web/index.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/web/index.js b/web/index.js
index 921c591..1e5c625 100644
--- a/web/index.js
+++ b/web/index.js
@@ -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`
 
 // 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/)
 
 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`
-	<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">
 			<img src=${makeThumbnailURL(pack.stickers[0].url)}
 				 alt=${pack.stickers[0].body} class="visible" />