Активные фильтры и кнопки сортировки

В Isotope фильтрация элементов осуществляется с помощью CSS-классов и атрибутов данных. Основная идея заключается в том, чтобы у каждого элемента контейнера был набор категорий, к которым он принадлежит. Фильтры применяются путём передачи селектора в метод isotope({ filter: 'селектор' }).

// Инициализация Isotope
var grid = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});

// Применение фильтра
grid.isotope({ filter: '.category-a' });

В данном примере все элементы с классом .category-a будут видимы, остальные будут скрыты. Скрытие и отображение происходит с использованием CSS-свойства display и анимации, заданной в конфигурации Isotope.

Работа с активными кнопками фильтров

Чтобы визуально обозначить, какой фильтр активен, часто используют CSS-класс, например .is-checked. Для динамического переключения фильтров на кнопках необходимо использовать событие click и обновлять класс активного состояния:

var filtersElem = document.querySelector('.filters-button-group');
filtersElem.addEventListener('click', function(event) {
  if (!matchesSelector(event.target, 'button')) {
    return;
  }
  var filterValue = event.target.getAttribute('data-filter');
  grid.isotope({ filter: filterValue });

  // Управление активным состоянием кнопки
  var buttons = filtersElem.querySelectorAll('button');
  buttons.forEach(function(btn) {
    btn.classList.remove('is-checked');
  });
  event.target.classList.add('is-checked');
});

Использование делегирования событий через родительский контейнер .filters-button-group позволяет избежать привязки обработчиков к каждой кнопке отдельно, что упрощает поддержку и масштабирование кода.

Множественные фильтры

Isotope поддерживает одновременное применение нескольких фильтров. Для этого используют составные селекторы или массивы фильтров, объединяя их в одну строку через запятую:

var filters = ['.category-a', '.category-b'];
grid.isotope({ filter: filters.join(', ') });

При этом элементы, соответствующие любому из фильтров, будут отображены. Для сложной логики, например фильтрации по нескольким критериям одновременно (категория + цвет), удобно применять комбинацию классов и функции-фильтры:

grid.isotope({
  filter: function() {
    var category = this.classList.contains('category-a');
    var color = this.classList.contains('red');
    return category && color;
  }
});

Функциональный фильтр позволяет создавать гибкие правила, используя любые свойства элементов или их атрибуты data-*.

Сортировка элементов

Сортировка элементов в Isotope осуществляется через опцию sortBy. Можно сортировать по тексту, числовому значению или по любому атрибуту данных:

grid.isotope({
  getSortData: {
    name: '.name',        // текстовое содержимое элемента с классом .name
    price: '[data-price]' // значение атрибута data-price
  }
});

Применение сортировки выполняется вызовом:

grid.isotope({ sortBy: 'price', sortAscending: true });

Опция sortAscending позволяет управлять направлением сортировки — по возрастанию или убыванию.

Активные кнопки сортировки

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

var sortButtons = document.querySelector('.sort-button-group');
sortButtons.addEventListener('click', function(event) {
  if (!matchesSelector(event.target, 'button')) {
    return;
  }
  var sortValue = event.target.getAttribute('data-sort-by');
  grid.isotope({ sortBy: sortValue });

  var buttons = sortButtons.querySelectorAll('button');
  buttons.forEach(function(btn) {
    btn.classList.remove('is-checked');
  });
  event.target.classList.add('is-checked');
});

Использование CSS-класса .is-checked позволяет пользователю сразу видеть, какой критерий сортировки активен.

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

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

grid.isotope({
  filter: '.category-a',
  sortBy: 'price',
  sortAscending: true
});

Для интерфейсов с множественными кнопками фильтров и сортировки рекомендуется хранить текущие состояния в переменных, чтобы при любом изменении можно было заново применять оба параметра без конфликта:

var currentFilter = '*';
var currentSort = 'name';

filtersElem.addEventListener('click', function(event) {
  currentFilter = event.target.getAttribute('data-filter');
  grid.isotope({ filter: currentFilter, sortBy: currentSort });
});

sortButtons.addEventListener('click', function(event) {
  currentSort = event.target.getAttribute('data-sort-by');
  grid.isotope({ filter: currentFilter, sortBy: currentSort });
});

Такой подход обеспечивает консистентность интерфейса и плавность работы с большим количеством элементов.

Анимация при фильтрации и сортировке

Isotope позволяет настраивать скорость анимации и стиль перехода при фильтрации и сортировке через опцию transitionDuration:

var grid = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
  transitionDuration: '0.6s'
});

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

Комбинация с динамическим контентом

При добавлении новых элементов через JavaScript необходимо обновлять состояние Isotope с помощью метода appended:

var newItems = createNewItems(); // создаёт DOM-элементы
grid.appended(newItems);
grid.isotope('layout'); // пересчитывает расположение

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

Резюме по работе с кнопками

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

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

Оглавление