Логирование в консоль

Для работы с библиотекой Noty необходимо подключить её CSS и JS файлы. Наиболее распространённые способы — через CDN или локально скачанные файлы. Пример подключения через CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
<script src="https://cdn.jsdelivr.net/npm/noty/lib/noty.min.js"></script>

Можно также подключить темы, которые изменяют внешний вид уведомлений:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/mint.css">

После подключения файлов библиотека готова к использованию.

Создание уведомлений

Основной метод для создания уведомлений — конструктор Noty. Он принимает объект с конфигурацией:

new Noty({
    text: 'Пример уведомления',
    type: 'success', // success, error, warning, info, alert
    layout: 'topRight', // top, topLeft, topCenter, topRight, center, bottom, bottomLeft, bottomCenter, bottomRight
    theme: 'mint',
    timeout: 3000, // миллисекунды
    progressBar: true,
    closeWith: ['click', 'button']
}).show();

Ключевые параметры:

  • text — текст уведомления.
  • type — тип уведомления, влияющий на стиль иконки и цвет.
  • layout — позиция на экране.
  • theme — визуальная тема.
  • timeout — время автоматического закрытия.
  • progressBar — отображение индикатора времени.
  • closeWith — способы закрытия (клик по уведомлению, кнопка закрытия, клавиши и т.д.).

Типы уведомлений

Noty поддерживает пять основных типов уведомлений:

  1. success — зелёное уведомление для успешных действий.
  2. error — красное уведомление для ошибок.
  3. warning — жёлтое уведомление для предупреждений.
  4. info — синее уведомление для информационных сообщений.
  5. alert — нейтральное уведомление без явного эмоционального окраса.

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

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

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

  • top — верх страницы по центру.
  • topLeft / topRight — верхний левый/правый угол.
  • topCenter — верх по центру.
  • center — центр экрана.
  • bottom, bottomLeft, bottomCenter, bottomRight — нижняя часть экрана.

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

Автоматическое закрытие и индикатор прогресса

Параметр timeout задаёт время жизни уведомления в миллисекундах. Если не задан, уведомление останется до ручного закрытия.

Прогресс-бар визуализирует оставшееся время до закрытия:

new Noty({
    text: 'Сообщение с прогресс-баром',
    type: 'info',
    timeout: 5000,
    progressBar: true
}).show();

Можно отключить прогресс-бар или настроить его цвет и анимацию через CSS.

События уведомлений

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

  • onShow — вызывается при отображении уведомления.
  • onClose — при закрытии.
  • onClick — при клике по уведомлению.
  • onHover / onUnhover — при наведении и уходе курсора.

Пример использования:

new Noty({
    text: 'События уведомления',
    type: 'alert',
    callbacks: {
        onShow: function() {
            console.log('Уведомление показано');
        },
        onClose: function() {
            console.log('Уведомление закрыто');
        }
    }
}).show();

События позволяют интегрировать Noty с логированием действий пользователя или триггерить другие функции.

Кастомизация кнопок и действий

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

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

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

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

Для управления большим количеством уведомлений используется метод Noty.closeAll():

Noty.closeAll();

Можно передавать параметры для фильтрации по типу:

Noty.closeAll('error'); // Закрыть только уведомления типа error

Это удобно при массовых обновлениях интерфейса или переходе между страницами SPA.

Логирование ошибок и событий

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

function logError(message) {
    new Noty({
        text: message,
        type: 'error',
        timeout: 4000,
        layout: 'topRight'
    }).show();
    console.error(message);
}

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

Асинхронные уведомления

Для работы с асинхронными событиями можно создавать уведомления после завершения промисов:

fetch('/api/data')
    .then(response => response.json())
    .then(data => {
        new Noty({
            text: 'Данные успешно загружены',
            type: 'success'
        }).show();
        console.log(data);
    })
    .catch(error => {
        new Noty({
            text: 'Ошибка при загрузке данных',
            type: 'error'
        }).show();
        console.error(error);
    });

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

Оглавление