From ea16c3ee917a9ef958480615f39863a3e43ae18b Mon Sep 17 00:00:00 2001
From: nate smith <nateksmith@pm.me>
Date: Sun, 3 Nov 2024 15:08:31 -0600
Subject: [PATCH] allow pinned lines to persist between corpus changes

---
 templates/index.tmpl |  9 +++------
 web/assets/main.js   | 15 +++++++++++++++
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/templates/index.tmpl b/templates/index.tmpl
index bbbe247..67716c4 100644
--- a/templates/index.tmpl
+++ b/templates/index.tmpl
@@ -161,9 +161,8 @@ a {
     </p>
     </div>
     <div class="controls">
-      <form method="GET" action="/" style="display:inline">
-        <label for="corpus-select">corpus:</label>
-        <select name="corpus" id="corpus-select">
+      <label for="corpus-select">corpus:</label>
+      <select is="corpus-picker" id="corpus-select">
           {{$selected := .SelectedCorpus}}
           {{range .Corpora}}
             {{if eq $selected .ID}}
@@ -172,9 +171,7 @@ a {
               <option value="{{.ID}}">{{.Name}} ({{.MaxID}} possible lines)</option>
             {{end}}
           {{end}}
-        </select>
-        <button type="submit">go</button>
-      </form>
+      </select>
     </div>
     <div class="main">
       <div style="margin-bottom: 5px">
diff --git a/web/assets/main.js b/web/assets/main.js
index cdeb0f8..e089073 100644
--- a/web/assets/main.js
+++ b/web/assets/main.js
@@ -479,9 +479,24 @@ class PoemSaver extends HTMLFormElement {
   }
 }
 
+class CorpusPicker extends HTMLSelectElement {
+  connectedCallback() {
+    if (this.connected) {
+      return;
+    }
+    this.addEventListener("change", (e) => {
+      const params = new URLSearchParams(document.location.search);
+      params.set("corpus", this.value);
+      window.history.replaceState({}, '', `${location.pathname}?${params}`);
+      $("div[is=poem-lines]").regenerate();
+    });
+  }
+}
+
 const pinned = new CustomEvent("pinned", {bubbles: true});
 const unpinned = new CustomEvent("unpinned", {bubbles: true});
 const edited = new CustomEvent("edited", {bubbles: true});
+customElements.define("corpus-picker", CorpusPicker, { extends: "select" });
 customElements.define("about-toggler", AboutToggler, { extends: "a" });
 customElements.define("poem-saver", PoemSaver, { extends: "form" });
 customElements.define("theme-toggler", ThemeToggler, { extends: "a" });