60 lines
1.8 KiB
JavaScript
60 lines
1.8 KiB
JavaScript
/**
|
|
* StreamFlow - Toast Notification Component
|
|
*/
|
|
|
|
const TOAST_DURATION = 4000;
|
|
|
|
/**
|
|
* Show a toast notification
|
|
* @param {string} message - Toast message
|
|
* @param {string} type - Toast type: 'success', 'error', 'info'
|
|
*/
|
|
export function showToast(message, type = 'info') {
|
|
const container = document.getElementById('toastContainer');
|
|
if (!container) return;
|
|
|
|
const toast = document.createElement('div');
|
|
toast.className = `toast toast--${type}`;
|
|
toast.innerHTML = `
|
|
<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
|
|
${getToastIcon(type)}
|
|
</svg>
|
|
<span>${escapeHtml(message)}</span>
|
|
`;
|
|
|
|
container.appendChild(toast);
|
|
|
|
// Auto-remove after duration
|
|
setTimeout(() => {
|
|
toast.style.animation = 'slideIn 0.3s ease reverse';
|
|
setTimeout(() => toast.remove(), 300);
|
|
}, TOAST_DURATION);
|
|
}
|
|
|
|
/**
|
|
* Get icon SVG path for toast type
|
|
* @param {string} type - Toast type
|
|
* @returns {string} SVG path
|
|
*/
|
|
function getToastIcon(type) {
|
|
switch (type) {
|
|
case 'success':
|
|
return '<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>';
|
|
case 'error':
|
|
return '<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>';
|
|
default:
|
|
return '<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Escape HTML special characters
|
|
* @param {string} str - Input string
|
|
* @returns {string} Escaped string
|
|
*/
|
|
function escapeHtml(str) {
|
|
if (!str) return '';
|
|
const div = document.createElement('div');
|
|
div.textContent = str;
|
|
return div.innerHTML;
|
|
}
|