Цепочка уведомлений

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

Создание последовательности уведомлений

Для начала необходимо создать несколько экземпляров Noty и выстроить их в цепочку с использованием колбэков. Каждый уведомление можно создавать через конструктор new Noty({...}), где передаются параметры:

const notification1 = new Noty({
    text: 'Первое уведомление',
    type: 'alert',
    timeout: 2000,
    callbacks: {
        onClose: () => notification2.show()
    }
});

const notification2 = new Noty({
    text: 'Второе уведомление',
    type: 'success',
    timeout: 2000,
    callbacks: {
        onClose: () => notification3.show()
    }
});

const notification3 = new Noty({
    text: 'Третье уведомление',
    type: 'info',
    timeout: 2000
});

notification1.show();

В этом примере уведомления показываются последовательно: закрытие первого автоматически вызывает показ второго, а второго — третьего.

Ключевой момент: метод show() запускает отображение уведомления, а обработчик onClose позволяет инициировать следующую ноту.

Использование очереди Noty

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

Noty.overrideDefaults({
    layout: 'topRight',
    theme: 'mint'
});

const queue = new Noty.Queue({ maxVisible: 1 });

queue.add(new Noty({ text: 'Уведомление 1', type: 'alert', timeout: 2000 }));
queue.add(new Noty({ text: 'Уведомление 2', type: 'success', timeout: 2000 }));
queue.add(new Noty({ text: 'Уведомление 3', type: 'info', timeout: 2000 }));

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

Настройка временных задержек между уведомлениями

Для создания более гибких цепочек можно использовать временные задержки с помощью опции timeout или встроенного JavaScript setTimeout:

const messages = [
    { text: 'Первое уведомление', type: 'alert', timeout: 1500 },
    { text: 'Второе уведомление', type: 'success', timeout: 2500 },
    { text: 'Третье уведомление', type: 'warning', timeout: 2000 }
];

function showChain(index = 0) {
    if (index >= messages.length) return;

    const { text, type, timeout } = messages[index];
    new Noty({
        text,
        type,
        timeout,
        callbacks: {
            onClose: () => showChain(index + 1)
        }
    }).show();
}

showChain();

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

Важно: корректное управление индексом массива и колбэками обеспечивает непрерывность последовательности и предотвращает пропуск сообщений.

Анимации и плавные переходы

Noty поддерживает анимации появления и скрытия уведомлений через опции animation:

new Noty({
    text: 'Уведомление с анимацией',
    type: 'info',
    timeout: 2000,
    animation: {
        open: 'animated bounceInRight',
        close: 'animated bounceOutRight'
    }
}).show();

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

Динамическая модификация цепочки

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

let chain = Promise.resolve();

function addNotification(text, type = 'alert', timeout = 2000) {
    chain = chain.then(() => new Promise(resolve => {
        new Noty({
            text,
            type,
            timeout,
            callbacks: { onClose: resolve }
        }).show();
    }));
}

addNotification('Первое сообщение');
addNotification('Второе сообщение');
addNotification('Третье сообщение');

Использование Promise обеспечивает строгую последовательность, особенно полезно, когда уведомления формируются асинхронно (например, после получения данных с сервера).

Управление прерываниями цепочки

В цепочках уведомлений иногда требуется прерывать последовательность или отменять показ будущих нотификаций. Для этого можно хранить экземпляры уведомлений и вызывать метод close():

const noty1 = new Noty({ text: 'Уведомление 1', timeout: 5000 });
const noty2 = new Noty({ text: 'Уведомление 2', timeout: 5000 });

noty1.show();
setTimeout(() => noty1.close(), 2000); // Прерывает первое уведомление
noty2.show();

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

Совмещение цепочек с пользовательскими событиями

Для интерактивных уведомлений можно связывать цепочку с действиями пользователя:

document.getElementById('startChain').addEventListener('click', () => {
    new Noty({ text: 'Начало цепочки', type: 'info', timeout: 1000,
        callbacks: { onClose: () => alert('Следующее уведомление') }
    }).show();
});

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

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

Оглавление