Параметр onResize

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

Назначение onResize

Параметр onResize представляет собой функцию обратного вызова, которая вызывается каждый раз, когда модальное окно меняет свои размеры. Это может происходить как при изменении размеров браузера, так и при динамических изменениях контента внутри окна.

Использование onResize позволяет:

  • корректировать размеры модального окна под контент;
  • выравнивать элементы внутри окна после изменения размеров;
  • запускать дополнительные скрипты, например пересчет сетки или перерендеринг графических элементов;
  • предотвращать появление горизонтальной или вертикальной прокрутки, если она нежелательна.

Синтаксис

$.featherlight(element, {
    onResize: function(event) {
        // действия при изменении размеров
    }
});

Параметр event содержит объект события, связанный с изменением размеров. Однако чаще всего используется именно контекст this, который ссылается на экземпляр Featherlight. Через него можно получить доступ к основным элементам окна:

this.$instance // контейнер модального окна
this.$content  // контент модального окна
this.$overlay  // фон модального окна

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

Автоматическое центрирование окна при изменении размера браузера:

$.featherlight('#myContent', {
    onResize: function() {
        var $window = $(window);
        var $modal = this.$instance;
        $modal.css({
            top: ($window.height() - $modal.outerHeight()) / 2,
            left: ($window.width() - $modal.outerWidth()) / 2
        });
    }
});

В этом примере onResize используется для постоянного центрирования окна независимо от изменения размеров окна браузера.

Динамическая подгонка контента под размер окна:

$.featherlight('#imageGallery', {
    onResize: function() {
        var maxHeight = $(window).height() * 0.8;
        var maxWidth = $(window).width() * 0.8;
        this.$content.find('img').css({
            maxHeight: maxHeight,
            maxWidth: maxWidth
        });
    }
});

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

Особенности поведения

  1. Контекст вызова: внутри onResize this всегда ссылается на экземпляр Featherlight. Использование стрелочной функции для определения onResize приведет к потере контекста.
  2. Вызов при открытии окна: onResize вызывается не только при изменении размеров браузера, но и при первом рендеринге модального окна. Это позволяет сразу подстроить контент под начальные размеры окна.
  3. Производительность: поскольку событие может срабатывать часто при изменении размеров окна, рекомендуется минимизировать тяжелые вычисления внутри функции onResize или использовать throttling/debouncing.

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

function debounce(func, wait) {
    let timeout;
    return function() {
        clearTimeout(timeout);
        timeout = setTimeout(func.bind(this), wait);
    };
}

$.featherlight('#myContent', {
    onResize: debounce(function() {
        this.$instance.css('top', ($(window).height() - this.$instance.outerHeight()) / 2);
    }, 100)
});

Это предотвращает множественные вызовы функции при непрерывном изменении размеров окна.

Взаимодействие с другими параметрами

onResize часто комбинируют с параметрами:

  • beforeOpen — для подготовки размеров перед открытием окна;
  • afterContent — для подгонки контента после вставки HTML;
  • afterResize (если определен вручную) — для выполнения дополнительных действий после стандартной обработки изменения размеров.

Использование onResize в связке с этими событиями позволяет полностью контролировать поведение окна при любых изменениях внешнего и внутреннего контента.

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

  • Оптимизация производительности: избегать сложных DOM-операций внутри onResize; использовать кэширование элементов (this.$content.find(...)).
  • Адаптивный дизайн: задавать размеры контента в процентах от окна, а не фиксированными значениями.
  • Мобильные устройства: учитывать работу с виртуальной клавиатурой и изменением viewport на iOS/Android.
  • Центрирование и позиционирование: при динамическом контенте всегда пересчитывать координаты, иначе окно может «вылезать» за границы экрана.

Параметр onResize является ключевым инструментом для создания адаптивных и гибких модальных окон в Featherlight, позволяя контролировать каждый аспект отображения контента в зависимости от размера окна и особенностей интерфейса.

Оглавление