83 lines
2.4 KiB
HTML
83 lines
2.4 KiB
HTML
{#
|
|
htmx.trigger("body", "notification", {
|
|
title: "My title",
|
|
level: "error"
|
|
message: "A bad error occured",
|
|
duration: 3000
|
|
})
|
|
# ...or...
|
|
trigger notification(title: 'A title', level: 'success', message: 'A message', duration: 3000)
|
|
#}
|
|
|
|
<div id="notification-container"
|
|
_="
|
|
init
|
|
set $notificationColorMapping to {
|
|
'error': 'notification-error',
|
|
'validationError': 'notification-warning',
|
|
'warning': 'notification-warning',
|
|
'success': 'notification-success',
|
|
'user': 'notification-user',
|
|
'system': 'notification-system'
|
|
}
|
|
end
|
|
|
|
on notification from body
|
|
set notificationData to event.detail
|
|
set locations to notificationData.locations or []
|
|
|
|
if notificationData.level == 'validationError'
|
|
set notificationData.title to 'Data validation failed'
|
|
if length of locations > 0
|
|
if (closest <form/> to event's target)
|
|
repeat for loc in locations
|
|
set list_data to loc.match('(.*)\\.([0-9]+)')
|
|
if list_data
|
|
set list_idx to list_data[2]
|
|
set list_name to list_data[1]
|
|
add [@aria-invalid=true] to (<[name=`${list_name}`]/> in closest <form/> to event's target as Array)[list_idx]
|
|
else
|
|
add [@aria-invalid=true] to <[name=`${loc}`]/> in closest <form/> to event's target
|
|
end
|
|
end
|
|
end
|
|
end
|
|
end
|
|
|
|
render #notification-template with (
|
|
title: notificationData.title,
|
|
message: notificationData.message,
|
|
colorClass: $notificationColorMapping[notificationData.level],
|
|
duration: notificationData.duration or 7000,
|
|
level: notificationData.level
|
|
)
|
|
|
|
put it at end of me
|
|
|
|
end
|
|
"></div>
|
|
|
|
<template id="notification-template">
|
|
<div class="notification ${colorClass}" _="
|
|
init
|
|
wait ${duration}ms
|
|
transition my opacity to 0 over 200ms
|
|
remove me
|
|
end
|
|
on dblclick or removeNotification
|
|
transition my opacity to 0 over 100ms
|
|
remove me
|
|
end
|
|
">
|
|
<span class="notification-title">${title}</span><br>
|
|
@if level is in ['error', 'warning', 'validationError'] set bullet to '❗' end
|
|
@if message is a Array
|
|
@repeat for m in message
|
|
<span class="notification-text">${bullet} ${m}</span><br>
|
|
@end
|
|
@else
|
|
<span class="notification-text">${bullet} ${message}</span><br>
|
|
@end
|
|
</div>
|
|
</template>
|