34 lines
1.4 KiB
Plaintext
34 lines
1.4 KiB
Plaintext
---
|
|
import { SignedIn } from "@clerk/astro/components";
|
|
---
|
|
<script is:inline>
|
|
const afterUpdate = (e) => {
|
|
const start = document.querySelector('#start');
|
|
if (start) {
|
|
const val = Number(start.value) || 0;
|
|
start.value = (val + 20).toString();
|
|
}
|
|
// delete the triggering element
|
|
if (e && e.detail && e.detail.elt) {
|
|
e.detail.elt.remove();
|
|
}
|
|
};
|
|
const beforeSearch = (e) => {
|
|
const start = document.querySelector('#start');
|
|
if (start) {
|
|
start.value = '0';
|
|
document.querySelector('#cardGrid').innerHTML = '';
|
|
window.scrollTo({ top: 0, behavior: 'instant' });
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<SignedIn>
|
|
<form class="d-flex ms-2" role="search" id="searchform" hx-post="/partials/cards" hx-target="#cardGrid" hx-trigger="load, submit" hx-vals='{"start":"0"}' hx-on--after-request="afterUpdate()" hx-on--before-request="beforeSearch()">
|
|
<input type="hidden" name="start" id="start" value="0" />
|
|
<input type="search" name="q" class="form-control form-control-lg me-2" placeholder="Search cards..." />
|
|
<input type="submit" class="btn btn-outline-light" value="Search" onclick="const q = document.querySelector('[name=q]').value; dataLayer.push({ event: 'view_search_results', search_term: q });"/>
|
|
</form>
|
|
</SignedIn>
|
|
|