From 84c7c714ed8ee20df34acc771320b3191618feae Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Fri, 21 Oct 2022 11:06:13 -0700
Subject: [PATCH] Use JS to show/hide railroad diagrams based on page width
 (thanks @hober!)

---
 layouts/shortcodes/figures/railroad.html | 15 ++----
 layouts/shortcodes/scripts/railroad.html |  8 +++
 static/scripts/railroad-utils.js         | 63 ++++++++++++++++++++++--
 static/styles/railroad.css               | 10 ++--
 4 files changed, 77 insertions(+), 19 deletions(-)
 create mode 100644 layouts/shortcodes/scripts/railroad.html

diff --git a/layouts/shortcodes/figures/railroad.html b/layouts/shortcodes/figures/railroad.html
index dab4789..ac0c997 100644
--- a/layouts/shortcodes/figures/railroad.html
+++ b/layouts/shortcodes/figures/railroad.html
@@ -1,11 +1,4 @@
-{{ $id := .Get "id" }}
-{{ .Page.Scratch.Set "includes_railroad_diagram" true }}
-<div class="centered">
-    <figure class="railroad-diagram" {{ if $id }}id="{{ $id }}"{{ end }}></figure>
-</div>
-<script defer type="module">
-    import { railroadDiagram } from {{ `/scripts/railroad-utils.js` | relURL }};
-    railroadDiagram(rr => {
-        {{ .Inner | safeJS }}
-    }, "{{ $id }}");
-</script>
+{{- $id := .Get "id" -}}
+{{- .Page.Scratch.Set "includes_railroad_diagram" true -}}
+<figure class="railroad-diagram" {{ if $id }}id="{{ $id }}"{{ end }}></figure>
+{{ .Inner }}
diff --git a/layouts/shortcodes/scripts/railroad.html b/layouts/shortcodes/scripts/railroad.html
new file mode 100644
index 0000000..26a048f
--- /dev/null
+++ b/layouts/shortcodes/scripts/railroad.html
@@ -0,0 +1,8 @@
+{{- $parentID := .Parent.Get "id" -}}
+{{- $narrowOnly := .Get "narrow" }}
+<script defer type="module">
+    import { railroadDiagram } from {{ `/scripts/railroad-utils.js` | relURL }};
+    railroadDiagram(rr => {
+        {{ .Inner | safeJS }}
+    }, "{{ $parentID }}", {{ if $narrowOnly }}true{{ else }}false{{ end }});
+</script>
diff --git a/static/scripts/railroad-utils.js b/static/scripts/railroad-utils.js
index 5271980..6012edb 100644
--- a/static/scripts/railroad-utils.js
+++ b/static/scripts/railroad-utils.js
@@ -1,6 +1,63 @@
 import rr from "./railroad.js";
 
-export function railroadDiagram(builder, elementID) {
-    const diagram = builder(rr);
-    diagram.addTo(document.getElementById(elementID));
+class RailroadDiagramManager {
+    constructor() {
+        this.figures = new Map();
+        this.isCurrentlyNarrow = undefined;
+
+        this.diagramBreakpoint = window.matchMedia("(max-width: 450px)");
+        this.diagramBreakpoint.addEventListener("change", () => {
+            this.updateVisiblity();
+        });
+    }
+
+    add(svg) {
+        const parent = svg.parentElement;
+        if (!this.figures.has(parent)) {
+            this.figures.set(parent, []);
+        }
+
+        this.figures.get(parent).push(svg);
+
+        parent.removeChild(svg);
+    }
+
+    updateVisiblity() {
+        const isNarrow = this.diagramBreakpoint.matches;
+
+        if (isNarrow === this.isCurrentlyNarrow) {
+            return;
+        }
+
+        this.isCurrentlyNarrow = isNarrow;
+
+        for (let [figure, svgs] of this.figures.entries()) {
+            for (let svg of svgs) {
+                const svgHasNarrowClass = svg.classList.contains("narrow");
+                if (isNarrow && svgHasNarrowClass)
+                    figure.appendChild(svg);
+                else if (!isNarrow && !svgHasNarrowClass)
+                    figure.appendChild(svg);
+                else if (svg.parentElement === figure)
+                    figure.removeChild(svg);
+            }
+        }
+    }
 }
+
+let railroadDiagramManager = new RailroadDiagramManager();
+
+export function railroadDiagram(builder, elementID, isNarrow) {
+    const diagram = builder(rr);
+    const svg = diagram.addTo(document.getElementById(elementID));
+
+    if (isNarrow) {
+        svg.classList.add("narrow");
+    }
+
+    railroadDiagramManager.add(svg);
+}
+
+window.addEventListener("DOMContentLoaded", () => {
+    railroadDiagramManager.updateVisiblity();
+});
diff --git a/static/styles/railroad.css b/static/styles/railroad.css
index 99c82aa..da649ad 100644
--- a/static/styles/railroad.css
+++ b/static/styles/railroad.css
@@ -9,7 +9,7 @@
 
 svg.railroad-diagram path {
     stroke-width: 2;
-    stroke: var(--foreground-body-color);
+    stroke: var(--html-color);
     fill: none;
 }
 
@@ -17,7 +17,7 @@ svg.railroad-diagram text {
     font-family: var(--font-family-monospace);
     text-anchor: middle;
     white-space: pre;
-    fill: var(--foreground-body-color);
+    fill: var(--html-color);
 }
 
 svg.railroad-diagram text.diagram-text {
@@ -42,7 +42,7 @@ svg.railroad-diagram g.non-terminal text {
 
 svg.railroad-diagram rect {
     stroke-width: 2;
-    stroke: var(--foreground-body-color);
+    stroke: var(--html-color);
     fill: var(--rect-fill);
 }
 
@@ -54,8 +54,8 @@ svg.railroad-diagram rect.group-box {
 
 svg.railroad-diagram path.diagram-text {
     stroke-width: 2;
-    stroke: var(--foreground-body-color);
-    fill: var(--background-body-color);
+    stroke: var(--html-color);
+    fill: var(--html-background-color);
     cursor: help;
 }