Предикаты фильтрации

В библиотеке Muuri фильтрация элементов сетки осуществляется с помощью предикатов — функций, которые возвращают булево значение (true или false) для каждого элемента. Предикат определяет, должен ли элемент отображаться в текущей конфигурации сетки. Это позволяет создавать динамические интерфейсы с возможностью скрытия или показа элементов на основе заданных критериев.

const grid = new Muuri('.grid', {
  layout: {
    rounding: false
  }
});

// Пример предиката: показываем только элементы с классом 'active'
grid.filter(item => item.getElement().classList.contains('active'));

В этом примере filter принимает функцию, которая вызывается для каждого элемента. Если функция возвращает true, элемент остаётся видимым; если false — элемент скрывается с анимацией.

Использование предикатов с разными условиями

Предикаты могут быть комплексными, объединяя несколько условий. Например, можно фильтровать элементы по классу и по атрибуту:

grid.filter(item => {
  const el = item.getElement();
  const isActive = el.classList.contains('active');
  const type = el.getAttribute('data-type');
  return isActive && type === 'featured';
});

Здесь фильтрация осуществляется только для элементов, которые одновременно имеют класс active и атрибут data-type="featured".

Динамическая фильтрация

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

let currentFilter = 'all';

function updateFilter(type) {
  currentFilter = type;
  grid.filter(item => {
    if (currentFilter === 'all') return true;
    return item.getElement().dataset.category === currentFilter;
  });
}

document.querySelectorAll('.filter-button').forEach(button => {
  button.addEventListener('click', () => {
    updateFilter(button.dataset.filter);
  });
});

Этот пример демонстрирует, как фильтровать элементы по категориям с помощью кнопок, меняя предикат в реальном времени.

Фильтрация с комбинированными предикатами

Можно объединять несколько предикатов через логические операторы, создавая сложные правила фильтрации. Например:

const isActive = item => item.getElement().classList.contains('active');
const isFeatured = item => item.getElement().dataset.type === 'featured';

grid.filter(item => isActive(item) && isFeatured(item));

Такой подход улучшает читаемость и повторное использование кода.

Фильтрация и анимация

Когда элемент скрывается с помощью предиката, Muuri автоматически применяет плавную анимацию. Можно управлять анимацией через опции layout и show/hide:

grid.filter(item => item.getElement().classList.contains('active'), {
  layout: {
    duration: 400,
    easing: 'ease-in-out'
  },
  hide: {
    duration: 300,
    easing: 'ease-out'
  },
  show: {
    duration: 300,
    easing: 'ease-in'
  }
});

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

Фильтрация по пользовательским данным

Предикаты можно строить на основе любых данных, хранящихся в dataset, объекте элемента или внешних состояниях:

grid.filter(item => {
  const rating = parseInt(item.getElement().dataset.rating, 10);
  return rating >= 4;
});

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

Сброс фильтров

Чтобы вернуть все элементы сетки в отображение, предикат можно установить как всегда возвращающий true:

grid.filter(() => true);

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

Рекомендации по производительности

  • Стараться минимизировать сложность предиката, особенно при большом количестве элементов.
  • Для часто повторяющихся условий использовать отдельные функции-предикаты.
  • Объединять фильтры с сортировкой для более эффективного отображения данных.

Примеры практических сценариев

  1. Категоризация товаров — фильтрация по типу или наличию.
  2. Галерея изображений — показ только тех изображений, которые соответствуют выбранной теме.
  3. Динамические списки задач — скрытие выполненных задач с возможностью фильтрации по приоритету.
  4. Интерактивные доски — комбинация фильтров по статусу и тегам для улучшения видимости элементов.
Оглавление