Создание собственных фильтров

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

Механизм фильтров

Фильтр в Featherlight представляет собой функцию, которая принимает исходный контент и возвращает модифицированное значение. Основная точка подключения фильтров — это объект $.featherlight.filters. Каждое свойство этого объекта является отдельным фильтром, доступным по имени при инициализации окна.

Пример структуры фильтра:

$.featherlight.filters.myFilter = function(content) {
    // content — исходные данные, переданные в open()
    let modifiedContent = "<div class='custom'>" + content + "</div>";
    return modifiedContent;
};

Ключевые моменты работы фильтров:

  • Фильтр может возвращать строку HTML, DOM-элемент или jQuery-объект.
  • Фильтры могут быть синхронными и асинхронными. Для асинхронных операций используется объект Deferred ($.Deferred()).
  • При наличии нескольких фильтров их можно вызывать последовательно, передавая результат одного фильтра в другой.

Применение фильтров при открытии окна

Фильтр подключается через параметр iframe, ajax, image или собственное имя фильтра при инициализации:

$.featherlight('Пример контента', {
    filter: 'myFilter'
});

Если фильтр отсутствует, Featherlight по умолчанию использует стандартный обработчик, который просто выводит текст или HTML.

Создание асинхронного фильтра

Асинхронные фильтры позволяют получать данные из удалённого источника перед отображением модального окна. Например, загрузка контента с API:

$.featherlight.filters.asyncData = function(content) {
    let deferred = $.Deferred();
    
    $.getJSON(content.url, function(data) {
        deferred.resolve("<div class='api-content'>" + data.html + "</div>");
    }).fail(function() {
        deferred.reject("Ошибка загрузки данных");
    });
    
    return deferred.promise();
};

Применение:

$.featherlight({ url: '/api/content' }, { filter: 'asyncData' });

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

Композиция фильтров

Фильтры можно комбинировать, создавая цепочки обработки контента. Для этого каждый фильтр вызывается последовательно, а результат передаётся следующему. Пример:

$.featherlight.filters.addWrapper = function(content) {
    return "<div class='wrapper'>" + content + "</div>";
};

$.featherlight.filters.highlight = function(content) {
    return content.replace(/(важно)/gi, '<span class="highlight">$1</span>');
};

При открытии окна:

$.featherlight('Текст с важно отметкой', { filter: 'addWrapper' });

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

let content = 'Текст с важно отметкой';
content = $.featherlight.filters.highlight(content);
content = $.featherlight.filters.addWrapper(content);

$.featherlight(content);

Практические советы

  1. Использовать Deferred для асинхронных фильтров, чтобы избежать блокировки интерфейса.
  2. Минимизировать манипуляции DOM внутри фильтров, предпочитая работу с HTML-строкой или jQuery-объектами.
  3. Поддерживать возвращаемые значения: фильтр должен всегда возвращать результат, иначе Featherlight не сможет корректно отобразить контент.
  4. Изолировать логику фильтров, чтобы они оставались независимыми и переиспользуемыми в разных модальных окнах.

Расширенные возможности

Фильтры могут быть использованы для:

  • Встраивания шаблонов на основе сторонних движков (Handlebars, Mustache).
  • Обработки форм и динамического добавления элементов перед отображением.
  • Подключения мультимедийного контента (видео, слайдеры, карты).
  • Реализации пользовательских анимаций через модифицированный HTML или классы CSS.

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

Оглавление