33 lines
1.7 KiB
Plaintext
33 lines
1.7 KiB
Plaintext
{# The navbar's bookmark slot. Rendered into the shell with whatever mark the
|
|
worker holds, and returned on its own by api/bookmark after a write. Both
|
|
paths must produce the same element for the swap to be seamless.
|
|
|
|
mark is null in one case only: boot.html composed this page, so there was
|
|
no worker to ask. The slot is then hidden rather than absent and fetches
|
|
itself once app.js reports a worker is controlling -- which is why the htmx
|
|
attributes are on the empty state and not the filled one. A filled slot is
|
|
only ever replaced by the modal's form, which names #bookmark itself.
|
|
|
|
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-1"
|
|
id="bookmark"
|
|
{%- if not mark %}
|
|
hx-get="api/bookmark" hx-trigger="worker-ready from:body"
|
|
hx-target="this" hx-swap="outerHTML"
|
|
{%- endif %}>
|
|
{%- if mark %}
|
|
{# A word and a colon, not a badge: this is one line of text that happens to
|
|
end in a link, and a pill in front of it read as a control. Outside the
|
|
anchor so that only the reference is underlined -- Reboot underlines an
|
|
<a>, and the label is not the part you can go to. It takes the muted
|
|
navbar colour from .navbar-text on the parent without asking. #}
|
|
<span class="bookmark-label">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>
|
|
{%- endif %}
|
|
</span>
|