43 lines
1.1 KiB
JavaScript
43 lines
1.1 KiB
JavaScript
/**
|
||
* Toast Notification System
|
||
* Usage: Toast.success('Message'), Toast.error('Message'), Toast.info('Message')
|
||
*/
|
||
const Toast = {
|
||
container: null,
|
||
|
||
init() {
|
||
this.container = document.getElementById('toast-container');
|
||
},
|
||
|
||
show(message, type = 'info', duration = 3500) {
|
||
if (!this.container) this.init();
|
||
|
||
const icons = {
|
||
success: '✓',
|
||
error: '✕',
|
||
info: 'ℹ',
|
||
warning: '⚠',
|
||
};
|
||
|
||
const toast = document.createElement('div');
|
||
toast.className = `toast toast-${type}`;
|
||
toast.innerHTML = `
|
||
<span style="font-size:1.1rem;line-height:1;">${icons[type] || ''}</span>
|
||
<span>${message}</span>
|
||
`;
|
||
|
||
this.container.appendChild(toast);
|
||
|
||
// Auto-dismiss
|
||
setTimeout(() => {
|
||
toast.classList.add('toast-exit');
|
||
toast.addEventListener('animationend', () => toast.remove());
|
||
}, duration);
|
||
},
|
||
|
||
success(msg) { this.show(msg, 'success'); },
|
||
error(msg) { this.show(msg, 'error', 5000); },
|
||
info(msg) { this.show(msg, 'info'); },
|
||
warning(msg) { this.show(msg, 'warning', 4000); },
|
||
};
|