Группировка связанных уведомлений

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

Основы группировки

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

  • Объединять сообщения одного типа (например, ошибки формы или системные уведомления).
  • Предотвращать дублирование одинаковых уведомлений.
  • Управлять поведением группы уведомлений как единого блока.
new Noty({
    text: 'Ошибка при загрузке файла',
    type: 'error',
    layout: 'topRight',
    timeout: 5000,
    id: 'file-upload-error'
}).show();

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

Использование id для уникальных уведомлений

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

  • Если необходимо заменить существующее уведомление, достаточно создать новый экземпляр с тем же id.
  • Если уведомление с указанным id отсутствует, оно будет создано как новое.
let notification = new Noty({
    text: 'Соединение потеряно',
    type: 'warning',
    layout: 'topRight',
    id: 'connection-status'
}).show();

// Позже обновляем текст уведомления с тем же id
new Noty({
    text: 'Соединение восстановлено',
    type: 'success',
    layout: 'topRight',
    id: 'connection-status'
}).show();

Таким образом, уведомления группируются по идентификатору, и интерфейс не захламляется повторяющимися сообщениями.

Категории и логические группы

Помимо уникальных идентификаторов, полезно создавать логические группы уведомлений. Это можно реализовать через кастомные свойства, например group:

function showNotification(group, text, type = 'alert') {
    new Noty({
        text: text,
        type: type,
        layout: 'topRight',
        timeout: 3000,
        callbacks: {
            onShow: function() {
                console.log(`Показано уведомление группы: ${group}`);
            }
        },
        data: { group: group }
    }).show();
}

showNotification('form-errors', 'Поле Email не заполнено', 'error');
showNotification('form-errors', 'Поле Пароль не заполнено', 'error');

Здесь уведомления объединены логически по группе form-errors. В дальнейшем можно фильтровать или закрывать уведомления по группе.

Массовое закрытие уведомлений группы

Для управления уведомлениями определенной группы удобно хранить их ссылки в массиве:

let notifications = [];

function addGroupedNotification(group, text, type = 'info') {
    let n = new Noty({
        text: text,
        type: type,
        layout: 'topRight',
        timeout: false,
        data: { group: group }
    }).show();

    notifications.push(n);
}

// Закрытие всех уведомлений группы
function closeGroup(group) {
    notifications.forEach(n => {
        if (n.options.data.group === group) {
            n.close();
        }
    });
    // Удаляем закрытые уведомления из массива
    notifications = notifications.filter(n => n.options.data.group !== group);
}

addGroupedNotification('network', 'Сеть недоступна', 'warning');
addGroupedNotification('network', 'Попытка восстановления соединения', 'alert');

// Закрытие всех уведомлений группы 'network'
closeGroup('network');

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

Визуальное объединение уведомлений

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

let container = document.createElement('div');
container.id = 'custom-noty-container';
document.body.appendChild(container);

new Noty({
    text: 'Сначала текст уведомления',
    type: 'info',
    container: container,
    timeout: 4000
}).show();

new Noty({
    text: 'Второе уведомление того же блока',
    type: 'success',
    container: container,
    timeout: 4000
}).show();

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

Сочетание группировки и очереди

Noty поддерживает управление очередью уведомлений через метод queue. В сочетании с группировкой это позволяет:

  • Показать уведомления группы последовательно.
  • Избежать перекрытия сообщений.
  • Обеспечить последовательную подачу информации пользователю.
let queue = new Noty({
    queue: 'system-updates'
});

queue.show();
queue.show();

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

Резюме механизмов группировки

Ключевые инструменты Noty для группировки уведомлений:

  • id — уникальная идентификация уведомления.
  • data или кастомное свойство group — логическая классификация.
  • Массив ссылок на уведомления — контроль закрытия и обновления группы.
  • Общий контейнер container — визуальное объединение блоков.
  • Очереди (queue) — последовательное отображение сообщений.

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

Оглавление