Обработка закрытия уведомления

Toastify — это легковесная библиотека для создания уведомлений в браузере. Одним из важных аспектов работы с уведомлениями является возможность отслеживания момента их закрытия. Это позволяет выполнять последующие действия, такие как очистка состояния интерфейса, запуск функций или логирование.

События закрытия

Toastify предоставляет два основных способа обработки закрытия уведомления:

  1. Автоматическое закрытие через duration При указании времени жизни уведомления через опцию duration, Toastify автоматически удаляет уведомление после истечения заданного времени. Для выполнения действий после закрытия можно использовать коллбек onClose.

    Toastify({
    text: "Уведомление будет закрыто через 3 секунды",
    duration: 3000,
    close: true,
    gravity: "top",
    position: "right",
    onClose: function() {
        console.log("Уведомление закрыто автоматически");
    }
}).showToast();

    Ключевые моменты:

    • duration задаёт время в миллисекундах, через которое уведомление исчезнет.
    • onClose вызывается один раз после полного закрытия уведомления.

  1. Закрытие пользователем вручную через кнопку При включении опции close: true Toastify добавляет кнопку для ручного закрытия. Коллбек onClose срабатывает как при автоматическом закрытии, так и при нажатии на кнопку.

    Toastify({
    text: "Нажмите крестик для закрытия",
    close: true,
    gravity: "bottom",
    position: "left",
    onClose: function() {
        console.log("Уведомление закрыто пользователем");
    }
}).showToast();

    Особенности ручного закрытия:

    • Пользователь может закрыть уведомление в любой момент до истечения duration.
    • Вызов onClose обеспечивается независимо от способа закрытия.

Использование событий для взаимодействия с интерфейсом

Обработку закрытия уведомлений можно использовать для различных сценариев:

  • Очистка элементов интерфейса Если уведомление отображалось поверх модального окна или формы, onClose позволяет вернуть интерфейс в исходное состояние.

    Toastify({
    text: "Форма успешно отправлена",
    duration: 4000,
    onClose: () => {
        document.getElementById("form").reset();
    }
}).showToast();

  • Логирование действий пользователей Событие закрытия полезно для аналитики — можно отслеживать, сколько уведомлений было закрыто вручную.

    Toastify({
    text: "Событие логируется",
    close: true,
    onClose: () => {
        fetch("/log-toast-close", { method: "POST" });
    }
}).showToast();

  • Последовательное отображение уведомлений Можно использовать onClose для запуска следующего уведомления после закрытия текущего.

    Toastify({
    text: "Первое уведомление",
    duration: 2000,
    onClose: () => {
        Toastify({ text: "Второе уведомление", duration: 2000 }).showToast();
    }
}).showToast();

Управление закрытием через метод hideToast()

Помимо автоматического и ручного закрытия, Toastify позволяет программно закрывать уведомление через метод hideToast().

const toast = Toastify({
    text: "Это уведомление будет закрыто программно",
    close: true,
    duration: 5000,
    onClose: () => {
        console.log("Уведомление закрыто программно");
    }
});

toast.showToast();

// Закрытие через 2 секунды
setTimeout(() => {
    toast.hideToast();
}, 2000);

Преимущества использования hideToast():

  • Полный контроль над временем закрытия уведомления.
  • Возможность динамического реагирования на события в приложении.
  • Совместимость с коллбеком onClose.

Поддержка нескольких уведомлений

При отображении нескольких уведомлений одновременно каждое имеет собственный коллбек onClose. Это позволяет точно управлять состоянием интерфейса для каждого уведомления отдельно.

const firstToast = Toastify({ text: "Первое", duration: 3000, onClose: () => console.log("Первое закрыто") });
const secondToast = Toastify({ text: "Второе", duration: 4000, onClose: () => console.log("Второе закрыто") });

firstToast.showToast();
secondToast.showToast();
  • onClose каждого уведомления срабатывает индивидуально.
  • Можно строить цепочки действий, привязанных к закрытию конкретного уведомления.

Обработка закрытия уведомлений в Toastify — это мощный инструмент для управления пользовательским интерфейсом и взаимодействия с действиями пользователей. Использование опции onClose в сочетании с автоматическим, ручным и программным закрытием позволяет строить гибкую и интерактивную логику.

Оглавление