Модификация контейнера контента

Featherlight — минималистичная библиотека для создания lightbox-окон на базе jQuery. Одной из ключевых точек расширения и кастомизации является контейнер контента — DOM-структура, в которую помещается загружаемое содержимое (HTML, изображение, iframe и т.д.). Понимание устройства контейнера и способов его модификации позволяет глубоко адаптировать поведение и внешний вид lightbox под конкретные требования проекта.

При инициализации Featherlight создаёт следующую базовую структуру:

<div class="featherlight">
  <div class="featherlight-content">
    <!-- контент -->
  </div>
</div>

Класс .featherlight представляет собой корневой overlay-контейнер, отвечающий за затемнение фона и позиционирование. Внутренний блок .featherlight-content является основным контейнером контента. Именно он подлежит наибольшему количеству модификаций — как на уровне стилей, так и через JavaScript-API.

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

Доступ к контейнеру через API

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

  • this.$instance — корневой элемент .featherlight
  • this.$content — элемент .featherlight-content

Пример получения доступа внутри колбэков:

$.featherlight({
  afterOpen: function() {
    this.$content.addClass('custom-content');
  }
});

Методы жизненного цикла (beforeOpen, afterOpen, beforeClose, afterClose) являются основной точкой входа для изменения контейнера на лету.

Изменение HTML-структуры контейнера

Оборачивание контента дополнительными элементами

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

afterOpen: function() {
  this.$content.wrapInner('<div class="content-wrapper"></div>');
}

Такой подход не нарушает внутреннюю логику Featherlight, поскольку библиотека оперирует ссылкой на .featherlight-content, а не на его прямых потомков.

Добавление служебных элементов

В контейнер можно динамически вставлять дополнительные блоки:

afterOpen: function() {
  $('<div class="content-footer">Дополнительная информация</div>')
    .appendTo(this.$content);
}

Важно учитывать, что повторное открытие lightbox без очистки может привести к дублированию элементов.

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

Автоматическое вычисление размеров

По умолчанию Featherlight автоматически подстраивает размеры .featherlight-content под загруженный контент, используя CSS и перерасчёт при загрузке изображений.

Жёсткое задание размеров

Размеры контейнера можно контролировать через CSS:

.featherlight-content {
  max-width: 80vw;
  max-height: 80vh;
}

Либо программно:

afterOpen: function() {
  this.$content.css({
    width: '600px',
    height: '400px'
  });
}

При фиксированных размерах рекомендуется также управлять переполнением:

.featherlight-content {
  overflow: auto;
}

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

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

  • включать прокрутку только для контента;
  • полностью отключать прокрутку body;
  • реализовывать кастомные скролл-бары.

Пример изоляции прокрутки:

body.featherlight-open {
  overflow: hidden;
}

.featherlight-content {
  max-height: 90vh;
  overflow-y: auto;
}

Класс featherlight-open автоматически добавляется к body при открытии.

Модификация контейнера в зависимости от типа контента

Featherlight определяет тип контента (image, ajax, iframe, html) и сохраняет его в свойстве this.namespace и this.content. Это позволяет адаптировать контейнер под конкретный сценарий:

afterOpen: function() {
  if (this.$content.find('iframe').length) {
    this.$content.addClass('iframe-content');
  }
}

Для изображений часто применяются другие правила центрирования и масштабирования:

.featherlight-content img {
  max-width: 100%;
  height: auto;
  display: block;
}

Переопределение контейнера через шаблон

Featherlight поддерживает переопределение HTML-шаблона через опцию template:

$.featherlight({
  template:
    '<div class="featherlight custom-lightbox">' +
      '<div class="featherlight-content custom-content"></div>' +
    '</div>'
});

Такой подход позволяет полностью контролировать структуру контейнера, включая:

  • добавление заголовков;
  • встроенные кнопки;
  • декоративные элементы.

При использовании собственного шаблона необходимо сохранять класс .featherlight-content, так как библиотека ориентируется на него при вставке контента.

Реакция контейнера на изменения контента

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

this.resize();

Метод resize() инициирует повторное вычисление размеров и позиционирования контейнера. Его имеет смысл вызывать после:

  • загрузки изображений;
  • AJAX-ответов;
  • изменения DOM внутри .featherlight-content.

Работа с классами состояния

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

  • .featherlight-loading
  • .featherlight-open
  • .featherlight-inner

Пример условной стилизации:

.featherlight-loading .featherlight-content {
  opacity: 0.5;
}

Это позволяет визуально реагировать на этапы жизненного цикла без дополнительного JavaScript-кода.

Очистка и восстановление контейнера

При закрытии lightbox Featherlight удаляет экземпляр из DOM, если не используется повторное открытие. Однако при сложных модификациях рекомендуется явно очищать контейнер:

beforeClose: function() {
  this.$content.empty();
}

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

Итоговая роль контейнера контента

Контейнер .featherlight-content является центральной точкой кастомизации Featherlight. Через него реализуются:

  • визуальные изменения;
  • управление размерами и прокруткой;
  • адаптация под тип контента;
  • интеграция сложных UI-компонентов.

Грамотная модификация контейнера позволяет использовать Featherlight не только как простой lightbox, но и как универсальный модальный слой для интерфейсов различной сложности.

Оглавление