Вложенные уведомления

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

В Noty любое уведомление создается с помощью конструктора new Noty(options), где options — объект с параметрами. Для реализации вложенных уведомлений ключевыми являются методы onShow, onClose и программное управление жизненным циклом уведомлений.

let firstNotification = new Noty({
    text: 'Первое уведомление',
    type: 'info',
    timeout: 2000,
    callbacks: {
        onClose: function() {
            let secondNotification = new Noty({
                text: 'Второе уведомление после закрытия первого',
                type: 'success',
                timeout: 2000
            }).show();
        }
    }
}).show();

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

Использование цепочек уведомлений

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

function showNotificationChain() {
    return new Promise((resolve) => {
        new Noty({
            text: 'Шаг 1: Начало процесса',
            type: 'alert',
            timeout: 1500,
            callbacks: {
                onClose: resolve
            }
        }).show();
    }).then(() => {
        return new Promise((resolve) => {
            new Noty({
                text: 'Шаг 2: Продолжаем процесс',
                type: 'info',
                timeout: 1500,
                callbacks: { onClose: resolve }
            }).show();
        });
    }).then(() => {
        new Noty({
            text: 'Шаг 3: Завершение',
            type: 'success',
            timeout: 1500
        }).show();
    });
}

showNotificationChain();

Использование промисов позволяет избежать вложенного «адского колбэка» и делает код более читаемым и поддерживаемым.

Вложенные уведомления с пользовательскими действиями

Часто требуется не только последовательное отображение сообщений, но и реакция на действия пользователя: кнопки “Подтвердить” или “Отменить”. Для этого Noty предоставляет модуль buttons, который позволяет создавать интерактивные уведомления.

new Noty({
    text: 'Хотите продолжить?',
    type: 'warning',
    layout: 'topRight',
    buttons: [
        Noty.button('Да', 'btn btn-success', function(n) {
            n.close();
            new Noty({ text: 'Вы выбрали Да', type: 'success', timeout: 2000 }).show();
        }),
        Noty.button('Нет', 'btn btn-error', function(n) {
            n.close();
            new Noty({ text: 'Вы выбрали Нет', type: 'error', timeout: 2000 }).show();
        })
    ]
}).show();

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

Управление позиционированием и стеком уведомлений

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

let parentNotification = new Noty({
    text: 'Главное уведомление',
    type: 'alert',
    layout: 'topRight',
    timeout: false
}).show();

let childNotification = new Noty({
    text: 'Вложенное уведомление',
    type: 'info',
    layout: 'topRight',
    timeout: 2000,
    queue: 'global'
}).show();

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

Динамическое создание вложенных уведомлений

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

const steps = [
    { text: 'Шаг 1', type: 'info' },
    { text: 'Шаг 2', type: 'warning' },
    { text: 'Шаг 3', type: 'success' }
];

function showDynamicNotifications(index = 0) {
    if (index >= steps.length) return;

    new Noty({
        text: steps[index].text,
        type: steps[index].type,
        timeout: 1500,
        callbacks: {
            onClose: function() {
                showDynamicNotifications(index + 1);
            }
        }
    }).show();
}

showDynamicNotifications();

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

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

Для улучшения визуального восприятия можно использовать анимацию открытия и закрытия через опции animation:

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

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

Применение вложенных уведомлений в реальных сценариях

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

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

Оглавление