80 lines
4.2 KiB
Plaintext
80 lines
4.2 KiB
Plaintext
{# The verse dialog's contents: what this verse is called, a link to it, and
|
|
the one thing you can do with it.
|
|
|
|
Rendered by sw.js for the verse that was clicked and swapped into the empty
|
|
modal-content in base.njk -- the shape htmx's bootstrap-modal example uses.
|
|
Bootstrap owns showing, dismissing, the backdrop and Escape; everything
|
|
here is what is inside.
|
|
|
|
Context: verse (ref, href, url).
|
|
|
|
All three are built in the worker, from the book in the address bar and the
|
|
anchor that was clicked. app.js used to read them off the page -- the book
|
|
out of article[data-name], the chapter out of the enclosing section -- which
|
|
put the reference in two places and left the spelling of an anchor known to
|
|
both the file that generates them and the file that scrapes them back.
|
|
|
|
The link is a field rather than a line of text because it is the fallback
|
|
for the button beside it: navigator.clipboard exists only in a secure
|
|
context, so over plain http:// from a LAN address there is nothing to write
|
|
with and a selected field is the whole of what is left. Readonly, so it
|
|
reads as something to take rather than something to fill in. #}
|
|
<div class="modal-header">
|
|
<h2 class="modal-title fs-5 verse-dialog-ref" id="verse-dialog-ref">{{ verse.ref }}</h2>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<label class="visually-hidden" for="verse-dialog-url">Link to {{ verse.ref }}</label>
|
|
<input class="verse-dialog-url form-control form-control-sm" id="verse-dialog-url"
|
|
type="text" readonly value="{{ verse.url }}">
|
|
</div>
|
|
<div class="modal-footer">
|
|
{# The form is the bookmark write and nothing else. ref and href are hidden
|
|
because they are this dialog's whole subject: the reader chose them by
|
|
clicking a verse, and there is nothing here to edit. #}
|
|
<form class="verse-dialog-actions d-flex flex-wrap gap-2 m-0"
|
|
hx-post="api/bookmark" hx-target="#bookmark" hx-swap="outerHTML">
|
|
<input type="hidden" name="ref" value="{{ verse.ref }}">
|
|
<input type="hidden" name="href" value="{{ verse.href }}">
|
|
{# Selected first, written second: the selection is what makes the field
|
|
useful when the write is refused, and it costs nothing when it is not.
|
|
The toast is only raised once the clipboard has actually taken the link,
|
|
which is why the promise is answered rather than assumed.
|
|
|
|
Both outcomes are a toast, and neither is written here: api/toast is
|
|
asked for one by name, so the wording lives in the worker with the rest
|
|
of the app's words rather than in the middle of an attribute. It is the
|
|
same request the dialog itself arrives on -- htmx, the worker, a
|
|
fragment -- with the container in base.njk as the target.
|
|
|
|
Only a copy that happened ends the dialog. A refused one leaves it
|
|
standing, because the field above it, selected, is the whole of what is
|
|
left to copy with. #}
|
|
<button class="btn btn-outline-secondary" type="button"
|
|
hx-on:click="var button = this;
|
|
var field = document.getElementById('verse-dialog-url');
|
|
var toast = function (say) {
|
|
htmx.ajax('GET', 'api/toast?say=' + say,
|
|
{ target: '#toasts', swap: 'beforeend' });
|
|
};
|
|
var copied = function () {
|
|
toast('copied');
|
|
button.dispatchEvent(
|
|
new CustomEvent('verse-done', { bubbles: true }));
|
|
};
|
|
var refused = function () { toast('copy-refused'); };
|
|
field.focus();
|
|
field.select();
|
|
if (navigator.clipboard) {
|
|
navigator.clipboard.writeText(field.value)
|
|
.then(copied, refused);
|
|
} else if (document.execCommand('copy')) {
|
|
copied();
|
|
} else {
|
|
refused();
|
|
}">Copy link</button>
|
|
<button class="btn btn-primary" type="submit">Set bookmark</button>
|
|
</form>
|
|
</div>
|