Использование variant

Featherlight — это минималистичная библиотека для создания модальных окон на основе jQuery. Она обеспечивает лёгкую и гибкую систему всплывающих элементов, поддерживая как простые изображения, так и сложные HTML-контейнеры. Библиотека работает через привязку к ссылкам или элементам с использованием атрибутов data-featherlight.

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

Использование `variant`

variant в Featherlight используется для создания разных стилей или типов модальных окон без необходимости создавать отдельные классы или копировать настройки. Это мощный инструмент для кастомизации внешнего вида и поведения всплывающих окон. Значение variant передаётся при инициализации через объект настроек или через атрибут data-featherlight-variant.

Пример инициализации через JavaScript

$.featherlight('<p>Контент окна</p>', {
    variant: 'custom-style'
});

В этом примере создаётся модальное окно с контентом <p>Контент окна</p> и добавляется дополнительный CSS-класс featherlight-custom-style к корневому элементу окна. Это позволяет определить уникальный стиль для данного окна в CSS:

.featherlight-custom-style {
    background-color: #f0f0f0;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

Использование атрибута `data-featherlight-variant`

Для привязки к элементам на странице можно использовать HTML-атрибут:

<a href="image.jpg" data-featherlight="image" data-featherlight-variant="gallery">Открыть изображение</a>

В этом случае при открытии окна к нему автоматически добавится CSS-класс featherlight-gallery, позволяющий применять отдельный стиль для галерейных изображений.

Особенности работы с несколькими вариантами

Featherlight поддерживает передачу нескольких вариантов через пробел:

$.featherlight('<p>Контент окна</p>', {
    variant: 'dark shadowed'
});

В результате элемент получит классы featherlight-dark и featherlight-shadowed, что позволяет комбинировать эффекты. Такой подход особенно удобен для создания темных окон с тенями, а также для динамического добавления анимаций.

.featherlight-dark {
    background-color: #222;
    color: #fff;
}

.featherlight-shadowed {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

Взаимодействие `variant` с методами Featherlight

Метод open() позволяет открывать окно с определённым вариантом:

var instance = $.featherlight('<p>Динамический контент</p>');
instance.open({ variant: 'highlight' });

Можно изменять вариант динамически после открытия через свойство instance.$instance:

instance.$instance
    .removeClass('featherlight-highlight')
    .addClass('featherlight-new-style');

Это позволяет создавать адаптивные окна, которые меняют внешний вид в зависимости от контекста или действий пользователя.

Наследование и расширение вариантов

Featherlight допускает создание собственных подклассов модальных окон с предустановленными вариантами. Это делается через $.extend:

var MyLightbox = $.featherlight.extend({
    variant: 'my-custom-lightbox',
    afterOpen: function() {
        console.log('Окно открыто с кастомным вариантом');
    }
});

new MyLightbox('<p>Контент</p>');

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

Практические рекомендации по работе с `variant`

Использовать семантические имена классов — названия должны отражать функцию или внешний вид окна (error, gallery, notification), чтобы CSS оставался читаемым.
Комбинировать варианты для гибкости — несколько классов позволяют миксовать эффекты (фон, тень, анимация).
Минимизировать изменение DOM вручную — Featherlight автоматически управляет созданием и удалением окна, любые вмешательства должны быть осторожными.
Использовать события — afterOpen, beforeClose, afterClose позволяют динамически изменять классы и стили, что повышает интерактивность.

Заключение по `variant`

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

Каждое окно с уникальным вариантом получает соответствующий CSS-класс featherlight-[variant], что упрощает работу с дизайном и интеграцию с существующими стилями проекта.

Использование variant