Integrate <ruby-switch> into the templates

assets/scripts/ruby_switch.js

@@ -1,3 +1,5 @@
+// Eryn Wells <eryn@erynwells.me>
+
 class RubySwitch extends HTMLElement {
     static controlSizeInPixels = 32;
     static thumbTransitionDuration = 0.1;
@@ -11,7 +13,7 @@ class RubySwitch extends HTMLElement {
         {
             id: "ruby-switch-both",
             value: "both",
-            label: "あa",
+            label: "<ruby>あ<rt>a</rt></ruby>",
             default: true
         },
         {
@@ -94,6 +96,9 @@ class RubySwitch extends HTMLElement {
                 z-index: 2;
                 text-align: center;
             }
+
+            #ruby-switch-both {
+            }
         `;
     }
 
@@ -140,7 +145,7 @@ class RubySwitch extends HTMLElement {
             }, { capture: true });
 
             const label = document.createElement("b");
-            label.textContent = desc.label;
+            label.innerHTML = desc.label;
             control.appendChild(label);
         }
 

assets/styles/root/050_ruby_controls.css

@@ -1,29 +1,25 @@
 @layer root {
-    body:has(fieldset#ruby-controls > input[value=NONE]:checked) rt { display: none; }
+    body:has(ruby-switch[value=none]) rt {
+        display: none;
+    }
 
-    /* When ruby-controls is set to hidden, hide the ruby base and only show the <rt> */
+    /* When the ruby switch is set to "hidden", hide the ruby base and only show the <rt>. */
-    body:has(fieldset#ruby-controls > input[value=HIDDEN]:checked) ruby > span { display: none; }
+    body:has(ruby-switch[value=hidden]) ruby > span {
+        display: none;
+    }
 
-    body:has(fieldset#ruby-controls > input[value=HIDDEN]:checked) rt {
+    body:has(ruby-switch[value=hidden]) rt {
         color: inherit;
         display: inline;
         font-size: inherit;
         white-space: inherit;
     }
 
-    body:has(fieldset#ruby-controls > input[value=HIDDEN]:checked) :is(h1, h2, h3, h4, h5, h6) rt {
+    body:has(ruby-switch[value=hidden]) :is(h1, h2, h3, h4, h5, h6) rt {
         font-family: var(--font-family-heading);
         font-weight: bold;
     }
 
-    fieldset#ruby-controls input[type=radio] {
-        margin-inline-end: calc(var(--body-item-spacing) / 6);
-    }
-
-    fieldset#ruby-controls label {
-        margin-inline-end: calc(var(--body-item-spacing));
-    }
-
     rt { transition: color 0.3s; }
     ruby:hover rt { transition: color 0.3s; }
 }

layouts/_default/baseof.html

@@ -30,6 +30,11 @@
   {{ block "scripts" . }}{{ end }}
 
   {{- with partial "resources/site_js.html" . -}}
-  <script type="module" src="{{ .RelPermalink }}"></script>
+  <script type="module" src="{{ .Permalink }}"></script>
+  {{ end }}
+  {{ if .HasShortcode "ruby" }}
+    {{ with partial "resources/script.html" "ruby_switch" }}
+      <script type="module" src="{{ .Permalink }}"></script>
+    {{ end }}
   {{ end }}
 </html>

layouts/partials/resources/script.html

@@ -0,0 +1,2 @@
+{{ $script := resources.Get (printf "scripts/%s.js" .) | fingerprint "md5" }}
+{{ return $script }}

layouts/partials/ruby_controls.html

@@ -1,13 +1,5 @@
 {{ if .HasShortcode "ruby" -}}
 <aside>
-  <fieldset id="ruby-controls">
+  <ruby-switch>
-    <legend>Ruby</legend>
-    <input id="none" type="radio" name="ruby-controls" value="NONE">
-    <label for="none">Japanese Only</label>
-    <input id="both" type="radio" name="ruby-controls" value="BOTH" checked>
-    <label for="both">Both</label>
-    <input id=hidden type=radio name=ruby-controls value=HIDDEN>
-    <label for=hidden>English Only</label>
-  </fieldset>
 </aside>
 {{- end }}