Контекст выполнения

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

Библиотека строится на основе jQuery, что обеспечивает простую интеграцию и использование стандартных методов манипуляции DOM. Основной объект Featherlight создаётся при вызове метода $.featherlight(content, options), где content — это HTML-код, селектор или функция, возвращающая контент, а options — объект настроек модального окна.

Инициализация и контекст

Инициализация Featherlight может происходить несколькими способами:

  1. Прямой вызов функции:
$.featherlight('<div>Пример контента</div>');

В этом случае создаётся модальное окно с указанным содержимым. Контекст выполнения ограничен самим модальным окном, а все внутренние методы Featherlight используют привязку к текущему экземпляру через this.

  1. Использование селектора:
$('a.lightbox').featherlight();

В этом варианте Featherlight автоматически присваивает обработчики событий всем элементам, соответствующим селектору. Контекст клика передаётся в обработчик и используется для определения исходного элемента, от которого инициировано открытие окна.

  1. Функция обратного вызова:
$.featherlight(function() {
    return '<p>Контент через функцию</p>';
});

При использовании функции контент генерируется динамически при открытии модального окна. Контекст this внутри функции указывает на текущий экземпляр Featherlight, что позволяет получить доступ к методам и свойствам модального окна:

  • this.$content — jQuery-объект контента окна.
  • this.$instance — корневой элемент модального окна.
  • this.close() — метод закрытия окна.

Настройки и расширение функционала

Featherlight поддерживает объект настроек, позволяющий управлять поведением окна. Ключевые параметры:

  • variant — добавляет CSS-класс для модификации внешнего вида.
  • closeOnClick — определяет, будет ли окно закрываться при клике на оверлей.
  • closeIcon — HTML-код или символ для кнопки закрытия.
  • afterOpen, afterClose — функции обратного вызова после открытия и закрытия, контекст this всегда указывает на экземпляр окна.

Пример настройки:

$.featherlight('<p>Пример</p>', {
    variant: 'custom-theme',
    closeOnClick: 'background',
    afterOpen: function() {
        console.log('Окно открыто', this.$content);
    }
});

Контекст событий

Featherlight активно использует события для управления жизненным циклом модального окна. Основные события:

  • open — срабатывает перед отображением окна.
  • opened — срабатывает после отображения.
  • close — перед закрытием.
  • closed — после закрытия.

Привязка обработчиков может происходить как глобально, так и к конкретному экземпляру:

$(document).on('featherlight-open', function(event){
    console.log('Глобальное событие открытия');
});

$.featherlight('<p>Контент</p>', {
    afterOpen: function() {
        console.log('Локальное событие открытия для экземпляра');
    }
});

Контекст выполнения в событиях сохраняется таким образом, что внутри локальных обработчиков this всегда ссылается на текущий экземпляр, а глобальные события получают объект события в аргументе event.

Управление контентом

Featherlight позволяет использовать несколько источников контента:

  • HTML — непосредственно через строку или jQuery-объект.
  • AJAX — динамическая подгрузка с сервера:
$.featherlight('/content.html', {
    type: 'ajax',
    afterContent: function() {
        console.log('Контент загружен', this.$content);
    }
});
  • iFrame — для встроенного внешнего контента:
$.featherlight('https://example.com', {
    iframe: true,
    iframeWidth: 800,
    iframeHeight: 600
});

Контекст внутри AJAX- и iFrame-загрузок также привязан к текущему экземпляру, что упрощает манипуляции с содержимым и позволяет управлять жизненным циклом окна без глобальных переменных.

Кастомизация через расширения

Featherlight поддерживает расширения для изменения стандартного поведения. Расширение создаётся путём добавления объекта в $.featherlight.defaults или через наследование:

$.featherlight.myExtension = $.featherlight.extend({
    afterOpen: function() {
        console.log('Моя логика после открытия');
        this.superAfterOpen();
    }
});

При наследовании контекст this остаётся экземпляром модального окна, что позволяет использовать все стандартные методы Featherlight внутри расширений.

Особенности работы с контекстом

  • Все методы библиотеки автоматически привязываются к экземпляру.
  • Использование стрелочных функций изменяет поведение this, поэтому для обращения к свойствам окна рекомендуется использовать обычные функции.
  • Обработчики событий, привязанные к документу или элементам вне окна, могут использовать event.currentTarget для определения источника вызова.

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

Оглавление