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

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

В Muuri фильтрация осуществляется через метод filter(). Этот метод принимает в качестве аргумента функцию или строку с CSS-селектором. При использовании классов чаще всего применяются селекторы вида .класс, где .класс — имя CSS-класса, по которому производится фильтрация.

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

grid.filter('.active'); // Показывает только элементы с классом "active"

В этом примере все элементы, не имеющие класса active, будут скрыты, а сетка автоматически перестроится с анимацией.

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

Muuri поддерживает фильтрацию по нескольким классам одновременно. Существует два подхода:

Через CSS-селектор с несколькими классами

grid.filter('.active.featured'); // Показывает элементы, которые имеют одновременно классы "active" и "featured"

Через функцию обратного вызова

Функция позволяет более гибко задавать условия фильтрации. Функция получает каждый элемент сетки в виде объекта item, доступ к DOM-узлу элемента осуществляется через item.getElement().

grid.filter(item => {
  const el = item.getElement();
  return el.classList.contains('active') || el.classList.contains('featured');
});

В этом примере будут отображены все элементы, содержащие либо класс active, либо класс featured.

Динамическое добавление и удаление фильтров

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

const activeButton = document.querySelector('#filter-active');
const featuredButton = document.querySelector('#filter-featured');

activeButton.addEventListener('click', () => grid.filter('.active'));
featuredButton.addEventListener('click', () => grid.filter('.featured'));

Для отмены фильтрации и отображения всех элементов используется filter() без аргументов:

grid.filter(); // Показывает все элементы

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

Muuri позволяет одновременно фильтровать и сортировать элементы. Например, сначала можно отфильтровать по классу, а затем отсортировать видимые элементы по атрибуту:

grid.filter('.active')
    .sort((a, b) => {
        const aValue = parseInt(a.getElement().dataset.order, 10);
        const bValue = parseInt(b.getElement().dataset.order, 10);
        return aValue - bValue;
    });

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

Плавная анимация при фильтрации

Скрытие и показ элементов при фильтрации происходит с анимацией по умолчанию. Настройки анимации можно менять через параметры при инициализации сетки:

const grid = new Muuri('.grid', {
  layout: {
    duration: 400,
    easing: 'ease-in-out'
  },
  dragEnabled: false
});

duration отвечает за длительность анимации в миллисекундах, а easing — за кривую анимации. Это позволяет добиться плавного и визуально привлекательного перехода при фильтрации элементов по классам.

Фильтрация с учётом нескольких критериев

Часто требуется фильтровать элементы одновременно по нескольким условиям: класс, атрибут, состояние. Для этого используется функция фильтрации:

grid.filter(item => {
  const el = item.getElement();
  return el.classList.contains('active') && el.dataset.type === 'premium';
});

Здесь будут показаны только элементы, которые имеют класс active и атрибут data-type со значением premium. Такой подход позволяет создавать комплексные фильтры без необходимости менять структуру HTML или CSS.