Глобальные настройки по умолчанию

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

Инициализация глобальных настроек

Глобальные настройки задаются через объект Noty.defaults. Все свойства, указанные в этом объекте, применяются ко всем создаваемым уведомлениям, если при создании уведомления не указано иное. Пример базовой инициализации:

Noty.defaults = {
    theme: 'metroui',
    timeout: 3000,
    progressBar: true,
    layout: 'topRight',
    closeWith: ['click', 'button'],
    animation: {
        open: 'animated bounceInRight',
        close: 'animated bounceOutRight'
    }
};
  • theme — задаёт визуальный стиль уведомления. Noty включает несколько предустановленных тем, таких как relax, mint, metroui.
  • timeout — время жизни уведомления в миллисекундах; 0 означает, что уведомление не будет закрываться автоматически.
  • progressBar — отображение индикатора прогресса таймера закрытия.
  • layout — позиция уведомления на экране: topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter, center.
  • closeWith — список действий, которыми можно закрыть уведомление (click, button, hover).
  • animation — объект, определяющий CSS-анимации открытия и закрытия. Можно использовать любые классы анимации, поддерживаемые CSS или библиотеками вроде Animate.css.

Переопределение настроек для конкретного уведомления

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

new Noty({
    text: 'Успешная операция!',
    type: 'success',
    timeout: 5000, // переопределение глобального таймаута
    layout: 'bottomLeft'
}).show();

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

Основные свойства глобальных настроек

  • type — тип уведомления: alert, success, warning, error, information. Отвечает за стандартное цветовое оформление.
  • text — текст уведомления по умолчанию, можно переопределять локально.
  • modal — если true, уведомление блокирует взаимодействие с фоном.
  • force — принудительное отображение уведомления, даже если другие уведомления активны.
  • maxVisible — ограничивает количество видимых уведомлений одновременно.

Настройка макета и позиции

Объект layout отвечает за размещение уведомлений на странице. Noty поддерживает статичные позиции и может автоматически рассчитывать смещения между уведомлениями. Глобальная установка layout позволяет единообразно выравнивать все уведомления.

Пример кастомного смещения:

Noty.defaults.layout = 'topRight';
Noty.defaults.layoutClass = 'custom-layout';
Noty.defaults.killer = false; // не закрывать предыдущие уведомления
  • layoutClass — позволяет задавать дополнительный CSS-класс для всех уведомлений, чтобы легко настраивать отступы, фон или шрифты.
  • killer — при true закрывает все предыдущие уведомления при создании нового.

Анимации по умолчанию

Анимации в Noty задаются через объект animation, включающий свойства:

  • open — класс или функция, задающая анимацию появления.
  • close — класс или функция, задающая анимацию скрытия.
  • easing — CSS-свойство плавности анимации (linear, ease, ease-in-out).
  • speed — продолжительность анимации в миллисекундах.

Пример глобальной настройки с анимацией:

Noty.defaults.animation = {
    open: 'animated fadeInDown',
    close: 'animated fadeOutUp',
    easing: 'swing',
    speed: 500
};

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

Использование Noty.defaults особенно удобно при больших проектах с многочисленными уведомлениями. Настройка по умолчанию гарантирует:

  • Единый визуальный стиль.
  • Унификацию поведения уведомлений.
  • Уменьшение дублирования кода при создании уведомлений.

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

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

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

Примеры конфигураций:

Noty.defaults.timeout = 0; // уведомления не исчезают автоматически
Noty.defaults.progressBar = false; // убрать индикатор прогресса

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

Глобальные настройки позволяют задать способы закрытия уведомлений через свойство closeWith:

Noty.defaults.closeWith = ['click', 'button']; // закрытие по клику или кнопке

Можно комбинировать несколько способов, включая закрытие при наведении (hover), что полезно для уведомлений с длительным таймером.

Расширение глобальных настроек

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

function setCustomNotyDefaults(theme, layout) {
    Noty.defaults.theme = theme;
    Noty.defaults.layout = layout;
    Noty.defaults.timeout = 4000;
}

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

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

Оглавление