Проверка существования уведомления

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

Использование опции id

Каждое уведомление в iziToast может иметь свой уникальный идентификатор через параметр id. Этот идентификатор позволяет не только управлять уведомлением, но и проверять его наличие.

Пример создания уведомления с уникальным id:

iziToast.show({
    title: 'Ошибка',
    message: 'Произошла ошибка при загрузке данных',
    id: 'error-toast',
    color: 'red',
    position: 'topRight',
    timeout: 5000
});

В данном примере id: 'error-toast' позволяет идентифицировать уведомление в любой момент его существования.

Проверка существования уведомления

Чтобы проверить, отображается ли уведомление с заданным идентификатором, используется метод iziToast.get(). Он возвращает массив всех текущих уведомлений, либо конкретное уведомление по id.

Пример:

const existingToast = iziToast.get('error-toast');

if (existingToast) {
    console.log('Уведомление уже отображается');
} else {
    iziToast.show({
        title: 'Ошибка',
        message: 'Произошла ошибка при загрузке данных',
        id: 'error-toast',
        color: 'red',
        position: 'topRight',
        timeout: 5000
    });
}

Пояснение:

  • iziToast.get('error-toast') вернет объект уведомления, если оно активно.
  • Если уведомление с таким id отсутствует, метод возвращает undefined.
  • Это позволяет избежать дублирования уведомлений и улучшить UX.

Удаление уведомления по идентификатору

После проверки существования уведомления можно при необходимости его закрыть с помощью iziToast.destroy():

iziToast.destroy(null, 'error-toast');
  • Первый аргумент null означает, что метод применяется к конкретному уведомлению.
  • Второй аргумент 'error-toast' — идентификатор уведомления, которое нужно удалить.

Это полезно, если требуется обновить уведомление или заменить его новым сообщением.

Комбинация проверки и обновления

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

const toastId = 'info-toast';
if (iziToast.get(toastId)) {
    iziToast.destroy(null, toastId);
}

iziToast.show({
    title: 'Информация',
    message: 'Новое обновление данных успешно выполнено',
    id: toastId,
    color: 'blue',
    position: 'topRight',
    timeout: 4000
});

Такой подход обеспечивает уникальность уведомления и предотвращает накопление дублирующихся тостов на экране.

Практические рекомендации

  • Использовать id для всех критически важных уведомлений — это стандартная практика, позволяющая отслеживать активные сообщения.
  • Не использовать одинаковые id для уведомлений с разными контекстами, чтобы избежать случайного удаления нужного сообщения.
  • Совмещать проверку и удаление при обновлении уведомлений для поддержания чистоты интерфейса.
  • Для динамически создаваемых уведомлений можно формировать id на основе типа сообщения и контекста:
const toastId = `user-${userId}-notification`;

Это позволяет управлять уведомлениями индивидуально для каждого пользователя или элемента интерфейса.

Особенности работы iziToast.get()

  • Метод не ищет уведомления по тексту, только по id.
  • Возвращает только активные уведомления, которые отображаются на экране.
  • Если требуется проверять наличие сообщений до их появления, нужно хранить состояние отдельно (например, в объекте приложения).

Итоговое использование

Комбинируя id, iziToast.get() и iziToast.destroy(), можно построить гибкую систему уведомлений, где каждое сообщение проверяется на существование, обновляется или удаляется по необходимости. Это снижает визуальный шум, улучшает восприятие информации пользователем и обеспечивает точный контроль над уведомлениями.

Оглавление