Sha256: a1bb857af9e9f4141c083455e1a7bec549512b6c35773c41203269ffb187a9c8
Contents?: true
Size: 1.8 KB
Versions: 4
Compression:
Stored size: 1.8 KB
Contents
<%= pb_rails("button", props: { text: "Show Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close" } }) %> <%= pb_rails("button", props: { text: "Show Closeable Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close-closeable" } }) %> <%= pb_rails("fixed_confirmation_toast", props: { auto_close: 3000, classname: "toast-to-hide", id: "toast-auto-close", text: "I will disappear in 3 seconds.", status: "tip", vertical: "top", horizontal: "center" }) %> <%= pb_rails("fixed_confirmation_toast", props: { auto_close: 10000, closeable: true, id: "toast-auto-close-closeable", text: "I will disappear in 10 seconds.", status: "tip", vertical: "top", horizontal: "center" }) %> <script> document.addEventListener('DOMContentLoaded', () => { // Initialize toast elements and buttons const toasts = { '#toast-auto-close': document.querySelector("#toast-auto-close"), '#toast-auto-close-closeable': document.querySelector("#toast-auto-close-closeable") } const buttons = { '#toast-auto-close': document.querySelector("button[data-toast='#toast-auto-close']"), '#toast-auto-close-closeable': document.querySelector("button[data-toast='#toast-auto-close-closeable']") } // Store original toasts and remove them from DOM const originalToasts = {} Object.entries(toasts).forEach(([id, toast]) => { if (toast) { originalToasts[id] = toast.cloneNode(true) toast.remove() } }) // Set up button click handlers Object.keys(buttons).forEach((toastId) => { const button = buttons[toastId] if (button) { button.onclick = () => { const newToast = originalToasts[toastId].cloneNode(true) newToast.style.display = "flex" document.body.appendChild(newToast) } } }) }) </script>
Version data entries
4 entries across 4 versions & 2 rubygems