Advanced Toast Component for Bootstrap 5.3 with dynamic creation, positioning, queueing, and accessibility features.
// Initialize ToastAlerts
const toastAlerts = new ToastAlerts();
// Show a simple toast
toastAlerts.show('Hello, World!');
// Show with options
toastAlerts.show('Success message!', {
type: 'success',
position: 'top-right',
duration: 5000
});// Toast with callbacks
toastAlerts.show('Processing...', {
type: 'info',
persistent: true,
callbacks: {
shown: (toast) => console.log('Toast shown:', toast.id),
hidden: (toast) => console.log('Toast hidden:', toast.id)
}
});
// Update existing toast
const toastId = toastAlerts.show('Loading...');
setTimeout(() => {
toastAlerts.update(toastId, 'Complete!', { type: 'success' });
}, 2000);// Register custom template
toastAlerts.templates.register('custom', `
<div class="toast" role="alert">
<div class="toast-body">
<strong>{{title}}</strong>
<p>{{content}}</p>
</div>
</div>
`);
// Use custom template
toastAlerts.show('Custom content', {
template: 'custom',
title: 'Custom Title'
});// Listen to global events
document.addEventListener('shown.toast-alerts', (e) => {
console.log('Toast shown:', e.detail);
});
document.addEventListener('hidden.toast-alerts', (e) => {
console.log('Toast hidden:', e.detail);
});
// Queue management
document.addEventListener('queueUpdated.toast-alerts', (e) => {
console.log('Queue updated:', e.detail.queue);
});