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

Version Path
playbook_ui_docs-14.12.0.pre.alpha.PBNTR456fixedconftoastrailsautoclose5757 app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb
playbook_ui-14.12.0.pre.alpha.PBNTR456fixedconftoastrailsautoclose5757 app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb
playbook_ui_docs-14.12.0.pre.alpha.PBNTR456fixedconftoastrailsautoclose5754 app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb
playbook_ui-14.12.0.pre.alpha.PBNTR456fixedconftoastrailsautoclose5754 app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb