Локальные настройки для отдельных уведомлений

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

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

Для создания уведомления с индивидуальными настройками используется конструктор new Noty(options). Объект options может содержать следующие ключевые поля:

  • type – тип уведомления (alert, success, error, warning, information, notification).
  • layout – расположение уведомления на странице (top, topLeft, topCenter, topRight, center, centerLeft, centerRight, bottom, bottomLeft, bottomCenter, bottomRight).
  • theme – визуальная тема уведомления (relax, mint, metroui, sunset и другие, в зависимости от подключенных CSS).
  • timeout – время автоматического закрытия уведомления в миллисекундах; если false, уведомление не закроется автоматически.
  • progressBar – отображение индикатора прогресса (true или false).
  • closeWith – массив методов закрытия уведомления (['click', 'button', 'hover']).
  • text – текст уведомления, поддерживает HTML-разметку.

Пример создания уведомления с локальными настройками:

new Noty({
    type: 'success',
    layout: 'topRight',
    theme: 'mint',
    text: 'Данные успешно сохранены',
    timeout: 3000,
    progressBar: true,
    closeWith: ['click', 'button']
}).show();

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

Переопределение глобальных настроек

Глобальные настройки задаются через Noty.overrideDefaults():

Noty.overrideDefaults({
    theme: 'sunset',
    layout: 'topCenter',
    timeout: 5000
});

Локальные настройки, указанные при создании конкретного уведомления, всегда имеют приоритет над глобальными. Например:

Noty.overrideDefaults({
    timeout: 5000
});

new Noty({
    text: 'Специальное уведомление',
    timeout: 1000 // Локальная настройка перезапишет глобальную
}).show();

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

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

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

  • onShow – срабатывает при отображении уведомления.
  • onClose – срабатывает при закрытии уведомления.
  • onClick – срабатывает при клике на уведомление.

Пример:

new Noty({
    text: 'Уведомление с колбэками',
    type: 'information',
    timeout: 4000,
    onShow: function() {
        console.log('Уведомление появилось');
    },
    onClose: function() {
        console.log('Уведомление закрыто');
    }
}).show();

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

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

Анимация появления и исчезновения задается через параметры animation:

animation: {
    open: 'animated bounceInRight', // CSS-класс для появления
    close: 'animated bounceOutRight', // CSS-класс для скрытия
    easing: 'swing', // Тип easing
    speed: 500 // Скорость анимации в миллисекундах
}

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

new Noty({
    text: 'Анимированное уведомление',
    animation: {
        open: 'animated fadeInDown',
        close: 'animated fadeOutUp',
        easing: 'easeInOutQuad',
        speed: 700
    },
    timeout: 4000
}).show();

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

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

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

new Noty({
    text: 'Сохранить изменения?',
    buttons: [
        Noty.button('Да', 'btn btn-success', function() {
            console.log('Изменения сохранены');
            this.close();
        }),
        Noty.button('Нет', 'btn btn-danger', function() {
            console.log('Отмена изменений');
            this.close();
        })
    ]
}).show();

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

Управление временем жизни уведомления

Параметр timeout можно комбинировать с методами управления уведомлением:

  • show() – отображает уведомление.
  • close() – закрывает уведомление вручную.
  • stop() – останавливает текущий таймер.
  • resume() – возобновляет таймер после остановки.

Пример:

let n = new Noty({
    text: 'Временное уведомление',
    timeout: 5000
}).show();

setTimeout(() => n.stop(), 2000); // Остановить таймер через 2 секунды
setTimeout(() => n.resume(), 4000); // Возобновить таймер через 4 секунды

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

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

Оглавление