Встроенные фильтры

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

Принцип работы встроенных фильтров

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

$.featherlight(element, {
    filter: 'img'
});

В этом примере фильтр разрешает отображение только элементов <img>. Любой другой контент будет проигнорирован, что позволяет ограничивать тип отображаемых данных без дополнительных проверок.

Типы встроенных фильтров

Featherlight предоставляет несколько предопределённых фильтров, которые охватывают основные сценарии:

  1. 'iframe' — фильтрует контент, создавая встроенный <iframe>. Используется для внешних страниц, видео и документов.
$.featherlight('https://example.com', {
    iframe: true,
    iframeWidth: 600,
    iframeHeight: 400
});
  1. 'image' — автоматически определяет элементы <img> или URL изображений. При открытии выполняется проверка расширения файла и формируется соответствующий тег.
$.featherlight('image.jpg', {
    type: 'image'
});
  1. 'ajax' — загружает контент по AJAX-запросу. Фильтр полезен при динамическом наполнении модального окна из серверных источников.
$.featherlight('/content.html', {
    type: 'ajax'
});
  1. 'html' — для локального HTML-контента. Применяется, когда нужно открыть существующий элемент DOM без переноса его в другую структуру.
$.featherlight($('#popup-content'), {
    type: 'html'
});

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

Featherlight позволяет создавать собственные фильтры, расширяя стандартное поведение. Для этого используется метод $.featherlight.defaults.filter. Новый фильтр — это функция, которая получает переданный контент и должна возвращать true, если элемент допустим, или false для блокировки.

$.featherlight.defaults.filter = function(content) {
    return content.hasClass('allow-lightbox');
};

В этом примере разрешаются только элементы с классом allow-lightbox. Такой подход обеспечивает высокую гибкость и возможность интеграции с любыми системами валидации контента.

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

  1. Перед рендерингом: Featherlight проверяет опцию filter или кастомный фильтр перед созданием окна.
  2. Выбор типа контента: Если фильтр допускает элемент, определяется его тип (image, ajax, html и т.д.).
  3. Отрисовка окна: Контент помещается в структуру модального окна и отображается.

Если фильтр возвращает false, окно не создаётся, что предотвращает ошибки и лишние запросы к серверу.

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

  • Использовать фильтры для безопасности: предотвращение отображения нежелательного HTML или внешнего контента.
  • Комбинировать стандартные и кастомные фильтры для сложных сценариев.
  • Для изображений и видео использовать предопределённые фильтры, так как они автоматически обрабатывают размеры и загрузку.
  • Для динамического контента, получаемого по AJAX, фильтры позволяют проверять корректность данных перед отображением, снижая вероятность ошибок рендеринга.

Интеграция с событиями

Фильтры тесно связаны с событиями Featherlight:

  • beforeOpen — выполняется после проверки фильтра, можно отменить открытие окна.
  • afterContent — срабатывает после загрузки и рендеринга контента, полезно для дополнительных манипуляций.
$.featherlight('#myPopup', {
    filter: '.allowed',
    beforeOpen: function(event) {
        console.log('Проверка фильтра завершена');
    }
});

Фильтры в сочетании с этими событиями позволяют строить сложные модальные интерфейсы с динамическим и безопасным контентом.

Оглавление