92 lines
2.8 KiB
JavaScript
92 lines
2.8 KiB
JavaScript
/**
|
|
* Toast notification utility
|
|
*/
|
|
|
|
export const showToast = (message, iconClass = 'fa-info-circle', duration = 3000, type = 'info') => {
|
|
const container = document.getElementById('toastContainer');
|
|
if (!container) {
|
|
console.warn('Toast container not found');
|
|
return;
|
|
}
|
|
|
|
// Determine colors and styles based on type
|
|
let bgColor, textColor, iconColor, borderColor;
|
|
|
|
switch (type) {
|
|
case 'success':
|
|
bgColor = '#10b981'; // green-500
|
|
textColor = '#ffffff';
|
|
iconColor = '#ffffff';
|
|
borderColor = '#059669'; // green-600
|
|
break;
|
|
case 'error':
|
|
bgColor = '#ef4444'; // red-500
|
|
textColor = '#ffffff';
|
|
iconColor = '#ffffff';
|
|
borderColor = '#dc2626'; // red-600
|
|
break;
|
|
case 'warning':
|
|
bgColor = '#f59e0b'; // amber-500
|
|
textColor = '#ffffff';
|
|
iconColor = '#ffffff';
|
|
borderColor = '#d97706'; // amber-600
|
|
break;
|
|
case 'info':
|
|
default:
|
|
bgColor = '#3b82f6'; // blue-500
|
|
textColor = '#ffffff';
|
|
iconColor = '#ffffff';
|
|
borderColor = '#2563eb'; // blue-600
|
|
break;
|
|
}
|
|
|
|
const toast = document.createElement('div');
|
|
toast.className = 'toast-message px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 opacity-0 min-w-[300px]';
|
|
toast.style.backgroundColor = bgColor;
|
|
toast.style.color = textColor;
|
|
toast.style.border = `1px solid ${borderColor}`;
|
|
|
|
// Handle icon class - support both old format (just icon name) and new format (full class)
|
|
let fullIconClass = iconClass;
|
|
if (!iconClass.includes(' ')) {
|
|
// Old format: just the icon name like 'fa-check-circle'
|
|
fullIconClass = `fas ${iconClass}`;
|
|
}
|
|
|
|
toast.innerHTML = `
|
|
<i class="${fullIconClass}" style="color: ${iconColor}"></i>
|
|
<span class="flex-1">${message}</span>
|
|
`;
|
|
|
|
// Make toast clickable to dismiss
|
|
toast.style.cursor = 'pointer';
|
|
|
|
container.appendChild(toast);
|
|
|
|
// Trigger fly-in animation
|
|
requestAnimationFrame(() => {
|
|
toast.classList.remove('opacity-0');
|
|
toast.classList.add('opacity-100', 'toast-show');
|
|
});
|
|
|
|
// Function to dismiss the toast
|
|
const dismissToast = () => {
|
|
toast.classList.remove('opacity-100', 'toast-show');
|
|
toast.classList.add('opacity-0');
|
|
setTimeout(() => {
|
|
if (toast.parentNode) {
|
|
toast.parentNode.removeChild(toast);
|
|
}
|
|
}, 300);
|
|
};
|
|
|
|
// Add click handler to dismiss toast
|
|
toast.addEventListener('click', () => {
|
|
clearTimeout(timeoutId);
|
|
dismissToast();
|
|
});
|
|
|
|
// Auto-dismiss after duration
|
|
const timeoutId = setTimeout(dismissToast, duration);
|
|
};
|