Программное управление состоянием

Библиотека Isotope предоставляет мощный инструмент для создания динамических и фильтруемых сеток элементов. Основой работы является контейнер, внутри которого располагаются элементы, управляемые Isotope. Инициализация происходит с помощью конструктора:

const iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  percentPosition: true
});
  • .grid — CSS-селектор контейнера.
  • itemSelector — селектор элементов внутри контейнера.
  • layoutMode — способ компоновки (masonry, fitRows, vertical и другие).
  • percentPosition — использование процентного позиционирования для корректного ресайза.

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

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

Фильтрация управляет видимостью элементов на основе классов или функций. Для фильтрации используется метод arrange:

iso.arrange({ filter: '.category-1' });
  • Можно передавать CSS-селектор, функцию или * для отображения всех элементов.
  • Функция фильтрации получает элемент и индекс, возвращает true для отображаемых элементов:
iso.arrange({
  filter: function(itemElem) {
    return itemElem.dataset.type === 'featured';
  }
});

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

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

Сортировка в Isotope управляется через опцию sortBy и объект getSortData. Пример определения критериев:

const iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  getSortData: {
    name: '.name', 
    price: '[data-price] parseFloat',
    date: '[data-date]'
  }
});

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

iso.arrange({ sortBy: 'price', sortAscending: true });
  • sortBy — ключ из getSortData.
  • sortAscending — порядок сортировки (true — по возрастанию, false — по убыванию).
  • Можно комбинировать несколько критериев, задавая массив ключей.

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

Isotope поддерживает динамическое управление элементами через методы append, prepend, remove и reloadItems.

// Добавление новых элементов
const newItems = document.querySelectorAll('.new-item');
iso.appended(newItems);
iso.layout();

// Удаление элементов
const removeItems = document.querySelectorAll('.grid-item.remove');
iso.remove(removeItems);
iso.layout();
  • После добавления или удаления элементов необходимо вызвать layout() для пересчета расположения.
  • Метод reloadItems() используется при массовом изменении содержимого элементов, чтобы обновить внутренние данные Isotope.

Управление состоянием через фильтры и сортировку

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

let isotopeState = {
  filter: '*',
  sortBy: 'name',
  sortAscending: true
};

// Применение состояния
iso.arrange({
  filter: isotopeState.filter,
  sortBy: isotopeState.sortBy,
  sortAscending: isotopeState.sortAscending
});

Изменение состояния позволяет легко интегрировать Isotope с пользовательскими интерфейсами: кнопками фильтров, селекторами сортировки, вкладками. Для динамического обновления состояния:

function updateState(newState) {
  isotopeState = { ...isotopeState, ...newState };
  iso.arrange({
    filter: isotopeState.filter,
    sortBy: isotopeState.sortBy,
    sortAscending: isotopeState.sortAscending
  });
}

Анимации и плавное обновление

Isotope поддерживает плавную анимацию при изменении положения и видимости элементов. Настройка производится через опцию transitionDuration:

const iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  transitionDuration: '0.5s'
});
  • Можно задавать как строку ('0.5s'), так и число (500 — миллисекунды).
  • Анимация применяется ко всем изменениям: сортировка, фильтрация, добавление и удаление элементов.
  • Для сложных анимаций можно использовать CSS-переходы совместно с классами состояния.

Отслеживание изменений состояния

Isotope предоставляет события для реакции на действия пользователя или изменения элементов:

iso.on('arrangeComplete', function(filteredItems) {
  console.log('Количество видимых элементов:', filteredItems.length);
});

Основные события:

  • layoutComplete — завершение перестановки элементов.
  • arrangeComplete — завершение фильтрации и сортировки.
  • removeComplete — завершение удаления элементов.

Использование событий позволяет синхронизировать интерфейс с состоянием сетки и реализовать дополнительные визуальные эффекты.

Интеграция с динамическими данными

При работе с данными из API можно создавать элементы на лету и интегрировать их с Isotope:

fetch('/api/items')
  .then(res => res.json())
  .then(data => {
    const elements = data.map(item => {
      const div = document.createElement('div');
      div.className = 'grid-item';
      div.dataset.price = item.price;
      div.innerHTML = `
${item.name}
${item.description}
`;
      return div;
    });
    document.querySelector('.grid').append(...elements);
    iso.appended(elements);
  });

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

Оглавление