Клонирование элементов

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

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

Клонирование элементов

Клонирование элементов в Featherlight необходимо, когда один и тот же DOM-элемент нужно отображать в модальном окне без удаления его с исходной страницы. По умолчанию Featherlight перемещает элемент в модальное окно, что может нарушить структуру страницы. Чтобы сохранить оригинальный элемент, используется опция persist: 'clone'.

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

$('#openModal').featherlight($('#contentToClone'), {
    persist: 'clone'
});

В этом примере:

#openModal — кнопка или ссылка, вызывающая модальное окно.
#contentToClone — элемент, который нужно клонировать.
persist: 'clone' указывает Featherlight не перемещать элемент, а создать его точную копию внутри модального окна.

Особенности клонирования

События и обработчики Клонированный элемент не наследует привязанные события напрямую. Если на исходном элементе были события через on или addEventListener, их нужно переназначать для клона, либо использовать делегирование событий на родительском элементе.
Состояние элементов формы Значения полей формы и состояние чекбоксов/радиокнопок могут быть скопированы в момент клонирования, но последующие изменения оригинала не будут синхронизироваться с клоном. Для динамических форм нужно вручную обновлять состояние клона через JavaScript.
Каскадное клонирование Featherlight создаёт глубокую копию элемента, включая все вложенные теги и атрибуты. Скрипты внутри клонированного контента не выполняются автоматически, если они находятся внутри <script> тега, так как клонирование происходит через jQuery.clone(true), который не исполняет скрипты.

Настройка поведения модального окна при клонировании

Featherlight позволяет настраивать различные аспекты работы с клонированным контентом через объект options:

$('#openModal').featherlight($('#contentToClone'), {
    persist: 'clone',
    closeOnClick: 'background',
    closeOnEsc: true,
    afterOpen: function(event){
        console.log('Модальное окно открыто с клоном элемента');
    },
    beforeClose: function(event){
        console.log('Модальное окно закрывается');
    }
});

closeOnClick: 'background' — закрывает окно при клике на затемнённый фон.
closeOnEsc: true — закрывает окно при нажатии клавиши Esc.
afterOpen и beforeClose — хуки для выполнения кода после открытия и перед закрытием окна.

Использование клона для интерактивных элементов

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

$('#galleryButton').featherlight($('#gallery'), {
    persist: 'clone',
    afterOpen: function(){
        $(this.$content).find('.carousel').slick();
    }
});

Здесь:

Клонированный элемент галереи инициализируется плагином Slick уже внутри модального окна.
Оригинальная галерея остаётся неизменной на странице.

Отличие `persist: 'clone'` от других опций

persist: true — элемент перемещается в модальное окно и возвращается обратно после закрытия.
persist: 'clone' — создаётся точная копия элемента, исходный элемент остаётся на странице.
Без указания persist — по умолчанию элемент перемещается и может потерять состояние при повторных открытиях.

Клонирование элементов