From: Mischa POSLAWSKY <perl@shiar.org>
Date: Thu, 29 Aug 2024 13:06:34 +0000 (+0200)
Subject: common: read cookie style preference in javascript
X-Git-Tag: v1.20~11
X-Git-Url: http://git.shiar.net/sheet.git/commitdiff_plain/7d5ce4c5fc31320179bc4837fe0190ef38dab029?ds=sidebyside

common: read cookie style preference in javascript

Only set hardcoded class on direct ?style requests; otherwise apply
client-side so cached pages are updated correctly.
---

diff --git a/common.inc.plp b/common.inc.plp
index 14ff204..fec7b57 100644
--- a/common.inc.plp
+++ b/common.inc.plp
@@ -71,8 +71,8 @@ sub stylesheet {
 		} or warn "Unable to create style cookie: $@";
 	}
 
-	$style ||= $styles{$_} for $cookie{style} || ();
 	my $setstyle = $style;
+	$style ||= $styles{$_} for $cookie{style} || ();
 	$style ||= $avail[0];
 	return $setstyle;
 }
diff --git a/prefer.js b/prefer.js
index 2bf092b..6f5c379 100644
--- a/prefer.js
+++ b/prefer.js
@@ -1,14 +1,22 @@
+function setstyle(name, state = true) {
+	document.documentElement.classList.toggle('s-'+name, state);
+}
+
 (function prefstyle() {
-	docroot = document.documentElement;
-	if (docroot.className) {
+	const cookies = new Map(
+		document.cookie.split(';').map(v => v.trim().split('=', 2))
+	);
+	if ((pref = cookies.get('style'))) {
+		setstyle(pref);
 		return;
 	}
+
 	new Map([
-		['s-mono',   '(monochrome)'],
-		['s-dark',   '(prefers-color-scheme: dark)'],
-		['s-circus', '(prefers-contrast: more)'],
+		['mono',   '(monochrome)'],
+		['dark',   '(prefers-color-scheme: dark)'],
+		['circus', '(prefers-contrast: more)'],
 	]).forEach((q,c) => {
 		if (m = window.matchMedia(q))
-			(m.onchange = e => docroot.classList.toggle(c, e.matches))(m);
+			(m.onchange = e => setstyle(c, e.matches))(m);
 	});
 })();