Получение информации об активных уведомлениях

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

Хранение уведомлений

Все уведомления, созданные через iziToast, могут быть идентифицированы по id. При вызове метода:

iziToast.show({
    title: 'Пример',
    message: 'Текст уведомления',
    id: 'unique_id_1'
});

указывается уникальный идентификатор. Если id не задан, библиотека автоматически генерирует внутренний идентификатор, но для последующего получения информации лучше использовать явный id.

Доступ к активным уведомлениям

IziToast не предоставляет прямого публичного API для получения списка всех текущих уведомлений, но можно использовать внутренние структуры. В частности, библиотека хранит уведомления в DOM-элементах с классом .iziToast. Каждое уведомление добавляется в контейнеры .iziToast-wrapper в зависимости от позиции (topRight, bottomLeft и т.д.).

Пример обхода активных уведомлений:

const activeToasts = document.querySelectorAll('.iziToast');

activeToasts.forEach(toast => {
    console.log('ID уведомления:', toast.getAttribute('data-iziToast-id'));
    console.log('Сообщение:', toast.querySelector('.iziToast-message').innerText);
});

В этом коде:

  • data-iziToast-id — уникальный идентификатор уведомления;
  • .iziToast-message — элемент с текстом уведомления.

Получение уведомления по ID

Для контроля конкретного уведомления используется id. Например, чтобы проверить наличие определённого уведомления:

function isToastActive(id) {
    return !!document.querySelector(`.iziToast[data-iziToast-id="${id}"]`);
}

if (isToastActive('unique_id_1')) {
    console.log('Уведомление активно');
}

Метод возвращает true, если уведомление с указанным id присутствует в DOM, и false — если его нет.

Получение дополнительных данных уведомления

Каждое уведомление может содержать:

  • title — заголовок;
  • message — текст сообщения;
  • icon — иконка;
  • timeout — время жизни уведомления.

Доступ к этим данным возможен через соответствующие DOM-элементы:

const toastElement = document.querySelector('.iziToast[data-iziToast-id="unique_id_1"]');
const title = toastElement.querySelector('.iziToast-title')?.innerText;
const message = toastElement.querySelector('.iziToast-message')?.innerText;
const iconClass = toastElement.querySelector('.iziToast-icon')?.className;

console.log({ title, message, iconClass });

Использование операторов ?. предотвращает ошибки, если некоторые элементы отсутствуют.

Прослушивание событий уведомлений

IziToast предоставляет возможность отслеживания состояния уведомления через события:

iziToast.show({
    title: 'Событие',
    message: 'Тест',
    id: 'event_toast',
    onOpening: function(instance, toast) {
        console.log('Уведомление открывается', toast);
    },
    onClosing: function(instance, toast, closedBy) {
        console.log('Уведомление закрывается', toast, 'Причина:', closedBy);
    }
});
  • onOpening вызывается при начале появления уведомления;
  • onClosing вызывается при закрытии, closedBy показывает причину (button, timeout, click и др.).

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

Для управления уведомлениями полезно:

  1. Присваивать каждому уведомлению уникальный id.
  2. Использовать DOM-селекторы для проверки их наличия.
  3. Применять события onOpening и onClosing для логирования или синхронизации с другими частями приложения.

Итоговая структура активного уведомления

В DOM каждое уведомление имеет вид:

<div class="iziToast" data-iziToast-id="unique_id_1">
    <div class="iziToast-icon"></div>
    <div class="iziToast-body">
        <div class="iziToast-title">Заголовок</div>
        <div class="iziToast-message">Сообщение</div>
    </div>
    <div class="iziToast-close"></div>
</div>

Знание этой структуры позволяет точно получать все данные, управлять их отображением и контролировать активные уведомления через JavaScript.

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

Оглавление