Изменения в API

Isotope является мощной библиотекой для динамической сортировки, фильтрации и расположения элементов на веб-странице. С течением времени API библиотеки претерпело значительные изменения, что отражается на способах инициализации, настройке и взаимодействии с объектами Isotope. Важно понимать эти изменения, чтобы корректно использовать библиотеку в современных проектах.

Инициализация и создание экземпляра

Ранее инициализация Isotope выполнялась через прямой вызов конструктора с элементом-контейнером и объектом настроек:

var iso = new Isotope(container, {
  itemSelector: '.grid-item',
  layoutMode: 'masonry'
});

В последних версиях API добавлена возможность инициализации с использованием метода .isotope() на jQuery-объекте, что обеспечивает совместимость с jQuery-плагинами и упрощает цепочки вызовов:

$('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});

Основные изменения здесь:

  • Объект настроек стал более строгим: допустимые ключи и значения проверяются библиотекой.
  • LayoutMode поддерживает новые режимы, включая vertical, cellsByRow, а также настраиваемые режимы через расширяемые модули.

Методы фильтрации и сортировки

Ранее фильтрация выполнялась напрямую через вызов метода arrange с ключом filter:

iso.arrange({ filter: '.category-a' });

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

iso.arrange({
  filter: function(itemElem) {
    var number = parseInt(itemElem.querySelector('.number').textContent, 10);
    return number > 10;
  }
});

Ключевые изменения:

  • filter может быть строкой селектора, функцией или массивом селекторов.
  • Возврат true или false из функции фильтрации определяет видимость элемента.
  • Методы сортировки (sortBy) теперь поддерживают кастомные функции и множественные критерии сортировки.

Обновление элементов и реактивные изменения

Ранее при добавлении новых элементов необходимо было повторно вызывать инициализацию или использовать метод appended:

iso.appended(newItems);
iso.layout();

Теперь API позволяет:

  • Динамически добавлять и удалять элементы через методы appended и removed, при этом автоматически вызывается перерасчёт расположения.
  • Использовать MutationObserver или собственные события для автоматического обновления сетки при изменении DOM.
  • Применять метод reloadItems() для полной пересборки внутренних данных без полной реинициализации:
iso.reloadItems();
iso.arrange();

Изменения в событиях

Раньше библиотека поддерживала ограниченный набор событий, таких как arrangeComplete и layoutComplete. В последних версиях добавлены:

  • removeComplete — срабатывает после удаления элементов.
  • appendComplete — после добавления новых элементов.
  • layoutStart и layoutEnd — позволяют отслеживать начало и окончание перестановки элементов.

Пример использования новых событий:

iso.on('layoutComplete', function(event, laidOutItems) {
  console.log('Рассчитано элементов:', laidOutItems.length);
});

Настройка анимации и трансформаций

API анимации стало более гибким:

  • Свойства transitionDuration и hiddenStyle/visibleStyle позволяют детально настраивать анимацию появления и исчезновения элементов.
  • Добавлена поддержка кастомных CSS-трансформаций для отдельных элементов:
var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  transitionDuration: '0.6s',
  hiddenStyle: { opacity: 0, transform: 'scale(0.5)' },
  visibleStyle: { opacity: 1, transform: 'scale(1)' }
});

Изменения касаются как плавности анимации, так и её совместимости с различными браузерами и режимами расположения.

Совместимость и устаревшие методы

Некоторые методы старого API были помечены как deprecated:

  • shuffle теперь рекомендуется заменять на arrange({ sortBy: 'random' }).
  • Старые события без префикса *Complete считаются устаревшими.
  • Опции masonry.columnWidth и fitRows.gutter требуют явного указания размеров через CSS или JavaScript для корректного расчёта сетки.

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

Итоговая структура вызова

Современный подход к использованию Isotope предполагает:

  1. Инициализация с корректными настройками.
  2. Применение динамических фильтров и сортировки.
  3. Реактивное обновление элементов через appended, removed, reloadItems.
  4. Управление анимацией через новые свойства transitionDuration, hiddenStyle, visibleStyle.
  5. Подписка на события layoutComplete, appendComplete, removeComplete для контроля состояния сетки.

Такой подход обеспечивает гибкость, стабильность и совместимость с современными веб-технологиями.

Оглавление