Регистрация фильтров

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

Основы фильтров

Фильтр в Featherlight — это функция, которая выполняется на определённом этапе жизненного цикла модального окна. Каждый фильтр имеет уникальное имя и может быть зарегистрирован глобально через $.featherlight.registerFilter(name, function).

Сигнатура фильтра выглядит так:

$.featherlight.registerFilter('имяФильтра', function(content) {
    // content — исходный HTML или объект jQuery
    return content; // Возвращает модифицированный контент
});
  • content — это содержимое модального окна, которое может быть HTML-строкой, jQuery-объектом или DOM-узлом.
  • Фильтр должен вернуть обработанное содержимое. Любая модификация content будет использована при рендеринге окна.

Типы фильтров

Featherlight предоставляет несколько встроенных этапов, на которых можно применять фильтры:

  1. beforeOpen — вызывается перед открытием модального окна. Используется для подготовки данных, подгрузки контента или валидации.
  2. afterOpen — вызывается сразу после отображения окна. Часто применяется для инициализации дополнительных плагинов внутри контента.
  3. beforeClose — срабатывает перед закрытием окна. Можно использовать для сохранения состояния или запрета закрытия.
  4. afterClose — выполняется после закрытия. Позволяет очищать временные данные или удалять динамически созданные элементы.
  5. contentFilter — специализированный фильтр для обработки содержимого, используемого в модальном окне.

Регистрация пользовательского фильтра

Пример фильтра, который добавляет обёртку вокруг контента:

$.featherlight.registerFilter('wrapContent', function(content) {
    var $wrapper = $('<div class="custom-wrapper"></div>');
    $wrapper.append(content);
    return $wrapper;
});

Применение фильтра к модальному окну:

$.featherlight($('#myContent'), {
    filters: ['wrapContent']
});

Важно: порядок фильтров имеет значение. Если назначено несколько фильтров, они будут применяться последовательно в том порядке, в котором указаны в массиве filters.

Глобальная регистрация и использование

Фильтры можно применять глобально ко всем модальным окнам. Для этого регистрируют фильтр и добавляют его к $.featherlight.defaults.filters:

$.featherlight.registerFilter('addTimestamp', function(content) {
    var $content = $(content);
    var timestamp = $('<div class="timestamp"></div>').text(new Date().toLocaleString());
    $content.append(timestamp);
    return $content;
});

$.featherlight.defaults.filters.push('addTimestamp');

После этого каждый вызов Featherlight автоматически пропустит контент через фильтр addTimestamp.

Фильтры для асинхронного контента

Featherlight поддерживает асинхронные операции внутри фильтров. Если фильтр возвращает Promise, Featherlight дождётся его выполнения:

$.featherlight.registerFilter('loadAsync', function(content) {
    return $.ajax({
        url: '/data/content.html',
        method: 'GET'
    }).then(function(response) {
        return response;
    });
});

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

Работа с параметрами фильтра

Фильтры могут получать не только контент, но и параметры окна, что расширяет их функциональность:

$.featherlight.registerFilter('highlight', function(content, settings) {
    var $content = $(content);
    if (settings.highlightColor) {
        $content.css('background-color', settings.highlightColor);
    }
    return $content;
});

$.featherlight($('#myContent'), {
    filters: ['highlight'],
    highlightColor: '#ffeb3b'
});

Таким образом, один фильтр может быть универсальным и настраиваемым через объект settings.

Цепочка фильтров

Featherlight позволяет использовать несколько фильтров одновременно, создавая цепочку преобразований:

$.featherlight.registerFilter('addBorder', function(content) {
    return $('<div class="bordered"></div>').append(content);
});

$.featherlight.registerFilter('addPadding', function(content) {
    return $('<div class="padded"></div>').append(content);
});

$.featherlight($('#myContent'), {
    filters: ['addBorder', 'addPadding']
});

Контент сначала оборачивается в .bordered, а затем в .padded. Такой подход позволяет строить гибкие и переиспользуемые комбинации фильтров.

Рекомендации по использованию

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

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

Оглавление