Приоритет фильтров

Featherlight — это лёгкая библиотека для создания модальных окон на JavaScript с минимальным количеством зависимостей и гибкой системой расширений. Основой работы является инициализация модального окна через вызов метода $.featherlight() или привязка к элементам через селекторы.

Пример базового подключения:

<link href="featherlight.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="featherlight.min.js"></script>

<a href="#modalContent" data-featherlight="inline">Открыть окно</a>

<div id="modalContent" style="display:none;">
    <h2>Контент модального окна</h2>
    <p>Пример текста внутри окна.</p>
</div>

Основные опции передаются при инициализации и позволяют настраивать анимации, класс модального окна и обработку событий:

$.featherlight('#modalContent', {
    variant: 'custom-class',
    closeOnClick: 'background',
    openSpeed: 300,
    closeSpeed: 300
});

Фильтры и их назначение

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

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

  • inline — контент уже присутствует в DOM, выбирается по селектору.
  • ajax — загружает контент через AJAX-запрос.
  • image — подготавливает изображение для отображения.
  • iframe — встраивает внешний URL в модальное окно через <iframe>.

Каждый фильтр реализует три основных метода:

  1. process — обработка источника данных.
  2. afterContent — действия после вставки контента.
  3. beforeOpen — подготовка окна перед показом.

Приоритет фильтров

Featherlight использует строгую последовательность применения фильтров. Приоритет фильтров определяется:

  1. Явной установкой через атрибут data-featherlight.
  2. Типом передаваемого контента.
  3. Глобальными настройками через $.featherlight.defaults.

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

<a href="image.jpg" data-featherlight="image">Открыть изображение</a>
<a href="page.html" data-featherlight="ajax">Открыть AJAX-контент</a>

В этом примере:

  • Ссылка с data-featherlight="image" гарантированно откроет изображение даже при совпадении с другими фильтрами.
  • Если data-featherlight не указан, Featherlight анализирует тип ссылки и выбирает фильтр автоматически (например, .jpg → image, .html → ajax).

Настройка пользовательских фильтров

Featherlight позволяет создавать собственные фильтры с произвольной логикой. Для этого необходимо определить объект фильтра и зарегистрировать его через $.featherlight.filters.

Пример пользовательского фильтра для Markdown-контента:

$.featherlight.filters.markdown = {
    process: function(content) {
        return marked(content); // преобразование через библиотеку marked.js
    },
    afterContent: function() {
        this.$content.addClass('markdown-rendered');
    }
};

// Использование
$.featherlight('README.md', { filter: 'markdown' });

При этом, если для ссылки указан data-featherlight="markdown", этот фильтр будет иметь приоритет над встроенными фильтрами.

Последовательность проверки фильтров

  1. Проверяется наличие атрибута data-featherlight у элемента.
  2. Если атрибут отсутствует, определяется тип контента (URL изображения, локальный селектор, HTML-страница).
  3. Если ни один фильтр явно не применился, используется фильтр по умолчанию, заданный в $.featherlight.defaults.filter.

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

Управление приоритетом через опции

Featherlight предоставляет опцию filter при вызове метода:

$.featherlight('#modalContent', { filter: 'inline' });

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

$.featherlight('content-source', {
    filter: function(element) {
        return element.hasClass('special') ? 'ajax' : 'inline';
    }
});

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

Взаимодействие фильтров с событиями

Каждый фильтр может реагировать на жизненный цикл окна:

  • beforeOpen — можно изменить содержимое до открытия.
  • afterContent — модификация контента после вставки в DOM.
  • afterOpen — действия после анимации открытия.

Приоритет фильтров влияет и на порядок вызова этих обработчиков. Например, если несколько фильтров потенциально подходят, будет вызван только фильтр с наивысшим приоритетом.

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

  • Для контента, уже присутствующего в DOM, использовать фильтр inline.
  • Для динамически загружаемого HTML — ajax.
  • Для изображений использовать image, чтобы автоматически подгонять размер и добавлять обработку ошибок.
  • Пользовательские фильтры следует регистрировать с уникальным именем и учитывать возможность конфликта с атрибутами data-featherlight.

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

Оглавление