frontend/static/search.js (view raw)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | const search = document.getElementById("search"); const results = document.getElementById("results"); let state = history.state || { url: new URL(location).toJSON(), opened: [], }; let escapePolicy = null; if (window.trustedTypes && trustedTypes.createPolicy) { escapePolicy = trustedTypes.createPolicy("fetch", { createHTML: (string) => string, }); } function detailsToggled(ev) { const nextURL = new URL(location); if (ev.newState == "open" || ev.target.open === true) { state.opened.push(this.id); nextURL.hash = this.id; } else { state.opened = state.opened.filter((x) => x != this.id); nextURL.hash = ""; } state.url = nextURL.toJSON(); history.replaceState(state, "", nextURL); } function addToggleEventListeners() { results.querySelectorAll("details").forEach((details) => // toggle event doesn't bubble :( details.addEventListener("toggle", detailsToggled, { passive: true }), ); } search.addEventListener("submit", function (ev) { const url = new URL(this.action); url.search = new URLSearchParams(new FormData(this)).toString(); fetch(url, { headers: { fetch: "true", }, }) .then(function (res) { state.url = url.toJSON(); state.opened = []; history.pushState(state, null, url); if (res.ok) { return res.text(); } else { throw new Error(res.statusText); } }) .then(function (html) { results.innerHTML = escapePolicy !== null ? escapePolicy.createHTML(html) : html; addToggleEventListeners(); }) .catch(function (error) { console.error("fetch failed", error); }); ev.preventDefault(); }); addToggleEventListeners(); if (state.opened.length > 0) { state.opened.forEach((id) => document.getElementById(id).setAttribute("open", "open"), ); } else if (location.hash) { document.getElementById(location.hash.slice(1)).setAttribute("open", "open"); } addEventListener("popstate", function (ev) { if (ev.state == null || ev.state.url.pathname == "/") { results.replaceChildren(); } }); |