Динамическое обновление содержимого

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

Объект уведомления создаётся через конструктор Noty:

let n = new Noty({
    text: 'Начальная загрузка...',
    type: 'info',
    timeout: false,
    progressBar: true
}).show();

После вызова метода show() уведомление появляется на экране. Для динамического обновления содержимого можно использовать метод setText().

n.setText('Загрузка завершена!');

Этот вызов заменяет текст уведомления на новый, сохраняя все текущие стили и расположение.

Обновление типа уведомления

Тип уведомления (success, error, warning, info, alert) определяет его визуальное оформление. Метод setType() позволяет менять тип уведомления на лету:

n.setType('success');

После выполнения уведомление мгновенно приобретает соответствующий стиль. Можно комбинировать с setText() для полного обновления содержимого:

n.setText('Операция выполнена успешно!').setType('success');

Использование кнопок и событий для обновления

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

let n = new Noty({
    text: 'Подтвердите действие',
    buttons: [
        Noty.button('Ок', 'btn btn-success', function() {
            n.setText('Действие подтверждено').setType('success');
        }),
        Noty.button('Отмена', 'btn btn-error', function() {
            n.setText('Действие отменено').setType('error');
        })
    ]
}).show();

Метод Noty.button создаёт интерактивные элементы, привязанные к событиям click, которые позволяют изменять уведомление без его закрытия.

Динамическое обновление прогресс-бара

Если уведомление использует progressBar: true, можно обновлять прогресс вручную через метод setProgress():

let progress = new Noty({
    text: 'Загрузка...',
    type: 'info',
    timeout: false,
    progressBar: true
}).show();

let value = 0;
let interval = setInterval(() => {
    value += 0.1;
    progress.setProgress(value); // значение от 0 до 1
    if (value >= 1) {
        clearInterval(interval);
        progress.setText('Загрузка завершена').setType('success');
    }
}, 500);

Метод setProgress() изменяет заполнение прогресс-бара, сохраняя уведомление на экране до завершения.

Работа с контентом HTML и шаблонами

Метод setText() может принимать как обычный текст, так и HTML-контент:

n.setText('<strong>Важная информация:</strong> процесс завершен');

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

Удаление и повторное использование уведомления

Методы close() и show() можно использовать для контроля жизненного цикла уведомления:

n.close();
n.setText('Повторное уведомление').show();

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

Комбинирование методов для сложных сценариев

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

setText() — обновление текста;
setType() — изменение типа;
setProgress() — управление прогресс-баром;
close() / show() — управление видимостью.

Пример сложного сценария с прогрессом и сменой типа уведомления:

let n = new Noty({
    text: 'Начало обработки',
    type: 'info',
    timeout: false,
    progressBar: true
}).show();

let progressValue = 0;
let interval = setInterval(() => {
    progressValue += 0.2;
    n.setProgress(progressValue);
    
    if (progressValue < 1) {
        n.setText(`Прогресс: ${Math.round(progressValue * 100)}%`);
    } else {
        clearInterval(interval);
        n.setText('Обработка завершена').setType('success');
    }
}, 1000);

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