API расширения

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

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

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

Пример добавления метода для подсчета видимых элементов:

Muuri.prototype.countVisible = function() {
  return this.getItems().filter(item => item.isVisible()).length;
};

const grid = new Muuri('.grid');
console.log(grid.countVisible());

Ключевые моменты:

  • Методы, добавленные через прототип, становятся доступными всем экземплярам сетки.
  • Использование встроенных методов getItems() и isVisible() обеспечивает интеграцию с базовым функционалом Muuri.
  • Позволяет создавать функции для статистики, кастомной фильтрации или сложной логики сортировки.

Подписка на события

Muuri поддерживает богатую систему событий, которые можно использовать для расширения функционала сетки. События делятся на несколько категорий:

  1. Элементы сетки: add, remove, show, hide, move.
  2. Драг-н-дроп: dragStart, dragMove, dragEnd.
  3. Состояние сетки: layoutStart, layoutEnd, filter, sort.

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

grid.on('add', items => {
  console.log(`Добавлено ${items.length} элементов`);
});

grid.on('dragEnd', item => {
  console.log(`Элемент ${item.getElement().textContent} перемещён`);
});

Особенности использования событий:

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

Кастомные фильтры и сортировка

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

Пример пользовательской фильтрации по атрибуту data-category:

grid.filter(item => {
  return item.getElement().dataset.category === 'featured';
});

Для кастомной сортировки можно использовать функцию:

grid.sort((a, b) => {
  const valA = parseInt(a.getElement().dataset.priority, 10);
  const valB = parseInt(b.getElement().dataset.priority, 10);
  return valB - valA; // сортировка по убыванию приоритета
});

Важные моменты:

  • Функции фильтрации и сортировки могут быть динамическими, вызываемыми по событию.
  • Можно комбинировать стандартные фильтры и кастомные для сложной логики отображения.

Расширение через плагины

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

Пример простого плагина, который подсвечивает элементы при добавлении:

function highlightPlugin(grid) {
  grid.on('add', items => {
    items.forEach(item => {
      item.getElement().style.border = '2px solid red';
    });
  });
}

const grid = new Muuri('.grid', { layoutOnInit: true });
highlightPlugin(grid);

Особенности плагинов:

  • Плагины работают через события и методы экземпляра Muuri.
  • Можно создавать независимые модули для повторного использования.
  • Плагины не изменяют внутренний код библиотеки, сохраняя совместимость с будущими версиями.

Работа с приватными методами и внутренним API

Хотя большинство функций Muuri документированы, библиотека предоставляет и приватные методы, которые могут быть использованы для глубокой кастомизации. Пример — прямой вызов grid._sort() для обновления порядка элементов без перестройки сетки:

grid._sort((a, b) => a.id - b.id, { layout: false });

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

  • Использование приватных методов требует осторожности, так как они могут измениться в будущих версиях.
  • Позволяет создавать сложные сценарии, недоступные через публичный API.
  • Часто применяется вместе с событиями, чтобы синхронизировать пользовательскую логику с внутренними процессами Muuri.

Расширение Drag-and-Drop

Muuri позволяет кастомизировать поведение перетаскивания через опции dragSort, dragStartPredicate и события.

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

grid.on('dragStart', item => {
  if(item.getElement().classList.contains('fixed')) {
    return false; // запрещаем перемещать элементы с классом fixed
  }
});

Возможности расширения Drag-and-Drop:

  • Создание зон сортировки (dragSort с другими сетками).
  • Контроль над поведением при перетаскивании (например, блокировка по определённым критериям).
  • Использование событий dragMove и dragEnd для динамических изменений стилей или данных.

Доступ к DOM-элементам и стилям

API Muuri позволяет оперативно изменять DOM и стили элементов, что важно при расширении функционала сетки. Методы getElement(), getItems() и isVisible() дают полный контроль над внешним видом и состоянием элементов:

grid.getItems().forEach(item => {
  const el = item.getElement();
  el.style.transition = 'transform 0.5s ease';
});

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

  • Все изменения DOM синхронизируются с внутренней анимацией Muuri.
  • Можно комбинировать кастомные CSS-анимации с встроенными возможностями библиотеки.

Интеграция с внешними данными

Расширения часто используют API Muuri для динамического добавления или удаления элементов на основе внешних данных (например, из API или базы данных).

Пример добавления элементов из массива:

const data = [
  { id: 1, title: 'Item 1' },
  { id: 2, title: 'Item 2' }
];

const elements = data.map(d => {
  const el = document.createElement('div');
  el.className = 'item';
  el.textContent = d.title;
  el.dataset.id = d.id;
  return el;
});

grid.add(elements);

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

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

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

Оглавление