Управление порядком отображения

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

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

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

new Noty({
    text: 'Первое уведомление',
    type: 'alert',
    queue: 'mainQueue'
}).show();

new Noty({
    text: 'Второе уведомление',
    type: 'success',
    queue: 'mainQueue'
}).show();

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

new Noty({
    text: 'Сообщение ошибки',
    type: 'error',
    queue: 'errorQueue'
}).show();

new Noty({
    text: 'Сообщение успеха',
    type: 'success',
    queue: 'successQueue'
}).show();

Позиционирование уведомлений

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

  • topLeft
  • topCenter
  • topRight
  • bottomLeft
  • bottomCenter
  • bottomRight
  • center

Параметр layout задаёт положение уведомления, а killer и modal помогают управлять конфликтами при одновременном показе нескольких сообщений.

new Noty({
    text: 'Центральное уведомление',
    layout: 'center',
    type: 'info'
}).show();

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

Контроль перекрытия уведомлений

Для предотвращения наложения сообщений используется опция killer. Если указать killer: true, все уведомления в той же позиции будут закрыты перед показом нового:

new Noty({
    text: 'Это уведомление закроет все предыдущие',
    type: 'warning',
    killer: true
}).show();

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

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

Noty предоставляет методы для динамического управления очередью и порядком отображения:

  • show() — добавляет уведомление в очередь и отображает его при возможности.
  • close() — закрывает конкретное уведомление и освобождает место для следующих в очереди.
  • stop() — останавливает автоматическое закрытие уведомления и удерживает его на экране.
  • setTimeout(time) — позволяет изменить время отображения уведомления после его создания.
let n = new Noty({
    text: 'Отложенное уведомление',
    timeout: 5000
});

n.show();
n.setTimeout(10000); // продлеваем показ до 10 секунд

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

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

function showNotification(text, type, priority = 'normal') {
    const queueName = priority === 'high' ? 'highQueue' : 'normalQueue';
    new Noty({ text, type, queue: queueName }).show();
}

showNotification('Обычное сообщение', 'info');
showNotification('Важное сообщение', 'error', 'high');

Интеграция с динамическими интерфейсами

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

document.getElementById('saveBtn').addEventListener('click', () => {
    new Noty({
        text: 'Данные успешно сохранены',
        type: 'success',
        queue: 'mainQueue'
    }).show();
});

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

Вывод

Гибкая система очередей, возможности позиционирования, контроль перекрытия через killer и методы управления порядком делают Noty мощным инструментом для управления уведомлениями. Сочетание этих возможностей позволяет создавать как простые последовательные уведомления, так и сложные системы приоритетного отображения сообщений.

Оглавление