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

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

Настройка максимального числа уведомлений

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

new Noty({
    text: 'Пример уведомления',
    type: 'success',
    maxVisible: 3, // максимум 3 уведомления одновременно
    layout: 'topRight',
    timeout: 3000
}).show();

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

Поведение очереди уведомлений

Noty использует очередь для управления уведомлениями, превышающими maxVisible. Когда количество видимых уведомлений достигает максимума:

  • новые уведомления не отображаются мгновенно, а ставятся в очередь;
  • после закрытия или истечения времени существующих уведомлений, уведомления из очереди появляются автоматически;
  • порядок появления уведомлений соответствует порядку их создания (FIFO — First In, First Out).

Применение глобального ограничения

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

Noty.overrideDefaults({
    maxVisible: 5,
    layout: 'topRight',
    timeout: 4000
});

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

Комбинация с различными типами уведомлений

Ограничение количества видимых уведомлений может применяться как к одному типу уведомлений, так и ко всем одновременно. В Noty каждый тип уведомления (success, error, warning, info) создаёт отдельный контейнер на экране. Таким образом:

  • maxVisible ограничивает количество уведомлений внутри конкретного контейнера;
  • чтобы управлять общим количеством уведомлений всех типов, нужно использовать единый контейнер, либо самостоятельно контролировать создание новых уведомлений через логику приложения.
function showNotification(text, type) {
    if (Noty.getQueue().length < 5) {
        new Noty({
            text: text,
            type: type,
            layout: 'topRight',
            maxVisible: 3,
            timeout: 3000
        }).show();
    }
}

В данном коде выполняется проверка общей очереди уведомлений, предотвращая переполнение интерфейса.

Управление приоритетами и прерывание очереди

Noty позволяет вручную управлять порядком отображения уведомлений. Например, уведомления с критическими сообщениями (error) могут выводиться сразу, независимо от текущего количества видимых уведомлений:

new Noty({
    text: 'Критическая ошибка',
    type: 'error',
    layout: 'topRight',
    maxVisible: 3,
    timeout: false, // останется на экране до ручного закрытия
    killer: true // закроет все предыдущие уведомления перед показом
}).show();

Параметр killer: true завершает показ всех существующих уведомлений в контейнере и отображает новое уведомление сразу. Это особенно полезно для аварийных сообщений, где задержка недопустима.

Динамическое изменение лимита

Иногда требуется изменять maxVisible динамически в зависимости от состояния приложения. Noty предоставляет возможность модифицировать параметры существующих уведомлений через методы экземпляра:

let n = new Noty({
    text: 'Динамическое уведомление',
    type: 'info',
    layout: 'topRight',
    maxVisible: 2
}).show();

// Позже можно увеличить лимит для текущего контейнера
Noty.overrideDefaults({ maxVisible: 4 });

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

Вывод

Контроль количества видимых уведомлений в Noty обеспечивает:

  • чистый и удобочитаемый интерфейс;
  • предотвращение наложения сообщений и перегрузки экрана;
  • гибкую работу с очередями и приоритетами уведомлений.

Использование параметра maxVisible, очереди уведомлений, а также сочетание с killer позволяет создавать продуманный UX даже в сложных веб-приложениях с интенсивной генерацией уведомлений.

Оглавление