You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.7 KiB
51 lines
1.7 KiB
import Elementary |
|
import ElementaryHTMX |
|
|
|
// Usage: |
|
// |
|
// let state = try getState(request: req) |
|
// state.toast = ToastState(message: "", title: "", level: ToastState.Level.error) |
|
// throw Abort(.badRequest, headers: ["HX-Trigger": "toast"]) |
|
// |
|
// The header "HX-Trigger" will make the part refresh and show the toast message |
|
|
|
struct ToastComponent: HTML { |
|
|
|
var state: ToastState = ToastState() |
|
|
|
// ------------------------------------- |
|
|
|
var content: some HTML { |
|
div( |
|
.class("toast-container"), .id("cdiv_toast"), |
|
.hx.get("/toast"), |
|
.hx.trigger(HTMLAttributeValue.HTMX.EventTrigger(rawValue: "toast from:body")), |
|
.hx.swap(.outerHTML) |
|
) { |
|
div(.class("toast"), .id("toast")) { |
|
div(.class("toast-header bg-\(state.level.rawValue) text-white")) { |
|
strong(.class("me-auto")) { state.title } |
|
button( |
|
.class("btn-close btn-close-white"), .type(.button), |
|
.data("bs-dismiss", value: "toast") |
|
) {} |
|
} |
|
div(.class("toast-body")) { state.message } |
|
} |
|
if !state.message.isEmpty { |
|
ScriptAfterLoad(initial: false) { |
|
""" |
|
const element = document.getElementById("toast"); |
|
const toast = new bootstrap.Toast(element, { autohide: true, delay: 5000 }); |
|
toast.show(); |
|
|
|
element.addEventListener("hidden.bs.toast", function () { |
|
element.remove(); |
|
}); |
|
""" |
|
} |
|
} |
|
} |
|
} |
|
|
|
}
|
|
|