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 14ff204c5ffa669d5a43e9ec2a94fa6edf46f9a4..fec7b570a263cd7875aff05418fb0c71d25e2948 100644 (file)
--- a/common.inc.plp
+++ b/common.inc.plp
@@ -71,8 +71,8 @@ sub stylesheet {
                } or warn "Unable to create style cookie: $@";
        }
 
                } or warn "Unable to create style cookie: $@";
        }
 

-       $style ||= $styles{$_} for $cookie{style} || ();

        my $setstyle = $style;
        my $setstyle = $style;

+       $style ||= $styles{$_} for $cookie{style} || ();

        $style ||= $avail[0];
        return $setstyle;
 }
        $style ||= $avail[0];
        return $setstyle;
 }

diff --git a/prefer.js b/prefer.js
index 2bf092b7e0b2270422f84f2210c014568520763f..6f5c3797bbe209e6b7c61db4c965623cb8cff34a 100644 (file)
--- a/prefer.js
+++ b/prefer.js
@@ -1,14 +1,22 @@
+function setstyle(name, state = true) {
+       document.documentElement.classList.toggle('s-'+name, state);
+}
+

 (function prefstyle() {
 (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;
        }
                return;
        }

+

        new Map([
        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))
        ]).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);

        });
 })();
        });
 })();