Make available rulesets togglable (closes #51)

examples/index.html

@@ -10,13 +10,15 @@
     <meta property="og:url" content="https://gh.steffo.eu/bluelib/examples/index.html" />
     <meta property="og:image" content="../media/opengraph.png" />
     <link rel="icon" type="image/x-icon" href="../favicon.ico">
-    <link rel="stylesheet/less" type="text/css" href="../dist/base.root.less" id="css:base">
+    <link rel="stylesheet/less" type="text/css" href="../dist/base.root.less">
-    <link rel="stylesheet/less" type="text/css" href="../dist/colors-royalblue.root.less" id="css:colors">
+    <link rel="stylesheet/less" type="text/css" href="../dist/colors-royalblue.root.less">
-    <link rel="stylesheet/less" type="text/css" href="../dist/fonts-fira-ghpages.root.less" id="css:fonts">
+    <link rel="stylesheet/less" type="text/css" href="../dist/colors-amber.root.less">
-    <link rel="stylesheet/less" type="text/css" href="../dist/classic.root.less" id="css:classic">
+    <link rel="stylesheet/less" type="text/css" href="../dist/fonts-fira-ghpages.root.less">
-    <link rel="stylesheet/less" type="text/css" href="../dist/glass.root.less" id="css:glass">
+    <link rel="stylesheet/less" type="text/css" href="../dist/classic.root.less">
-    <link rel="stylesheet/less" type="text/css" href="../dist/fun.root.less" id="css:fun">
+    <link rel="stylesheet/less" type="text/css" href="../dist/glass.root.less">
-    <link rel="stylesheet" type="text/css" href="./index.css" id="css:thispage">
+    <link rel="stylesheet/less" type="text/css" href="../dist/fun.root.less">
+    <link rel="stylesheet" type="text/css" href="./index.css">
+    <script src="index.js"></script>
     <script>
         less = {
           env: "development",
@@ -179,35 +181,35 @@
                             The <a href="https://en.wikipedia.org/wiki/Cartesian_product">cartesian product</a> is applied between all <i>rulesets</i> in <code>src/rulesets</code> and all <i>selectorsets</i> in <code>src/selectorsets</code>, compiling a new target for each pair.
                         </p>
                     </section>
-                    <section class="panel box" id="panel-rulesets todo">
+                    <section class="panel box rainbow" id="panel-rulesets todo">
                         <h3>
                             Available rulesets
                         </h3>
                         <dl>
-                            <dt><label class="fade"><input type="checkbox" disabled checked name="ruleset-base"> Base</label></dt>
+                            <dt><label class="fade"><input type="checkbox" disabled checked class="ruleset-toggle" name="ruleset-base" onclick="toggleStyle('less:bluelib-dist-base:root')"> Base</label></dt>
                             <dd>
                                 The base <i>ruleset</i>, providing the layout and basic high contrast theming.
                             </dd>
-                            <dt><label class="fade"><input type="checkbox" disabled checked name="ruleset-classic"> Classic</label></dt>
+                            <dt><label class="fade"><input type="checkbox" disabled checked class="ruleset-toggle" name="ruleset-classic" onclick="toggleStyle('less:bluelib-dist-classic:root')"> Classic</label></dt>
                             <dd>
                                 Inspired by the older Bluelib versions, with semi-transparent panels and rounded borders.
                             </dd>
-                            <dt><label class="fade"><input type="checkbox" disabled checked name="ruleset-glass"> Glass</label></dt>
+                            <dt><label class="fade"><input type="checkbox" disabled checked class="ruleset-toggle" name="ruleset-glass" onclick="toggleStyle('less:bluelib-dist-glass:root')"> Glass</label></dt>
                             <dd>
                                 Made to celebrate the addition of <code>backdrop-filter</code> to Firefox, makes panels have a <q>stained glass</q> background.
                             </dd>
-                            <dt><label class="fade"><input type="checkbox" disabled checked name="ruleset-fun"> Fun</label></dt>
+                            <dt><label class="fade"><input type="checkbox" disabled checked class="ruleset-toggle" name="ruleset-fun" onclick="toggleStyle('less:bluelib-dist-fun:root')"> Fun</label></dt>
                             <dd>
                                 Experimental <i>ruleset</i> with bizzare or buggy but fun rules. Unsupported, do not use in production!
                             </dd>
                             <dt>Colors</dt>
                             <dd>
                                <dl>
-                                   <dt><label class="fade"><input type="radio" disabled checked name="ruleset-colors"> Royal Blue</label></dt>
+                                   <dt><label class="fade"><input type="radio" disabled checked class="ruleset-toggle" name="ruleset-colors" onclick="selectColor('less:bluelib-dist-colors-royalblue:root')"> Royal Blue</label></dt>
                                    <dd>
                                        <a href="https://github.com/Steffo99">Steffo</a>'s signature color theme, based upon RYG⁵'s logo colors.
                                    </dd>
-                                   <dt><label class="fade"><input type="radio" disabled name="ruleset-colors"> Gestione Amber</label></dt>
+                                   <dt><label class="fade"><input type="radio" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor('less:bluelib-dist-colors-amber:root')"> Gestione Amber</label></dt>
                                    <dd>
                                        <a href="https://github.com/Nemesis-FT">Nemesis</a>' own color theme, with a "coffee-like" look.
                                    </dd>

examples/index.js

@@ -0,0 +1,121 @@
+/**
+ * Check if the less compiler is done rendering Less stylesheets into CSS.
+ *
+ * @returns {boolean} `true` if the rendering is complete, `false` otherwise.
+ */
+function isLessDone() {
+    const lessSheets = document.querySelectorAll('link[rel="stylesheet/less"]')
+    const cssSheets = document.querySelectorAll('style')
+
+    return lessSheets.length === cssSheets.length
+}
+
+
+/**
+ * Pause an async function until {@link isLessDone Less is done}.
+ *
+ * @returns {Promise<void>} Awaitable that waits until {@link isLessDone Less is done}.
+ */
+async function sleepUntilLessIsDone() {
+    while(!isLessDone()) {
+        await new Promise(resolve => setTimeout(resolve, 100))
+    }
+}
+
+
+const enabledByDefault = [
+    "less:bluelib-dist-base:root",
+    "less:bluelib-dist-classic:root",
+    "less:bluelib-dist-glass:root",
+    "less:bluelib-dist-fun:root",
+    "less:bluelib-dist-colors-royalblue:root",
+    "less:bluelib-dist-fonts-fira-ghpages:root",
+]
+
+
+let lessStyles = undefined
+let lessColors = undefined
+let lessFonts = undefined
+
+
+async function enableChanges() {
+    await sleepUntilLessIsDone()
+
+    lessStyles = [...document.styleSheets].filter(
+        (s) => s.ownerNode.id.startsWith("less:bluelib-dist")
+    ).map(
+        (s) => ({[s.ownerNode.id]: s})
+    ).reduce(
+        (p, c) => ({...p, ...c}),
+        {}
+    )
+    console.debug("Found Less stylesheets:", lessStyles)
+
+    lessColors = [...document.styleSheets].filter(
+        (s) => s.ownerNode.id.startsWith("less:bluelib-dist-colors")
+    ).map(
+        (s) => ({[s.ownerNode.id]: s})
+    ).reduce(
+        (p, c) => ({...p, ...c}),
+        {}
+    )
+    console.debug("Found Less colors:", lessColors)
+
+    lessFonts = [...document.styleSheets].filter(
+        (s) => s.ownerNode.id.startsWith("less:bluelib-dist-fonts")
+    ).map(
+        (s) => ({[s.ownerNode.id]: s})
+    ).reduce(
+        (p, c) => ({...p, ...c}),
+        {}
+    )
+    console.debug("Found Less fonts:", lessFonts)
+
+    for(const [k, v] of Object.entries(lessStyles)) {
+        v.disabled = !enabledByDefault.includes(k)
+    }
+
+    for(const input of document.querySelectorAll(".ruleset-toggle")) {
+        input.disabled = false
+        input.parentElement.classList.remove("fade")
+    }
+}
+
+
+function toggleStyle(name) {
+    if(lessStyles === undefined) {
+        console.error("Less stylesheets are not yet available.")
+        return
+    }
+
+    const style = lessStyles[name]
+    if(style === undefined) {
+        console.error("No such Less stylesheet.")
+        return
+    }
+
+    style.disabled = !style.disabled
+}
+
+
+function selectColor(name) {
+    if(lessColors === undefined) {
+        console.error("Less stylesheets are not yet available.")
+        return
+    }
+
+    const style = lessStyles[name]
+    if(style === undefined) {
+        console.error("No such Less stylesheet.")
+        return
+    }
+
+    for(const c of Object.values(lessColors)) {
+        c.disabled = true
+    }
+
+    style.disabled = false
+}
+
+
+enableChanges()