Закрытие всех уведомлений

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

Метод iziToast.destroy()

Основным инструментом для закрытия всех уведомлений является статический метод destroy(). Его использование полностью удаляет с DOM все активные уведомления, независимо от их типа, позиции или состояния анимации.

Синтаксис:

iziToast.destroy();

Метод не требует передачи аргументов. Он выполняет следующие действия:

  1. Удаляет все контейнеры уведомлений с DOM.
  2. Прерывает активные анимации закрытия/появления.
  3. Освобождает память, освобождая ссылки на элементы уведомлений.

Пример использования:

// Создание нескольких уведомлений
iziToast.success({
    title: 'Успех',
    message: 'Операция выполнена успешно!'
});

iziToast.info({
    title: 'Информация',
    message: 'Здесь полезное сообщение.'
});

// Закрытие всех уведомлений через 3 секунды
setTimeout(() => {
    iziToast.destroy();
}, 3000);

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

Альтернатива: закрытие уведомлений по селектору контейнера

По умолчанию iziToast создает уведомления в контейнерах с классом iziToast. Можно управлять закрытием уведомлений выборочно, используя методы удаления внутри конкретного контейнера.

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

// Уведомления в верхнем правом углу
iziToast.show({
    title: 'Верхний правый угол',
    message: 'Сообщение',
    position: 'topRight'
});

// Закрытие всех уведомлений в topRight
document.querySelectorAll('.iziToast-wrapper.topRight').forEach(wrapper => {
    wrapper.remove();
});

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

Автоматическое закрытие уведомлений с опцией timeout

Каждое уведомление может быть настроено на автоматическое исчезновение через заданное время. Это не является «закрытием всех уведомлений», но в сочетании с destroy() позволяет гибко управлять их жизненным циклом.

Пример:

iziToast.info({
    title: 'Авто-закрытие',
    message: 'Это уведомление исчезнет через 5 секунд',
    timeout: 5000
});

Использование timeout удобно для уведомлений, которые не требуют немедленного вмешательства пользователя, а массовое закрытие можно оставить для событий, таких как смена страницы или переход между вкладками.

Прерывание текущих уведомлений перед массовым закрытием

Для сложных интерфейсов можно сочетать методы закрытия с опциями анимации, чтобы плавно скрывать уведомления, а затем полностью уничтожать контейнеры.

Пример:

// Плавное скрытие с анимацией fadeOut
iziToast.show({
    title: 'Скрытие',
    message: 'С анимацией',
    transitionOut: 'fadeOut',
    timeout: false
});

// Закрытие всех уведомлений через 2 секунды
setTimeout(() => {
    iziToast.destroy();
}, 2000);

Здесь уведомления сначала анимируются, а затем полностью удаляются методом destroy().

Рекомендации по использованию destroy()

  • Метод подходит для сценариев, когда необходимо мгновенно очистить экран от всех уведомлений.
  • Использовать с осторожностью при частом вызове, чтобы не прерывать важные сообщения пользователя.
  • В сочетании с позиционированием (position) и селекторами контейнеров можно создать гибкую систему управления уведомлениями для различных разделов интерфейса.
  • Хорошо работает вместе с динамическими SPA-приложениями, где при смене маршрута необходимо скрывать все активные уведомления.
Оглавление