Параметр contentFilters

Библиотека Featherlight представляет собой лёгкий и гибкий инструмент для создания модальных окон (lightbox) в JavaScript. Одним из ключевых элементов, обеспечивающих адаптивное отображение содержимого, является параметр contentFilters. Он позволяет определить, каким образом Featherlight должен интерпретировать и обрабатывать источник контента перед его вставкой в модальное окно.

Назначение contentFilters

contentFilters отвечает за фильтрацию и трансформацию контента, получаемого по ссылке или из DOM-элемента. Он принимает объект, в котором ключи — это условия, а значения — функции фильтров. Каждая функция фильтра проверяет контент на соответствие условию и возвращает обработанный результат.

Основная задача параметра — корректно определить тип контента (HTML, изображение, iframe, AJAX) и преобразовать его так, чтобы Featherlight мог корректно его отобразить.

Структура объекта contentFilters

Объект contentFilters состоит из пар ключ–значение:

$.featherlight.defaults.contentFilters = {
    filterName: function (link, $link) {
        // Логика фильтрации
        return transformedContent;
    }
};
  • filterName — произвольное название фильтра. В стандартной конфигурации Featherlight используются фильтры image, ajax, iframe, html.
  • link — строка с исходным URL или селектором.
  • $link — jQuery-объект элемента, который вызвал открытие модального окна.
  • return — результат обработки: HTML-строка, jQuery-элемент или URL, который Featherlight сможет встроить в окно.

Стандартные фильтры

  1. image Определяет, является ли ссылка изображением по расширению (.jpg, .png, .gif и т.д.). Если фильтр срабатывает, Featherlight создаёт <img> с указанным источником.

    $.featherlight.defaults.contentFilters.image = function (link) {
    if (link.match(/\.(png|jpg|jpeg|gif|bmp|webp)$/i)) {
        return $('<img>').attr('src', link);
    }
};

  2. ajax Используется для подгрузки содержимого с сервера через AJAX-запрос. Возвращает результат запроса в формате HTML.

    $.featherlight.defaults.contentFilters.ajax = function (link) {
    if (link.indexOf('#') === -1) {
        return $.ajax({url: link, type: 'GET', dataType: 'html'});
    }
};

  3. iframe Применяется для встраивания внешних страниц через <iframe>. Обычно фильтр срабатывает, если ссылка указывает на URL, начинающийся с http.

    $.featherlight.defaults.contentFilters.iframe = function (link) {
    if (link.match(/^https?:\/\//)) {
        return $('<iframe>', {src: link, frameborder: 0, width: '100%', height: '100%'});
    }
};

  4. html Обрабатывает внутренние элементы страницы, например, блоки, определённые селекторами. Возвращает jQuery-объект выбранного содержимого.

    $.featherlight.defaults.contentFilters.html = function (link, $link) {
    if (link[0] === '#') {
        return $(link).clone().show();
    }
};

Пользовательские фильтры

contentFilters можно расширять собственными функциями для обработки нестандартных типов данных, например, видео или SVG. Важный момент: фильтры вызываются последовательно в порядке перечисления в объекте. Featherlight использует первый фильтр, который возвращает ненулевое значение.

Пример фильтра для видео:

$.featherlight.defaults.contentFilters.video = function (link) {
    if (link.match(/\.(mp4|webm|ogg)$/i)) {
        return $('<video>', {controls: true, src: link, width: '100%'});
    }
};

После добавления этого фильтра, любые ссылки на видеофайлы автоматически будут открываться внутри модального окна с HTML5-плеером.

Управление порядком фильтров

Порядок ключей в объекте contentFilters влияет на приоритет фильтров. Featherlight проверяет их последовательно: первый подходящий фильтр блокирует выполнение последующих. Это позволяет реализовать точную логику отображения контента.

Применение на практике

  1. Инициализация Featherlight с кастомными фильтрами:
$('a.lightbox').featherlight({
    contentFilters: {
        image: $.featherlight.defaults.contentFilters.image,
        video: $.featherlight.defaults.contentFilters.video,
        html: $.featherlight.defaults.contentFilters.html
    }
});
  1. Динамическая замена фильтров: Фильтры можно менять глобально или на конкретном вызове:
$.featherlight.defaults.contentFilters.image = function (link) {
    // Добавлена обработка WebP и аватарок
    if (link.match(/\.(png|jpg|jpeg|gif|webp|avatar)$/i)) {
        return $('<img>').attr('src', link).addClass('lightbox-image');
    }
};
  1. Асинхронные фильтры: Фильтры могут возвращать промисы (например, AJAX-запрос), Featherlight корректно ждёт завершения промиса перед отображением контента.
$.featherlight.defaults.contentFilters.ajax = function (link) {
    return $.get(link);
};

Важные нюансы

  • Если фильтр возвращает undefined или null, Featherlight продолжает проверку следующих фильтров.
  • Любой фильтр может модифицировать DOM-элемент, добавлять классы, атрибуты, стили.
  • Для сложного контента (например, видео с превью и описанием) рекомендуется использовать пользовательский фильтр, который возвращает контейнер с нужной разметкой.

Резюме особенностей

  • contentFilters управляет преобразованием контента перед отображением.
  • Поддерживает стандартные типы: изображение, HTML, iframe, AJAX.
  • Возможна реализация пользовательских фильтров для любых данных.
  • Фильтры проверяются по порядку, первый успешный блокирует дальнейшие.
  • Позволяет интегрировать асинхронные источники данных через промисы.

Эффективное использование contentFilters обеспечивает гибкость Featherlight и позволяет создавать лёгкие, адаптивные модальные окна для любых типов контента.

Оглавление