Объектная модель Featherlight

Featherlight — это минималистичная библиотека для создания лёгких модальных окон (lightbox) в JavaScript. Она построена на принципах простоты и расширяемости, что позволяет создавать модальные окна с изображениями, HTML-контентом, AJAX-запросами или iframe без лишнего кода. Основным строительным элементом является объект $.featherlight, который представляет собой конструктор модального окна и управляет его жизненным циклом.

Featherlight работает на основе jQuery, что обеспечивает совместимость с большинством существующих проектов, использующих эту библиотеку.

Конструктор и объектная модель

Объект $.featherlight является функцией-конструктором. Его можно вызывать напрямую или использовать через привязку к элементам DOM через селекторы jQuery:

$.featherlight('<p>Привет, мир!</p>');

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

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

  • this.$content — jQuery-объект, содержащий содержимое модального окна.
  • this.$instance — jQuery-объект, представляющий корневой контейнер окна.
  • this.options — объект с настройками конкретного экземпляра, объединяющий дефолтные опции и пользовательские.
  • this.parent — ссылка на родительский конструктор ($.featherlight), используется для доступа к общим методам и опциям.

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

  • open(event) — открывает модальное окно; принимает необязательный объект события для контекста.
  • close(event) — закрывает окно; может быть вызван как программно, так и по пользовательским действиям.
  • setup() — подготавливает структуру DOM перед показом.
  • bindEvents() — привязывает обработчики событий к элементам окна.
  • afterContent() — вызывается после вставки контента в DOM.
  • afterOpen() — вызывается после завершения анимации открытия.
  • afterClose() — вызывается после закрытия окна и удаления из DOM.

Настройки и опции

Featherlight позволяет детально настраивать поведение окон через объект options. Опции могут задаваться при вызове или изменяться глобально через $.featherlight.defaults.

Примеры ключевых опций:

  • variant — строка, добавляемая к классу модального окна для стилизации (class="featherlight featherlight-variant").
  • closeIcon — HTML-код для кнопки закрытия (по умолчанию ×).
  • loading — сообщение или элемент, отображаемый во время загрузки контента.
  • persist — определяет, остаётся ли контент в DOM после закрытия (true/false).
  • root — селектор или jQuery-объект, в который будет помещён модальный контейнер (по умолчанию body).

Опции могут быть переопределены для конкретного экземпляра:

$.featherlight('<p>Динамическое окно</p>', {
    variant: 'custom-lightbox',
    closeIcon: 'Закрыть'
});

Работа с контентом

Featherlight поддерживает несколько типов контента:

  1. HTML-контент — строка HTML или jQuery-объект.
  2. Ссылки на изображения — при передаче ссылки на изображение Featherlight автоматически создаёт элемент <img> и подставляет его в окно.
  3. AJAX-запросы — при передаче URL и опции ajax: {} библиотека выполняет запрос и вставляет результат.
  4. iframe — поддерживается встроенный плагин для iframe-контента.

Пример вставки HTML-контента:

$.featherlight('<div><h2>Заголовок</h2><p>Текст окна</p></div>');

Пример AJAX-загрузки:

$.featherlight({
    ajax: '/path/to/content.html',
    loading: 'Загрузка...'
});

События и расширяемость

Featherlight предоставляет набор событий, которые позволяют вмешиваться в процесс работы окна:

  • beforeOpen — вызывается перед открытием окна.
  • afterOpen — после завершения анимации открытия.
  • beforeClose — перед закрытием.
  • afterClose — после удаления из DOM.
  • afterContent — после вставки контента в окно.

Привязка к событиям осуществляется через объект options:

$.featherlight('<p>События</p>', {
    beforeOpen: function(event) {
        console.log('Модальное окно откроется');
    },
    afterClose: function(event) {
        console.log('Окно закрыто');
    }
});

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

Принципы расширения

Featherlight построен на объектной модели, что упрощает создание собственных типов окон:

  1. Создание подкласса:
var MyLightbox = $.featherlight.extend({
    setup: function() {
        this.$content = $('<div>Мой контент</div>');
        this._super(); // вызов оригинального setup
    }
});
  1. Использование нового типа:
new MyLightbox();
  1. Переопределение методов afterContent, bindEvents и других позволяет интегрировать кастомную логику.

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

Featherlight поддерживает открытие нескольких окон одновременно. Каждый экземпляр независим, что обеспечивает корректное управление слоями (z-index) и событиями. Связь между окнами можно реализовать через массив активных экземпляров:

console.log($.featherlight.current); // текущий открытый экземпляр

Использование $.featherlight.close() позволяет закрыть активное окно программно, при этом внутренние события корректно вызываются.

Анимация и визуальные эффекты

Featherlight поддерживает анимации через CSS-классы, применяемые к контейнеру. Опции openSpeed и closeSpeed позволяют задавать длительность открытия и закрытия в миллисекундах. Встроенные методы afterOpen и afterClose помогают синхронизировать JavaScript-анимации с жизненным циклом окна.

$.featherlight('<p>Анимация</p>', {
    openSpeed: 300,
    closeSpeed: 300,
    afterOpen: function() {
        this.$content.fadeIn(200);
    }
});

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

Оглавление