Внутренние компоненты

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

Контейнер модального окна

Контейнер ($.featherlight) — это основной элемент, в который помещается содержимое модального окна. Он создаётся динамически при инициализации и содержит следующие ключевые части:

  • Оболочка (featherlight) — корневой элемент, обеспечивающий позиционирование по центру окна и затемнение фона.
  • Контент-блок (featherlight-content) — блок, в котором располагается основной контент (текст, HTML, изображения).
  • Закрывающая кнопка (featherlight-close-icon) — кнопка закрытия окна, автоматически добавляемая библиотекой, если включена опция closeIcon.

Контейнер поддерживает стандартные стили и может быть расширен через кастомные CSS-классы. Для управления видимостью используются методы .open() и .close(), а также события beforeOpen, afterOpen, beforeClose, afterClose.

Контент и источники данных

Featherlight работает с различными типами контента, которые задаются через опцию content или атрибут data-featherlight у триггерного элемента:

  • HTML-контент — может быть как строкой, так и существующим DOM-элементом. Пример: $.featherlight('<div>Пример</div>').
  • Селекторы jQuery — позволяет использовать элементы с уже существующей разметкой: $.featherlight($('#myDiv')).
  • AJAX-запросы — контент подгружается динамически с сервера. Опция ajax может быть объектом с URL и настройками запроса.
  • Изображения — при передаче ссылки на изображение библиотека автоматически создаёт <img> внутри featherlight-content.

Для динамического обновления содержимого можно использовать метод instance.content().

Вспомогательные слои

Featherlight включает несколько внутренних слоёв, обеспечивающих визуальные эффекты:

  • Фон (featherlight-overlay) — затемнённая область за модальным окном. Позволяет блокировать взаимодействие с контентом страницы.
  • Анимации — поддерживаются через CSS-классы fade, slideDown и пользовательские анимации. Настройка производится через опции openSpeed и closeSpeed.
  • Скроллинг контента — при превышении высоты окна контент автоматически получает прокрутку. Можно задать ограничения через CSS или опции beforeOpen для динамического расчёта размеров.

Управление событиями

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

  • beforeOpen — вызывается до отображения окна. Можно использовать для подготовки контента.
  • afterOpen — срабатывает после того, как окно полностью показано. Идеально для инициализации плагинов внутри модального блока.
  • beforeClose — перед закрытием. Позволяет отменить закрытие при определённых условиях.
  • afterClose — после закрытия, освобождает ресурсы и позволяет восстановить исходное состояние страницы.

Все события работают через стандартный jQuery-синтаксис: $(document).on('afterOpen.fb', function(e, instance){ ... });.

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

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

  • targetAttr — атрибут триггера, содержащий URL или селектор.
  • closeOnClick — закрытие при клике на фон, на контент или по умолчанию (true закрывает при клике на фон).
  • persist — определяет, сохраняется ли DOM-элемент после закрытия.
  • namespace — позволяет изменять классы контейнера и элементов, чтобы избежать конфликтов с другими стилями.

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

Кастомизация компонентов

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

  • Переопределение методов _setup и _afterContent позволяет контролировать структуру контейнера и вставку контента.
  • Свои CSS-классы для контейнера и overlay обеспечивают полное визуальное оформление.
  • Расширенные версии могут добавлять новые кнопки, прогресс-бары или другие интерактивные элементы внутри featherlight-content.

Примеры внутренних связей

  1. Контейнер создаётся → вставляется overlay → добавляется контент → привязываются события.
  2. Закрытие: пользователь кликает на featherlight-close-icon → вызывается beforeClose → скрывается overlay → удаляется контейнер (если persist: false).
  3. AJAX-запросы: beforeOpen → отправляется запрос → контент вставляется через _afterContent → afterOpen.

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

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

Оглавление