Логика замещения

Библиотека Noty предоставляет мощный инструмент для создания уведомлений на веб-страницах, позволяя отображать сообщения различного типа, кастомизировать их внешний вид и поведение. В основе работы Noty лежит объект Noty, который создается с набором опций и методом show(), запускающим уведомление.

new Noty({
    text: 'Сообщение успешно отправлено',
    type: 'success',
    layout: 'topRight',
    timeout: 3000
}).show();

Ключевые параметры:

  • text — текст уведомления.
  • type — тип уведомления (alert, success, error, warning, info).
  • layout — позиция на экране (top, topLeft, topRight, bottom, bottomLeft, bottomRight, center).
  • timeout — время отображения в миллисекундах. Установка false делает уведомление постоянным.
  • theme — визуальная тема уведомления (metroui, mint, relax и др.).

Логика замещения уведомлений

Замещение в Noty — это механизм, который позволяет управлять количеством уведомлений на экране и их последовательностью. Если включена логика замещения, новое уведомление может заменить старое или объединиться с ним по определённым правилам.

Для реализации замещения используется параметр queue и методы управления очередью уведомлений:

Noty.overrideDefaults({
    queue: 'global',  // Все уведомления используют одну глобальную очередь
    maxVisible: 3     // Ограничение на количество видимых уведомлений
});
  • queue — позволяет сгруппировать уведомления в отдельные очереди. Замещение происходит только в рамках одной очереди.
  • maxVisible — максимальное количество уведомлений, одновременно отображаемых на экране. Если новое уведомление создается при полном лимите, старейшее скрывается автоматически.

Принципы управления уведомлениями

  1. FIFO-логика: по умолчанию уведомления добавляются в конец очереди и исчезают в том же порядке. Замещение обеспечивает удаление старых элементов при достижении лимита.
  2. Приоритетное замещение: с помощью свойства id можно идентифицировать уведомления и заменить существующее уведомление новым, если id совпадает:
new Noty({
    text: 'Обновление данных...',
    type: 'info',
    id: 'update-noty',
    timeout: 2000
}).show();

// При повторном вызове с таким же id старое уведомление заменяется новым
new Noty({
    text: 'Данные успешно обновлены!',
    type: 'success',
    id: 'update-noty',
    timeout: 2000
}).show();
  1. Удаление конкретного уведомления: метод close() позволяет закрыть уведомление программно:
const myNoty = new Noty({
    text: 'Процесс выполнения...',
    type: 'warning',
    timeout: false
}).show();

myNoty.close(); // Уведомление исчезнет по вызову

Интеграция с событиями

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

  • onShow — срабатывает при отображении уведомления.
  • onClose — вызывается при закрытии уведомления.
  • onClick — событие клика по уведомлению.

Пример использования событий для замещения:

const queue = 'updateQueue';

function showUpdateNoty(message) {
    new Noty({
        text: message,
        type: 'info',
        id: 'update',
        queue: queue,
        maxVisible: 1,
        timeout: 2000,
        callbacks: {
            onClose: function() {
                console.log('Уведомление закрыто');
            }
        }
    }).show();
}

showUpdateNoty('Начало обновления данных...');
showUpdateNoty('Обновление завершено');

В этом примере уведомление с id='update' заменяет предыдущее, благодаря идентификатору и ограничению maxVisible: 1.

Кастомизация замещения

Для сложных сценариев можно использовать комбинацию:

  • killer: true — уничтожает все текущие уведомления при показе нового.
  • addClass и animation — кастомные классы и анимации для выделения замещаемых уведомлений.
new Noty({
    text: 'Важное сообщение!',
    type: 'alert',
    killer: true, // удаляет все текущие уведомления
    layout: 'topRight',
    timeout: 5000,
    animation: {
        open: 'animated bounceInRight',
        close: 'animated bounceOutRight'
    }
}).show();

Практические советы

  • Использовать id для идентификации уведомлений, которые могут заменяться.
  • Ограничивать количество видимых уведомлений через maxVisible, чтобы интерфейс оставался читаемым.
  • Для глобальных уведомлений, где важно отображать только последнее сообщение, применять killer: true.
  • Совмещать замещение с событиями (onShow, onClose) для логики последовательного отображения уведомлений.

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

Оглавление