onResize

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

Определение и синтаксис

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

Простейший синтаксис при инициализации:

$.featherlight(content, {
    onResize: function(event) {
        // this — текущий экземпляр Featherlight
        console.log('Размер окна изменён');
    }
});

Параметры:

event — объект события jQuery, передаваемый автоматически.
this внутри функции ссылается на текущий экземпляр Featherlight, позволяя изменять содержимое или стили окна в момент ресайза.

Глобальная настройка

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

$.featherlight.defaults.onRes ize = function(event) {
    this.$content.css('max-height', $(window).height() * 0.8);
};

В данном примере высота содержимого модального окна всегда будет 80% от высоты окна браузера.

Контекст вызова

Внутри onResize доступно несколько полезных свойств текущего экземпляра:

this.$instance — jQuery-объект модального окна.
this.$content — jQuery-объект контейнера контента.
this.$overlay — jQuery-объект затемняющей подложки.
this.settings — объект настроек конкретного экземпляра Featherlight.

Использование этих свойств позволяет динамически изменять размер, стиль и позиционирование окна в зависимости от текущих условий:

$.featherlight('#myContent', {
    onResize: function() {
        var maxWidth = $(window).width() * 0.7;
        this.$content.css('max-width', maxWidth + 'px');
        this.$content.css('margin', '0 auto');
    }
});

Особенности работы

Автоматический вызов при открытии окна onResize вызывается не только при изменении размеров окна браузера, но и сразу после открытия модального окна, что позволяет сразу корректно рассчитать размеры содержимого.
Производительность При частых изменениях размеров окна (resize event) функция может вызываться много раз. Рекомендуется использовать дебаунсинг, чтобы избежать лишней нагрузки:

$.featherlight('#myContent', {
    onResize: (function() {
        var timer;
        return function() {
            clearTimeout(timer);
            var self = this;
            timer = setTimeout(function() {
                self.$content.css('max-height', $(window).height() * 0.8);
            }, 100);
        };
    })()
});

Совместимость с адаптивным контентом Если внутри модального окна содержатся изображения или фреймы, которые могут изменять размер после загрузки, onResize позволяет подстроить размеры окна под новый контент.

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

Ограничение высоты содержимого:

$.featherlight('#gallery', {
    onResize: function() {
        var maxHeight = $(window).height() - 100;
        this.$content.css('max-height', maxHeight + 'px');
        this.$content.css('overflow-y', 'auto');
    }
});

Центрирование окна:

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

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

$.featherlight('<div id="dynamicContent"></div>', {
    onResize: function() {
        var contentHeight = this.$content.prop('scrollHeight');
        var maxHeight = $(window).height() * 0.9;
        this.$content.css('height', Math.min(contentHeight, maxHeight));
    }
});

Взаимодействие с другими событиями

Событие onResize часто используется вместе с:

onOpen — для первичной установки размеров окна.
onContent — для перерасчета размеров после загрузки динамического контента.
onClose — если нужно очищать временные стили или обработчики.

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