From 97bef9138748114183358110884ab33d28d60148 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yannik=20R=C3=B6del?= <hey@yannik.info>
Date: Sun, 12 Jun 2022 19:19:30 +0200
Subject: [PATCH] Scroll the title element in the tab widget into view after
 switching

---
 assets/main.js            | 20 ++++++++++++++++++++
 includes/layouts/base.njk |  2 ++
 2 files changed, 22 insertions(+)
 create mode 100644 assets/main.js

diff --git a/assets/main.js b/assets/main.js
new file mode 100644
index 0000000..a492f21
--- /dev/null
+++ b/assets/main.js
@@ -0,0 +1,20 @@
+for (const tabLinkElement of document.querySelectorAll(
+	'h2 + .tabs-widget > a[href]'
+)) {
+	const titleElement = tabLinkElement.parentElement.previousElementSibling;
+	tabLinkElement.addEventListener('click', (event) => {
+		event.preventDefault();
+		const hash = tabLinkElement.getAttribute('href');
+		if (history.replaceState) {
+			// This is a weird hack to make sure that the :target selectors actually
+			// get updated:
+			// https://github.com/whatwg/html/issues/639#issuecomment-252716663
+			history.replaceState(null, '', hash);
+			history.pushState(null, '', hash);
+			history.back();
+			titleElement.scrollIntoView(true);
+		} else {
+			location.hash = hash;
+		}
+	});
+}
diff --git a/includes/layouts/base.njk b/includes/layouts/base.njk
index 926680e..dc67760 100644
--- a/includes/layouts/base.njk
+++ b/includes/layouts/base.njk
@@ -100,5 +100,7 @@
 				</div>
 			</div>
 		</footer>
+
+		<script src="/assets/main.js" lang="text/javascript"></script>
 	</body>
 </html>