Логирование событий

Для начала необходимо подключить библиотеку iziToast в проект. Это можно сделать через CDN или npm:

CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/izitoast/dist/css/iziToast.min.css">
<script src="https://cdn.jsdelivr.net/npm/izitoast/dist/js/iziToast.min.js"></script>

NPM:

npm install izitoast
import iziToast from 'izitoast';
import 'izitoast/dist/css/iziToast.min.css';

После подключения появляется объект iziToast, через который осуществляется полная настройка уведомлений.

Создание уведомлений

Базовая функция для вывода уведомлений:

iziToast.show({
    title: 'Информация',
    message: 'Событие успешно выполнено',
});

Основные параметры метода show:

  • title – заголовок уведомления.
  • message – текст уведомления.
  • timeout – время жизни уведомления в миллисекундах (по умолчанию 5000).
  • position – позиция уведомления на экране (topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter).
  • theme – тема (light, dark).
  • color – цветовая схема (green, red, blue, yellow).
  • icon – иконка уведомления (можно использовать иконки FontAwesome).

Пример уведомления с кастомной позицией и цветом:

iziToast.show({
    title: 'Ошибка',
    message: 'Произошла ошибка при сохранении данных',
    color: 'red',
    position: 'topRight',
    timeout: 7000,
});

Предопределенные типы уведомлений

Для упрощения можно использовать готовые методы:

  • iziToast.success(options) – уведомление об успешном событии.
  • iziToast.error(options) – уведомление об ошибке.
  • iziToast.warning(options) – предупреждение.
  • iziToast.info(options) – информационное сообщение.

Пример:

iziToast.success({
    title: 'Успех',
    message: 'Данные успешно сохранены',
    position: 'bottomLeft'
});

Настройка поведения уведомлений

Закрытие уведомления:

  • close – наличие кнопки закрытия.
  • closeOnEscape – закрытие по клавише Esc.
  • timeout – автозакрытие через указанное время.
iziToast.info({
    title: 'Напоминание',
    message: 'Сессия истекает через 5 минут',
    close: true,
    closeOnEscape: true,
    timeout: 10000
});

Взаимодействие с пользователем:

  • buttons – массив кнопок с действиями.
  • onOpening и onClosing – колбэки при открытии и закрытии уведомления.

Пример с кнопками:

iziToast.show({
    title: 'Подтверждение',
    message: 'Вы хотите удалить этот файл?',
    buttons: [
        ['<button>Да</button>', function(instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
            console.log('Файл удален');
        }],
        ['<button>Нет</button>', function(instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
        }]
    ]
});

Логирование событий с iziToast

Для отслеживания и логирования действий удобно использовать встроенные события:

  • onOpening – вызывается при начале отображения уведомления.
  • onOpened – после того как уведомление полностью показано.
  • onClosing – при начале закрытия уведомления.
  • onClosed – после того как уведомление полностью скрыто.

Пример логирования всех этапов:

iziToast.info({
    title: 'Логирование',
    message: 'Тестовое уведомление',
    onOpening: function(instance, toast) {
        console.log('Открытие уведомления');
    },
    onOpened: function(instance, toast) {
        console.log('Уведомление открыто');
    },
    onClosing: function(instance, toast, closedBy) {
        console.log('Закрытие уведомления, причина:', closedBy);
    },
    onClosed: function(instance, toast, closedBy) {
        console.log('Уведомление закрыто, причина:', closedBy);
    }
});

Здесь параметр closedBy может принимать значения:

  • 'timeout' – автоматическое закрытие по таймауту.
  • 'button' – закрытие кнопкой.
  • 'click' – закрытие при клике на уведомление.
  • 'escape' – закрытие по клавише Esc.

Использование iziToast для системного логирования

Для интеграции с системами логирования можно создавать обертку:

function logEvent(type, title, message) {
    iziToast[type]({
        title: title,
        message: message,
        position: 'topRight',
        timeout: 4000,
        onClosing: function(instance, toast, closedBy) {
            // Отправка информации на сервер
            fetch('/log', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ type, title, message, closedBy })
            });
        }
    });
}

logEvent('success', 'Действие выполнено', 'Пользователь сохранил данные');
logEvent('error', 'Ошибка', 'Не удалось загрузить файл');

Таким образом уведомления не только информируют пользователя, но и автоматически отправляют данные для системного логирования.

Настройка глобальных параметров

Можно задать глобальные значения для всех уведомлений:

iziToast.settings({
    timeout: 5000,
    position: 'topRight',
    transitionIn: 'fadeInDown',
    transitionOut: 'fadeOutUp',
    layout: 2
});

Параметры:

  • timeout – стандартное время показа.
  • position – стандартная позиция.
  • transitionIn и transitionOut – анимации.
  • layout – количество строк текста и расположение иконки.

После глобальной настройки отдельные уведомления могут переопределять эти параметры по необходимости.

Продвинутое использование

Комбинирование уведомлений:

  • Можно выводить несколько уведомлений одновременно, управляя zindex и stack.
iziToast.show({ title: 'Первое', message: 'Сообщение 1', stack: true });
iziToast.show({ title: 'Второе', message: 'Сообщение 2', stack: true });

Использование HTML внутри уведомлений:

iziToast.show({
    title: 'HTML',
    message: '<b>Жирный текст</b> и <i>курсив</i>',
    timeout: 7000
});

Динамическое обновление уведомления:

let toastId = iziToast.info({ title: 'Загрузка', message: '0%', timeout: false });
let progress = 0;

let interval = setInterval(() => {
    progress += 10;
    iziToast.update(toastId, { message: `${progress}%` });
    if(progress >= 100) {
        iziToast.update(toastId, { message: 'Загрузка завершена', timeout: 2000 });
        clearInterval(interval);
    }
}, 500);

Эта техника полезна для отображения прогресса операций и логирования состояния в реальном времени.

Оглавление