68 lines
2.7 KiB
JavaScript
68 lines
2.7 KiB
JavaScript
// Вспомогательная функция для показа уведомлений с использованием Bootstrap Toasts
|
|
export function showInfo(message, type = 'info') {
|
|
// Создаем контейнер для тостов если его нет
|
|
let toastContainer = document.getElementById('toast-container');
|
|
if (!toastContainer) {
|
|
toastContainer = document.createElement('div');
|
|
toastContainer.id = 'toast-container';
|
|
toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';
|
|
toastContainer.style.cssText = `
|
|
z-index: 99999;
|
|
max-width: 350px;
|
|
`;
|
|
document.body.appendChild(toastContainer);
|
|
}
|
|
|
|
// Создаем уникальный ID для тоста
|
|
const toastId = 'toast-' + Date.now();
|
|
|
|
// Определяем классы в зависимости от типа
|
|
const typeConfig = {
|
|
'success': { bgClass: 'bg-success', icon: 'bi-check-circle', delay: 5000, textColor: 'text-white' },
|
|
'error': { bgClass: 'bg-danger', icon: 'bi-exclamation-circle', delay: 10000, textColor: 'text-white' },
|
|
'info': { bgClass: 'bg-info', icon: 'bi-info-circle', delay: 3000, textColor: 'text-dark' },
|
|
'warning': { bgClass: 'bg-warning', icon: 'bi-exclamation-triangle', delay: 8000, textColor: 'text-dark' }
|
|
};
|
|
|
|
const config = typeConfig[type] || typeConfig.info;
|
|
|
|
// Создаем тост
|
|
const toast = document.createElement('div');
|
|
toast.className = `toast ${config.bgClass} ${config.textColor} shadow-sm`;
|
|
toast.id = toastId;
|
|
toast.setAttribute('role', 'alert');
|
|
toast.setAttribute('aria-live', 'assertive');
|
|
toast.setAttribute('aria-atomic', 'true');
|
|
|
|
toast.innerHTML = `
|
|
<div class="toast-header ${config.bgClass} ${config.textColor}">
|
|
<i class="bi ${config.icon} me-2"></i>
|
|
<strong class="me-auto">Уведомление</strong>
|
|
<small>Только что</small>
|
|
<button type="button" class="btn-close btn-close-dark" data-bs-dismiss="toast"></button>
|
|
</div>
|
|
<div class="toast-body">
|
|
${message}
|
|
</div>
|
|
`;
|
|
|
|
toastContainer.appendChild(toast);
|
|
|
|
// Инициализируем и показываем тост
|
|
const bsToast = new bootstrap.Toast(toast, {
|
|
animation: true,
|
|
autohide: true,
|
|
delay: config.delay
|
|
});
|
|
|
|
bsToast.show();
|
|
|
|
// Удаляем тост после скрытия
|
|
toast.addEventListener('hidden.bs.toast', function () {
|
|
setTimeout(() => {
|
|
if (toast.parentNode) {
|
|
toast.remove();
|
|
}
|
|
}, 300);
|
|
});
|
|
} |