Миграция с версии 1.x

Featherlight — это минималистичная библиотека для создания модальных окон (lightbox) на чистом JavaScript и jQuery. Версия 2.x принесла значительные изменения в структуре, API и обработке событий, что требует внимательной адаптации существующего кода с версии 1.x.

Основные изменения API

1. Инициализация модального окна

В версии 1.x модальные окна создавались следующим образом:

$.featherlight($('#myContent'));

В версии 2.x предпочтительный синтаксис использует объект конфигурации:

$.featherlight({
    content: $('#myContent')
});

Теперь можно передавать дополнительные опции сразу при инициализации, что упрощает кастомизацию.

2. Переход от глобальных опций к экземплярам

В 1.x использовался глобальный объект $.featherlight.defaults для настройки всех окон:

$.featherlight.defaults.closeSpeed = 300;

В 2.x рекомендуется использовать настройку через объект при вызове, хотя глобальные defaults остались:

$.featherlight($('#myContent'), {
    closeSpeed: 300
});

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

Изменения в контенте

1. Работа с HTML, изображениями и AJAX

В 1.x разные типы контента требовали различных методов или плагинов (featherlight.gallery, featherlight.image).

В 2.x все типы контента унифицированы:

// HTML-контент
$.featherlight('<div>Привет, мир!</div>');

// AJAX-загрузка
$.featherlight({
    ajax: '/content.html'
});

// Изображение
$.featherlight('image.jpg');

Теперь не нужно подключать отдельные расширения для изображений или галерей — библиотека сама определяет тип контента по переданному параметру.

2. Обработка функций контента

Функции, возвращающие контент, заменяют прямую вставку HTML. Пример для динамического контента:

$.featherlight(function(){
    return '<p>Текущая дата: ' + new Date().toLocaleDateString() + '</p>';
});

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

События и колбеки

Версия 2.x переработала систему событий. Основные изменения:

  • События теперь привязываются через on или опции объекта.
  • Названия событий стали более структурированными: beforeOpen, afterOpen, beforeClose, afterClose.

Пример использования:

$.featherlight({
    content: '<p>Пример</p>',
    beforeOpen: function(event){
        console.log('Перед открытием окна');
    },
    afterClose: function(event){
        console.log('Окно закрыто');
    }
});

Старые события типа open, close больше не поддерживаются напрямую, что требует переписывания обработчиков.

Классы и структура DOM

1. Основные изменения в DOM

В версии 2.x структура модального окна упрощена и стала более предсказуемой:

<div class="featherlight">
    <div class="featherlight-content">
        <!-- Ваш контент -->
    </div>
</div>
  • Класс featherlight теперь всегда используется для контейнера.
  • featherlight-content — отдельный контейнер для содержимого.
  • Изменился способ добавления дополнительных классов и стилей: вместо wrapperClass используется опция variant.
$.featherlight('<p>Текст</p>', {
    variant: 'custom-style'
});

2. Галереи и навигация

Ранее галереи создавались через featherlight.gallery. В версии 2.x галереи интегрированы в основной API:

$('a.gallery-item').featherlightGallery({
    previous: 'Назад',
    next: 'Вперед'
});
  • Методы next, previous управляются через объект конфигурации.
  • Элементы галереи можно группировать по атрибуту data-featherlight-gallery.

Изменения в событиях jQuery

  • В 1.x использовались события open.featherlight, close.featherlight.
  • В 2.x сохранена совместимость, но рекомендуется использовать объектные колбеки (beforeOpen, afterClose) вместо глобальных событий для повышения читаемости и предсказуемости кода.

Рекомендации по миграции

  1. Проверить все вызовы $.featherlight() и переписать их в объектный формат.
  2. Переписать все обработчики событий через новые колбеки.
  3. Проверить использование галерей и изображений, удалить устаревшие плагины.
  4. Обновить кастомные классы с wrapperClass на variant.
  5. Тестировать динамический контент, используя функции для генерации контента, чтобы избежать конфликтов с DOM.

Ключевые преимущества версии 2.x

  • Унифицированный API для всех типов контента.
  • Более гибкая и настраиваемая система колбеков.
  • Простая интеграция галерей без дополнительных расширений.
  • Предсказуемая структура DOM с едиными CSS-классами.
  • Лучшая совместимость с современными версиями jQuery и ES6.

Эти изменения делают Featherlight 2.x более современным, модульным и удобным для масштабируемых проектов.

Оглавление