38 lines
2.0 KiB
Plaintext
38 lines
2.0 KiB
Plaintext
{{- /*gotype: assistant/components.Toast*/ -}}
|
|
{{ define "toast" }}
|
|
<div class="toastComponent {{ .ToastPosition }} transition-opacity fixed flex items-center w-full max-w-xs p-4 space-x-4 text-gray-500 bg-white divide-x rtl:divide-x-reverse divide-gray-200 rounded-lg shadow dark:text-gray-400 dark:divide-gray-700 dark:bg-gray-800" role="alert">
|
|
<div class="text-sm font-normal">
|
|
{{ .Label }}
|
|
</div>
|
|
<div class="flex items-center ms-auto space-x-2 rtl:space-x-reverse">
|
|
<a class="toastClose text-sm font-medium text-blue-600 p-1.5 hover:bg-blue-100 rounded-lg dark:text-blue-500 dark:hover:bg-gray-700"
|
|
hx-post="{{ .Url }}" href="#"
|
|
{{ if .HasTarget }} hx-target="{{ .Target }}" {{ end }}
|
|
>{{.LinkLabel}}</a>
|
|
<button type="button" class="toastClose ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#archiveToast" aria-label="Close">
|
|
<span class="sr-only">Close</span>
|
|
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function hideToast() {
|
|
document.querySelectorAll('.toastComponent').forEach(function (element) {
|
|
element.style.display = 'none';
|
|
});
|
|
}
|
|
|
|
document.querySelectorAll('.toastClose').forEach(function (element) {
|
|
element.addEventListener('click', function () {
|
|
hideToast();
|
|
});
|
|
});
|
|
|
|
setTimeout(() => {
|
|
hideToast();
|
|
}, ({{or .TimeoutMs 5000}}));
|
|
</script>
|
|
{{ end }}
|