27 lines
1.2 KiB
HTML
27 lines
1.2 KiB
HTML
{#
|
|
Transient success toast.
|
|
|
|
The toast itself is Penguin UI's stacking toast notification, used straight
|
|
from the library — `penguinui-components/toast-notification/`, included
|
|
unmodified by ui/base.html, which is also where the demo trigger buttons that
|
|
ship in that file are dealt with. It listens for a `notify` window event.
|
|
|
|
This file is only the trigger. The library fires `notify` from a button's
|
|
x-on:click; here the server decides, so the trigger is an empty element that
|
|
dispatches the same event as Alpine initialises it. Alpine initialises
|
|
htmx-swapped markup too, so a fragment carrying this shows a toast when it
|
|
lands.
|
|
|
|
{% import "ui/toast.html" as toast %}
|
|
{% call toast::success("Draft updated", message) %}{% endcall %}
|
|
|
|
`title` and `message` travel as data attributes rather than interpolated into
|
|
the JS, because Askama escapes an attribute value correctly and a message
|
|
containing a quote or an apostrophe would otherwise break the expression.
|
|
#}
|
|
{% macro success(title, message) %}
|
|
<div hidden data-title="{{ title }}" data-message="{{ message }}"
|
|
x-data
|
|
x-init="$dispatch('notify', { variant: 'success', title: $el.dataset.title, message: $el.dataset.message })"></div>
|
|
{% endmacro %}
|