27 lines
1.4 KiB
Plaintext
27 lines
1.4 KiB
Plaintext
{# Returned on its own by GET/POST/DELETE api/bookmark, and included in the
|
|
shell so a normal navigation paints the bookmark without a second request.
|
|
Both paths must produce the same element for the swap to be seamless.
|
|
|
|
outerHTML is the swap, so this element re-declares its own htmx attributes
|
|
every time: the replacement is what receives the next event. hx-target is
|
|
inherited, and the shell points it at #content, so "this" is not the
|
|
default here -- it has to be said.
|
|
|
|
Empty state is d-none, not the hidden attribute: Bootstrap declares
|
|
.d-flex after Reboot's [hidden] rule, both !important and at the same
|
|
specificity, so the utility would win. #}
|
|
<span class="bookmark navbar-text {% if mark %}d-flex{% else %}d-none{% endif %} align-items-center gap-2"
|
|
id="bookmark"
|
|
hx-get="api/bookmark" hx-trigger="bookmark-load from:body"
|
|
hx-target="this" hx-swap="outerHTML">
|
|
{%- if mark %}
|
|
<span class="bookmark-label badge text-bg-secondary">Bookmark</span>
|
|
{# Not boosted: a real navigation lets the browser scroll to the verse
|
|
anchor, which a swap into #content would not do. #}
|
|
<a class="bookmark-link link-light text-truncate" href="{{ mark.href }}"
|
|
hx-boost="false">{{ mark.ref }}</a>
|
|
<button type="button" class="bookmark-clear btn btn-sm btn-outline-light py-0"
|
|
hx-delete="api/bookmark" hx-target="#bookmark" hx-swap="outerHTML">Clear</button>
|
|
{%- endif %}
|
|
</span>
|