Локальные настройки для экземпляра

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

Инициализация экземпляра с локальными настройками

Каждое модальное окно создаётся с помощью вызова функции $.featherlight, куда передаётся контент и объект с параметрами конфигурации. Пример базовой инициализации:

$.featherlight('<p>Пример контента</p>', {
    variant: 'custom-modal',
    closeOnClick: false,
    closeOnEsc: false
});

Здесь параметры variant, closeOnClick и closeOnEsc применяются только к этому экземпляру. Это позволяет изменять внешний вид, поведение закрытия и другие свойства без вмешательства в глобальные настройки библиотеки.

Список ключевых локальных параметров

  • variant — строка, добавляемая в качестве класса к контейнеру модального окна, используется для индивидуальной стилизации.
  • closeOnClick — определяет, закрывается ли модальное окно при клике на фон. Значения: true (по умолчанию), false.
  • closeOnEsc — закрытие окна при нажатии клавиши Esc. Значения: true (по умолчанию), false.
  • targetAttr — атрибут ссылки, из которого будет извлечён контент. По умолчанию: 'href'.
  • afterOpen — функция обратного вызова, вызываемая после открытия окна.
  • beforeClose — функция обратного вызова, вызываемая перед закрытием окна.
  • afterClose — функция обратного вызова, вызываемая после закрытия.

Пример с использованием нескольких колбеков:

$.featherlight('<div>Контент с колбэками</div>', {
    afterOpen: function(event){
        console.log('Модальное окно открыто');
    },
    beforeClose: function(event){
        console.log('Модальное окно готово к закрытию');
    },
    afterClose: function(event){
        console.log('Модальное окно закрыто');
    }
});

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

Библиотека Featherlight позволяет задавать глобальные настройки через $.featherlight.defaults. При этом каждый экземпляр может иметь локальные настройки, которые имеют приоритет над глобальными. Например:

$.featherlight.defaults.closeOnClick = true;

$('#customButton').featherlight('<p>Локальное закрытие отключено</p>', {
    closeOnClick: false
});

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

Использование локальных настроек с селекторами

Featherlight поддерживает привязку к селекторам. Локальные настройки можно задавать прямо при вызове через jQuery:

$('a.gallery').featherlight({
    variant: 'gallery-lightbox',
    closeOnEsc: true
});

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

Динамическое изменение локальных параметров

Экземпляры Featherlight доступны через метод $.featherlight.current(), что позволяет программно менять локальные настройки после открытия:

var fl = $.featherlight('<p>Динамическая настройка</p>', {
    closeOnClick: true
});

var current = $.featherlight.current();
current.settings.closeOnClick = false;

После такой операции текущее окно не закроется при клике на фон, даже если изначально параметр был true.

Преимущества локальных настроек

  1. Гибкость: возможность изменять поведение отдельных модальных окон без изменения всей библиотеки.
  2. Изоляция стилей: каждый экземпляр может использовать уникальные CSS-классы через variant.
  3. Контроль жизненного цикла: использование колбеков (afterOpen, beforeClose, afterClose) позволяет интегрировать Featherlight с другими компонентами приложения.
  4. Совместимость с динамическим контентом: локальные настройки легко применяются к контенту, загружаемому по AJAX или создаваемому динамически.

Практические рекомендации

  • Всегда использовать локальные настройки для нестандартного поведения, чтобы глобальные параметры оставались универсальными.
  • Для модальных окон, требующих уникальной стилизации, применять параметр variant и подключать отдельный CSS.
  • Колбеки beforeClose и afterClose полезны для управления состоянием приложения и очистки ресурсов, особенно при динамическом контенте.
  • Комбинирование локальных настроек с селекторами упрощает управление галереями, всплывающими подсказками и формами.

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

Оглавление