Метод filter

Метод filter является одним из ключевых инструментов библиотеки Muuri, предназначенной для организации и управления сетками элементов в веб-интерфейсе. Этот метод позволяет динамически управлять видимостью элементов сетки, скрывая или отображая их на основании заданных критериев, что особенно полезно для создания фильтруемых галерей, каталогов товаров или интерактивных интерфейсов.

Синтаксис метода

grid.filter(filter, options);

Параметры:

  1. filter – функция, строка или массив элементов, определяющий, какие элементы будут отображаться:

    • Функция – вызывается для каждого элемента сетки. Если функция возвращает true, элемент остаётся видимым, если false – скрывается.
    • Строка – CSS-селектор, соответствующий элементам, которые должны быть видимыми.
    • Массив элементов – конкретные элементы, которые нужно показать, скрывая остальные.

  2. options (необязательный объект) – позволяет настраивать поведение анимации и фильтрации:

    • layout (boolean, по умолчанию true) – применять ли перерисовку сетки после фильтрации.
    • sort (boolean, по умолчанию false) – пересортировать элементы после фильтрации.
    • onFinish (функция) – колбэк, вызываемый после завершения фильтрации.

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

Фильтрация с функцией

const grid = new Muuri('.grid');

grid.filter(item => item.getElement().dataset.category === 'books');

В этом примере отображаются только элементы, у которых атрибут data-category равен 'books'. Остальные элементы скрываются с анимацией.

Фильтрация с селектором

grid.filter('.featured');

Скрываются все элементы, кроме тех, которые соответствуют CSS-классу .featured. Это позволяет быстро фильтровать элементы по заранее определённым классам.

Фильтрация с массивом элементов

const itemsToShow = [
  document.querySelector('#item1'),
  document.querySelector('#item2')
];

grid.filter(itemsToShow);

В этом случае будут отображены только выбранные элементы из массива, а остальные автоматически скрыты.

Настройка анимации и поведения

Метод filter поддерживает гибкую настройку анимации:

grid.filter('.active', {
  layout: true,
  sort: false,
  onFinish: () => console.log('Фильтрация завершена')
});
  • layout: true – сетка перестраивается после фильтрации. Это важно для сохранения аккуратного расположения элементов.
  • sort: false – сохраняет текущий порядок элементов. Можно включить сортировку для динамической перестановки.
  • onFinish – позволяет выполнить дополнительные действия, например, обновить счётчик видимых элементов или запускать кастомные эффекты.

Комбинирование фильтров

Фильтры можно комбинировать, используя разные подходы:

grid.filter(item => 
  item.getElement().classList.contains('active') &&
  item.getElement().dataset.category === 'books'
);

В этом примере одновременно применяются два условия: элемент должен иметь класс active и принадлежать категории books. Такой подход позволяет строить сложные динамические фильтры для интерактивных интерфейсов.

Отмена фильтрации

Чтобы вернуть все элементы сетки в исходное состояние, используется фильтр null:

grid.filter(null);

Это полностью сбрасывает все ранее применённые фильтры и отображает все элементы с плавной анимацией.

Оптимизация работы

  • Для больших сеток рекомендуется минимизировать количество DOM-операций внутри функции фильтра, чтобы не замедлять перерисовку.
  • Фильтрация по селекторам или заранее подготовленным массивам элементов работает быстрее, чем сложные функции с вычислениями для каждого элемента.
  • Использование onFinish позволяет синхронизировать внешние интерфейсы с состоянием сетки, например обновлять индикаторы выбранных категорий.

Метод filter является мощным инструментом для управления видимостью элементов в Muuri. Правильное использование фильтров с функциями, селекторами или массивами элементов позволяет создавать динамичные, интерактивные и отзывчивые интерфейсы, сохраняя при этом плавность анимации и порядок элементов сетки.

Оглавление