Создание плагинов

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

Структура плагина

Плагин в Muuri — это объект, который содержит набор хуков и методов, регистрируемых при инициализации сетки. Основные компоненты:

  • name — уникальное имя плагина, используемое для идентификации.
  • init(grid) — функция, вызываемая при создании экземпляра сетки, в которой можно подключить обработчики событий или изменить внутренние параметры.
  • destroy(grid) — функция, вызываемая при удалении сетки, предназначенная для очистки ресурсов, удаление слушателей и отмены изменений.

Пример минимальной структуры:

const myPlugin = {
  name: 'myPlugin',
  init(grid) {
    console.log('Плагин инициализирован для сетки:', grid);
  },
  destroy(grid) {
    console.log('Плагин удаляется для сетки:', grid);
  }
};

Для подключения к сетке используется опция plugins при инициализации:

const grid = new Muuri('.grid', {
  plugins: [myPlugin]
});

Работа с событиями сетки

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

  • layoutStart / layoutEnd — начало и окончание перестановки элементов.
  • add / remove — добавление или удаление элементов из сетки.
  • dragStart / dragEnd — начало и конец перетаскивания элементов.

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

const logPlugin = {
  name: 'logPlugin',
  init(grid) {
    grid.on('add', items => console.log('Добавлены элементы:', items));
    grid.on('remove', items => console.log('Удалены элементы:', items));
  },
  destroy(grid) {
    grid.off('add');
    grid.off('remove');
  }
};

Использование on и off позволяет безопасно подключать и отключать обработчики при инициализации и уничтожении сетки.

Расширение методов сетки

Плагины могут добавлять новые методы к экземпляру сетки через объект grid:

const colorPlugin = {
  name: 'colorPlugin',
  init(grid) {
    grid.setItemColor = function(item, color) {
      item.getElement().style.backgroundColor = color;
    };
  }
};

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

grid.setItemColor(grid.getItems()[0], 'red');

Важно при этом избегать конфликта с существующими методами Muuri и использовать уникальные имена.

Создание плагина с настройками

Плагины могут принимать опции конфигурации, передаваемые при инициализации сетки. Например:

const highlightPlugin = (options = {}) => ({
  name: 'highlightPlugin',
  init(grid) {
    const color = options.color || 'yellow';
    grid.on('add', items => {
      items.forEach(item => item.getElement().style.border = `2px solid ${color}`);
    });
  },
  destroy(grid) {
    grid.getItems().forEach(item => item.getElement().style.border = '');
    grid.off('add');
  }
});

const grid = new Muuri('.grid', {
  plugins: [highlightPlugin({ color: 'orange' })]
});

Такой подход делает плагин переиспользуемым и настраиваемым.

Работа с элементами сетки

Плагины часто взаимодействуют с объектами Item. Основные методы Item, которые полезны для плагинов:

  • getElement() — возвращает DOM-элемент.
  • getPosition() — возвращает текущие координаты элемента.
  • show() / hide() — управляет видимостью элемента.
  • move(targetIndex) — перемещает элемент в сетке.

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

const firstItemPlugin = {
  name: 'firstItemPlugin',
  init(grid) {
    const firstItem = grid.getItems()[0];
    if (firstItem) firstItem.getElement().classList.add('highlight');
  }
};

Важные рекомендации

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

Продвинутые возможности

  • Множественные плагины: Muuri поддерживает подключение сразу нескольких плагинов. Они инициализируются в порядке, указанном в массиве plugins.
  • Асинхронные действия: плагины могут выполнять асинхронные операции, например загрузку данных перед отображением элементов.
  • Композиция: плагины можно комбинировать, создавая сложные цепочки поведения, например, сортировку + фильтрацию + анимацию.

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

Оглавление