From 797ece883eec522077633d26de81282b37a45b25 Mon Sep 17 00:00:00 2001
From: Michael Fabian 'Xaymar' Dirks <info@xaymar.com>
Date: Thu, 22 Jun 2023 20:57:27 +0200
Subject: [PATCH] Add a hotfix for :has() selector

This hotfix requires not using that selector at all, which worsens the experience in Chrome.
---
 _sass/_block-details.scss | 35 ++++++++++++----------
 assets/site.js            | 61 +++++++--------------------------------
 2 files changed, 31 insertions(+), 65 deletions(-)

diff --git a/_sass/_block-details.scss b/_sass/_block-details.scss
index d5fe213..6647a4c 100644
--- a/_sass/_block-details.scss
+++ b/_sass/_block-details.scss
@@ -16,51 +16,56 @@ details.block > summary {
 	cursor: pointer;
 }
 
-details.block > summary:has(h1),
+/* details.block > summary:has(h1),
 details.block > summary:has(h2),
 details.block > summary:has(h3),
 details.block > summary:has(h4),
 details.block > summary:has(h5),
-details.block > summary:has(h6),
-details.block > summary[data-heading] {
+details.block > summary:has(h6), */
+details.block > summary[data-has~=h1],
+details.block > summary[data-has~=h2],
+details.block > summary[data-has~=h3],
+details.block > summary[data-has~=h4],
+details.block > summary[data-has~=h5],
+details.block > summary[data-has~=h6] {
 	font-variant: small-caps;
 	font-weight: bold;
 	line-height: 1.333em;
 	padding: 0.5rem 0.75rem;
 }
 
-details.block > summary:has(h1),
-details.block > summary[data-heading="1"] {
+/* details.block > summary:has(h1), */
+details.block > summary[data-has~=h1]{
 	font-size: 2.0rem;
 	background: $theme-article-heading-h1-background;
 }
 
-details.block > summary:has(h2),
-details.block > summary[data-heading="2"] {
+/* details.block > summary:has(h2), */
+details.block > summary[data-has~=h2] {
 	font-size: 1.8rem;
 	background: $theme-article-heading-h2-background;
 }
 
-details.block > summary:has(h3),
-details.block > summary[data-heading="3"] {
+/* details.block > summary:has(h3), */
+details.block > summary[data-has~=h3] {
 	font-size: 1.6667rem;
 	background: $theme-article-heading-h3-background;
 }
 
-details.block > summary:has(h4),
-details.block > summary[data-heading="4"] {
+/* details.block > summary:has(h4), */
+details.block > summary[data-has~=h4] {
 	font-size: 1.45rem;
 	background: $theme-article-heading-h4-background;
 }
 
-details.block > summary:has(h5),
-details.block > summary[data-heading="5"] {
+/* details.block > summary:has(h5), */
+details.block > summary[data-has~=h5] {
 	font-size: 1.3333rem;
 	background: $theme-article-heading-h5-background;
 }
 
-details.block > summary:has(h6),
-details.block > summary[data-heading="6"] {
+/* details.block > summary:has(h6), */
+details.block > summary[data-has~=h6] {
 	font-size: 1.2rem;
 	background: $theme-article-heading-h6-background;
 }
diff --git a/assets/site.js b/assets/site.js
index 9196c1c..ddc74db 100644
--- a/assets/site.js
+++ b/assets/site.js
@@ -546,56 +546,6 @@ class XMediaPlayer {
 
 }
 
-/*
-async function xmr_initialize_player(el) {
-
-	let variant = el.querySelector(".variant");
-	{ // Variants
-		variant.update = function () {
-			// Store current state and pause.
-			let paused = this._media.paused;
-			let muted = this._media.muted;
-			let volume = this._media.volume;
-			let time = this._media.currentTime;
-			this._media.pause();
-			play_pause.update();
-
-			// Tell the this._media source to begin loading.
-			this._media.src = variant.value;
-			this._media.load();
-			this._media.currentTime = time;
-
-			this._media.addEventListener("canplay", () => {
-				this._media.currentTime = time;
-				this._media.volume = volume;
-				this._media.muted = muted;
-				if (paused) {
-					this._media.pause();
-				} else {
-					this._media.play();
-				}
-
-				play_pause.update();
-			}, {
-				"once": true
-			})
-		}
-		variant.addEventListener("input", () => { variant.update(); });
-		variant.addEventListener("value", () => { variant.update(); });
-
-		// Variants - Add options from available sources.
-		let sources = el.querySelectorAll("source");
-		for (let k of sources) {
-			let option = document.createElement("option");
-			option.value = k.src;
-			option.textContent = k.title;
-			variant.appendChild(option);
-		}
-		variant.value = this._media.currentSrc;
-	}
-}
-*/
-
 (function () {
 	'use strict';
 
@@ -604,6 +554,17 @@ async function xmr_initialize_player(el) {
 		document.querySelector("#header #navigation").classList.toggle("open");
 	});
 
+	// Shims
+	// - :has() is missing in many browsers.
+	document.querySelectorAll("*").forEach((v, k) => {
+		let s = new Set();
+		for (let c of v.children) {
+			s.add(c.tagName.toLocaleLowerCase());
+		}
+		if (s.size > 0)
+			v.dataset["has"] = Array.from(s.values()).join(" ");
+	});
+
 	// Lazily load this._media
 	xmr_media_lazyload_initialize();