Глобальные настройки

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

Метод iziToast.settings()

Глобальные параметры задаются через метод:

iziToast.settings({
  timeout: 5000,
  position: 'topRight',
  transitionIn: 'fadeInDown',
  transitionOut: 'fadeOutUp'
});

Все переданные значения применяются ко всем последующим уведомлениям, если они не переопределены локально.

Основные параметры глобальной конфигурации

Время отображения (timeout)

Определяет длительность показа уведомления (в миллисекундах):

iziToast.settings({
  timeout: 3000
});

Значение false отключает автоматическое скрытие:

iziToast.settings({
  timeout: false
});

Позиция (position)

Устанавливает расположение уведомлений на экране:

  • topRight
  • topLeft
  • topCenter
  • bottomRight
  • bottomLeft
  • bottomCenter
iziToast.settings({
  position: 'bottomLeft'
});

Анимации появления и скрытия

Параметры:

  • transitionIn
  • transitionOut

Поддерживаются CSS-анимации (например, из Animate.css):

iziToast.settings({
  transitionIn: 'bounceInLeft',
  transitionOut: 'fadeOutRight'
});

Отступы (margin)

Регулирует расстояние между уведомлениями:

iziToast.settings({
  margin: 10
});

Z-index (zindex)

Контролирует наложение уведомлений поверх других элементов:

iziToast.settings({
  zindex: 9999
});

Перетаскивание (drag)

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

iziToast.settings({
  drag: true
});

Закрытие по клику (closeOnClick)

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

iziToast.settings({
  closeOnClick: true
});

Закрытие по клавише Escape (closeOnEscape)

iziToast.settings({
  closeOnEscape: true
});

Пауза при наведении (pauseOnHover)

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

iziToast.settings({
  pauseOnHover: true
});

Глобальные колбэки

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

Перед открытием (onOpening)

iziToast.settings({
  onOpening: function(instance, toast) {
    console.log('Открытие уведомления');
  }
});

После открытия (onOpened)

iziToast.settings({
  onOpened: function(instance, toast) {
    console.log('Уведомление открыто');
  }
});

Перед закрытием (onClosing)

iziToast.settings({
  onClosing: function(instance, toast, closedBy) {
    console.log('Закрытие уведомления');
  }
});

После закрытия (onClosed)

iziToast.settings({
  onClosed: function(instance, toast, closedBy) {
    console.log('Уведомление закрыто');
  }
});

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

Локальные параметры имеют приоритет над глобальными:

iziToast.settings({
  timeout: 5000
});

iziToast.show({
  title: 'Сообщение',
  message: 'Локальный таймаут',
  timeout: 1000
});

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

Сброс настроек

Библиотека не предоставляет отдельного метода для сброса конфигурации, но можно вручную переопределить значения:

iziToast.settings({
  timeout: 5000,
  position: 'topRight'
});

Практика организации конфигурации

Обычно глобальные настройки выносятся в отдельный файл или блок инициализации:

function initToasts() {
  iziToast.settings({
    timeout: 4000,
    position: 'topRight',
    pauseOnHover: true,
    closeOnClick: true,
    transitionIn: 'fadeInDown',
    transitionOut: 'fadeOutUp'
  });
}

initToasts();

Это обеспечивает единообразие поведения уведомлений во всём приложении.

Частые ошибки

1. Повторная инициализация настроек

Многократный вызов iziToast.settings() в разных местах может приводить к непредсказуемому поведению.

2. Игнорирование локальных переопределений

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

3. Некорректные значения анимаций

Использование неподдерживаемых названий анимаций приводит к отсутствию эффектов.

Расширенные подходы

Глобальные настройки можно комбинировать с обёртками:

function showSuccess(message) {
  iziToast.show({
    color: 'green',
    title: 'Успех',
    message: message
  });
}

При этом глобальная конфигурация задаёт базовое поведение, а функции-обёртки добавляют семантику.

Влияние на производительность

Глобальные настройки не создают заметной нагрузки, однако:

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

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

Оглавление