allow pinned lines to persist between corpus changes

This commit is contained in:
nate smith 2024-11-03 15:08:31 -06:00
parent 6b43b2f2d9
commit ea16c3ee91
2 changed files with 18 additions and 6 deletions

View File

@ -161,9 +161,8 @@ a {
</p> </p>
</div> </div>
<div class="controls"> <div class="controls">
<form method="GET" action="/" style="display:inline"> <label for="corpus-select">corpus:</label>
<label for="corpus-select">corpus:</label> <select is="corpus-picker" id="corpus-select">
<select name="corpus" id="corpus-select">
{{$selected := .SelectedCorpus}} {{$selected := .SelectedCorpus}}
{{range .Corpora}} {{range .Corpora}}
{{if eq $selected .ID}} {{if eq $selected .ID}}
@ -172,9 +171,7 @@ a {
<option value="{{.ID}}">{{.Name}} ({{.MaxID}} possible lines)</option> <option value="{{.ID}}">{{.Name}} ({{.MaxID}} possible lines)</option>
{{end}} {{end}}
{{end}} {{end}}
</select> </select>
<button type="submit">go</button>
</form>
</div> </div>
<div class="main"> <div class="main">
<div style="margin-bottom: 5px"> <div style="margin-bottom: 5px">

View File

@ -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 pinned = new CustomEvent("pinned", {bubbles: true});
const unpinned = new CustomEvent("unpinned", {bubbles: true}); const unpinned = new CustomEvent("unpinned", {bubbles: true});
const edited = new CustomEvent("edited", {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("about-toggler", AboutToggler, { extends: "a" });
customElements.define("poem-saver", PoemSaver, { extends: "form" }); customElements.define("poem-saver", PoemSaver, { extends: "form" });
customElements.define("theme-toggler", ThemeToggler, { extends: "a" }); customElements.define("theme-toggler", ThemeToggler, { extends: "a" });