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

Featherlight — это минималистичная библиотека для создания модальных окон на JavaScript. Основная цель её глобальных настроек — централизованное управление поведением всех экземпляров лайтбокса без необходимости настраивать каждый отдельно. Глобальные настройки задаются через объект $.featherlight.defaults и позволяют конфигурировать визуальное оформление, поведение и события.

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

target Определяет содержимое, которое будет отображаться в лайтбоксе. Может быть:

  • селектором CSS ('#myElement'),
  • HTML-строкой ('<div>Пример</div>'),
  • функцией, возвращающей содержимое.

Пример:

$.featherlight.defaults.target = '<div>Контент по умолчанию</div>';

variant Позволяет добавлять пользовательские CSS-классы к контейнеру модального окна. Классы передаются как строка через пробел.

$.featherlight.defaults.variant = 'lightbox-dark large';

closeOnClick Управляет поведением при клике на фон:

  • 'background' — закрытие при клике по фону,
  • 'anywhere' — закрытие при клике в любом месте,
  • false — запрет на закрытие кликом.
$.featherlight.defaults.closeOnClick = 'background';

closeIcon HTML-код или символ для кнопки закрытия. По умолчанию: '×'.

$.featherlight.defaults.closeIcon = '<button class="featherlight-close">×</button>';

loading Текст или HTML, который отображается до загрузки контента.

$.featherlight.defaults.loading = 'Загрузка...';

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

$.featherlight.defaults.persist = true;

openSpeed и closeSpeed Задают скорость анимации открытия и закрытия в миллисекундах или 'fast' / 'slow'.

$.featherlight.defaults.openSpeed = 300;
$.featherlight.defaults.closeSpeed = 200;

afterOpen, afterClose, beforeOpen, beforeClose Колбэк-функции для работы с жизненным циклом окна:

  • beforeOpen — вызывается перед созданием DOM, можно изменить контент, класс или стиль,
  • afterOpen — выполняется после отображения окна и анимации,
  • beforeClose — срабатывает перед закрытием, возвращение false отменяет закрытие,
  • afterClose — вызывается после закрытия и удаления DOM.

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

$.featherlight.defaults.afterOpen = function(event){
    console.log('Лайтбокс открыт', event);
};
$.featherlight.defaults.beforeClose = function(event){
    if (!confirm('Закрыть окно?')) return false;
};

otherOptions Существует ряд менее часто используемых опций:

  • root — контейнер, в который вставляется лайтбокс, по умолчанию body,
  • iframeWidth и iframeHeight — размеры iframe, если содержимое загружается через <iframe>,
  • iframeLoading — текст отображения до полной загрузки iframe,
  • openTrigger — событие для открытия (click, hover и т. п.).

Пример:

$.featherlight.defaults.root = '#app';
$.featherlight.defaults.iframeWidth = 800;
$.featherlight.defaults.iframeHeight = 600;

Изменение глобальных настроек динамически

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

// Меняем класс для всех будущих лайтбоксов
$.featherlight.defaults.variant = 'custom-style';

// Отключаем закрытие кликом по фону
$.featherlight.defaults.closeOnClick = false;

Важно понимать, что изменения влияют только на новые экземпляры. Уже открытые лайтбоксы сохраняют свои текущие настройки.

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

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

$.featherlight('<p>Контент</p>', {
    variant: 'highlight',
    closeOnClick: 'anywhere'
});

В этом примере глобальные variant и closeOnClick не применяются к данному экземпляру.

Рекомендации по использованию

  • Использовать глобальные настройки для общих стилей и поведения, например единый variant, скорость анимации или текст загрузки.
  • Локальные настройки применять только там, где требуется индивидуальное поведение.
  • Колбэки жизненного цикла лучше задавать глобально для консистентного логирования или аналитики.

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

Оглавление