Масштабирование контента

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

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

$.featherlight('<p>Пример контента</p>', {
    closeOnClick: 'background',
    closeOnEsc: true
});

Масштабирование контента

Featherlight поддерживает адаптивное масштабирование содержимого модального окна в зависимости от размеров экрана и исходного контента. Масштабирование осуществляется через CSS и встроенные настройки библиотеки. Для изображений, например, применяются свойства max-width и max-height, чтобы окно не выходило за пределы видимой области браузера.

.featherlight img {
    max-width: 90vw;
    max-height: 90vh;
}

Ключевые моменты масштабирования:

  • max-width и max-height контролируют размеры окна относительно видимой области (viewport).
  • Использование процентов (vw, vh) обеспечивает адаптивность на разных устройствах.
  • Автоматическое выравнивание по центру осуществляется через CSS-свойства .featherlight { display: flex; justify-content: center; align-items: center; }.

Масштабирование динамического контента

Featherlight позволяет отображать динамически загружаемый контент (AJAX или JavaScript). В таких случаях размеры окна подстраиваются после полной загрузки контента.

$.featherlight({
    ajax: 'content.html',
    afterContent: function() {
        this.$content.css({
            'max-width': '80vw',
            'max-height': '80vh'
        });
    }
});

afterContent — хук, который вызывается после вставки содержимого. Он часто используется для изменения размеров модального окна в зависимости от полученных данных.

Особенности динамического масштабирования:

  • Контент, загружаемый через AJAX, может иметь непредсказуемые размеры.
  • Настройка размеров после загрузки предотвращает выход окна за пределы экрана.
  • Использование CSS overflow: auto внутри модального окна обеспечивает прокрутку содержимого при превышении доступного пространства.

Настройка масштабирования для изображений

Featherlight имеет встроенные возможности работы с изображениями через расширение featherlight.image. Оно автоматически подстраивает размеры изображения под окно, сохраняя пропорции.

$('a.image-link').featherlight({
    type: 'image',
    afterContent: function() {
        this.$content.css({
            'max-width': '95vw',
            'max-height': '95vh'
        });
    }
});

Особенности работы с изображениями:

  • Автоматическое определение исходного размера изображения.
  • Поддержка пропорционального масштабирования с сохранением соотношения сторон.
  • Возможность добавления CSS-анимаций для плавного появления окна.

Масштабирование встроенных элементов

Featherlight позволяет использовать элементы DOM, уже присутствующие на странице, как контент модального окна. Это полезно для форм, текстовых блоков и других компонентов.

$('#open-modal').featherlight($('#hidden-form'), {
    persist: true,
    afterContent: function() {
        this.$content.css({
            'max-width': '70vw',
            'max-height': '70vh',
            'overflow-y': 'auto'
        });
    }
});
  • persist: true позволяет использовать один и тот же элемент повторно без клонирования.
  • Контент сохраняет внутренние события и стили.
  • Прокрутка (overflow-y: auto) предотвращает обрезку содержимого при небольших экранах.

Использование пользовательских функций масштабирования

Featherlight предоставляет возможность задавать функции для вычисления размеров окна на лету. Например, можно изменить ширину модального окна в зависимости от ширины экрана.

$.featherlight('<p>Контент</p>', {
    afterContent: function() {
        const viewportWidth = $(window).width();
        this.$content.css('width', viewportWidth * 0.6);
    }
});

Преимущества динамического подхода:

  • Возможность адаптировать окно под нестандартные макеты.
  • Легкость интеграции с другими библиотеками и фреймворками.
  • Контроль над масштабированием без изменения CSS-файлов.

Работа с событиями масштабирования

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

  • beforeOpen — вызывается перед открытием окна.
  • afterContent — вызывается после вставки контента.
  • afterOpen — вызывается после завершения анимации открытия.
  • afterClose — вызывается после закрытия окна.

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

$.featherlight('<p>Контент</p>', {
    afterOpen: function() {
        $(window).on('resize.featherlight', () => {
            this.$content.css({
                'max-width': $(window).width() * 0.8,
                'max-height': $(window).height() * 0.8
            });
        });
    },
    afterClose: function() {
        $(window).off('resize.featherlight');
    }
});
  • Хуки позволяют создавать полностью адаптивные модальные окна.
  • Привязка и отвязка событий предотвращает утечки памяти.
  • Масштабирование окна автоматически реагирует на изменение размера экрана.

Интеграция с CSS-анимациями

Featherlight легко интегрируется с CSS-анимациями для плавного масштабирования. Можно использовать трансформации scale и переходы transition, чтобы окно увеличивалось или уменьшалось плавно.

.featherlight {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.featherlight-show {
    transform: scale(1);
    opacity: 1;
}

.featherlight-hide {
    transform: scale(0.8);
    opacity: 0;
}
  • transform: scale обеспечивает визуальный эффект масштабирования.
  • transition контролирует скорость и плавность анимации.
  • Классы featherlight-show и featherlight-hide используются библиотекой при открытии и закрытии окна.

Практические рекомендации

  • Для изображений и динамического контента использовать max-width и max-height в процентах от viewport.
  • Для форм и длинных текстов включать overflow: auto, чтобы обеспечить прокрутку.
  • При необходимости создавать пользовательские функции в afterContent для точного контроля размеров.
  • Использовать события resize для адаптивного масштабирования при изменении размеров окна браузера.
  • Комбинировать CSS-анимации с Featherlight для плавного открытия и закрытия модальных окон.

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

Оглавление