Методы sort и synchronize

Библиотека Muuri обеспечивает гибкое управление сеткой элементов с динамическим расположением, фильтрацией, сортировкой и анимацией. Методы sort и synchronize играют ключевую роль при управлении порядком элементов и синхронизации состояния DOM с внутренним состоянием сетки.

Метод sort

Метод sort позволяет изменять порядок элементов в сетке на основе пользовательской функции сравнения. Он используется для упорядочивания элементов по любым критериям: алфавит, числовые значения, дата, произвольные свойства элементов.

Синтаксис:

grid.sort([compareFunction], [options])

  • compareFunction (необязательный) – функция, определяющая порядок элементов. Аргументы функции — объекты Item Muuri.

  • options (необязательный объект) – дополнительные параметры сортировки:

    • layout (boolean, по умолчанию true) – если true, после сортировки сетка будет анимированно перестроена.
    • sortBy (string, опционально) – ключ, по которому осуществляется сортировка, если используется предопределённая схема.

Пример сортировки по числовому атрибуту:

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

grid.sort((a, b) => {
  const aValue = parseInt(a.getElement().dataset.value);
  const bValue = parseInt(b.getElement().dataset.value);
  return aValue - bValue;
});

Особенности работы метода sort:

  1. Не меняет DOM напрямую: Muuri управляет положением элементов через абсолютное позиционирование, сохраняя их порядок в DOM неизменным до вызова synchronize.
  2. Поддержка анимации: При layout: true перемещения элементов анимируются с учётом текущих настроек сетки.
  3. Сортировка по нескольким критериям: Можно комбинировать функции сравнения, например, сначала по числу, потом по алфавиту.
grid.sort((a, b) => {
  const aNum = parseInt(a.getElement().dataset.number);
  const bNum = parseInt(b.getElement().dataset.number);
  if (aNum === bNum) {
    return a.getElement().textContent.localeCompare(b.getElement().textContent);
  }
  return aNum - bNum;
});

Метод synchronize

Метод synchronize используется для синхронизации внутреннего состояния Muuri с реальным DOM. Он необходим, когда порядок элементов в DOM изменился внешними средствами (например, через appendChild, insertBefore, библиотеку jQuery или другой код), чтобы Muuri корректно отобразил новую структуру.

Синтаксис:

grid.synchronize()

Пример применения:

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

// Элемент добавлен напрямую в DOM
document.querySelector('.grid').appendChild(newItemElement);

// Синхронизируем сетку с DOM
grid.synchronize();

Особенности:

  1. Обновление внутренних массивов items: После вызова synchronize сетка учитывает новые, удалённые или перемещённые элементы.
  2. Не влияет на визуальное расположение: Метод не выполняет анимацию, для перестройки используйте layout().
  3. Поддержка динамических изменений: Позволяет работать с сеткой, когда элементы добавляются или удаляются вне Muuri API.

Совмещение sort и synchronize

На практике часто используют sort для упорядочивания элементов и synchronize для корректного отражения изменений в DOM. Например:

// Сортировка элементов по дате
grid.sort((a, b) => {
  return new Date(a.getElement().dataset.date) - new Date(b.getElement().dataset.date);
});

// Добавлен новый элемент в DOM вручную
document.querySelector('.grid').appendChild(newItemElement);

// Синхронизация сетки
grid.synchronize();

// Обновление позиции и анимация
grid.layout();

Таким образом, sort управляет логикой порядка элементов внутри сетки, а synchronize гарантирует соответствие между DOM и внутренним состоянием Muuri. Совместное использование этих методов обеспечивает корректное отображение и динамическую перестройку сетки при любых изменениях.

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

  • Всегда вызывать synchronize после ручного изменения DOM, чтобы избежать рассинхронизации сетки.
  • Для упорядочивания элементов внутри сетки использовать sort с анимацией через layout: true.
  • При частых динамических изменениях DOM можно комбинировать synchronize и layout в одном цикле для плавного обновления интерфейса.
  • Использовать dataset или другие пользовательские атрибуты для хранения данных, по которым будет происходить сортировка.

Эти методы вместе позволяют создавать динамические, отзывчивые и анимированные сетки, легко адаптируемые под любые изменения контента.

Оглавление