Объявления изменений

Библиотека Muuri предоставляет мощные возможности для создания динамических, интерактивных сеток с поддержкой анимации и адаптивного расположения элементов. Одной из ключевых особенностей является система объявлений изменений (change notifications), которая позволяет отслеживать модификации в сетке и реагировать на них программно.

Основные события изменений

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

  1. add – вызывается при добавлении нового элемента в сетку.
  2. remove – срабатывает при удалении элемента.
  3. show / hide – уведомляет о визуальном появлении или скрытии элемента.
  4. move – срабатывает, когда элемент изменяет своё положение в сетке.
  5. layoutStart / layoutEnd – сигналы начала и завершения перестановки элементов при изменении размеров сетки или добавлении новых элементов.

Каждое событие передаёт объект с данными о затронутых элементах, что позволяет гибко управлять поведением интерфейса.

Подписка на изменения

Для отслеживания изменений используется метод .on(eventName, callback):

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

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

grid.on('move', (items) => {
  console.log('Элементы перемещены:', items);
});

Ключевой момент: каждый элемент items представляет собой объект Muuri.Item, который содержит методы для управления состоянием элемента, например show(), hide(), move().

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

События add и remove тесно связаны с методами:

  • grid.add(elements, options) – добавляет новые элементы в сетку.
  • grid.remove(items, options) – удаляет элементы, при этом можно указать removeElements: true, чтобы удалить DOM-узлы, или removeElements: false, чтобы оставить их в DOM.

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

const newItem = document.createElement('div');
newItem.classList.add('item');
grid.add(newItem);

grid.on('add', (items) => {
  items.forEach(item => item.getElement().classList.add('highlight'));
});

Перемещение и сортировка элементов

Событие move возникает при изменении порядка элементов, как вручную, так и через метод:

  • grid.sort(comparator, options) – сортирует элементы по заданной функции сравнения.
  • grid.move(element, index, options) – перемещает конкретный элемент на указанную позицию.

Отслеживание:

grid.on('move', (items) => {
  items.forEach(item => {
    console.log('Элемент перемещён:', item.getElement().textContent);
  });
});

Важно: события move вызываются после завершения анимации, обеспечивая корректное положение элементов.

Показ и скрытие элементов

Методы show() и hide() управляют видимостью элементов. Соответствующие события show и hide позволяют синхронизировать интерфейс:

grid.on('hide', (items) => {
  items.forEach(item => item.getElement().style.opacity = 0.5);
});

grid.hide(grid.getItems().slice(0, 2)); // Скрываем первые два элемента

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

Начало и завершение перестройки сетки

События layoutStart и layoutEnd сигнализируют о перестройке сетки, что полезно для выполнения сложных анимаций или синхронизации с внешними компонентами:

grid.on('layoutStart', () => {
  console.log('Перестройка сетки начата');
});

grid.on('layoutEnd', () => {
  console.log('Перестройка сетки завершена');
});

Метод grid.layout(true) инициирует принудительную перестройку, при этом все подписчики на layoutStart и layoutEnd будут вызваны.

Советы по работе с объявлениями изменений

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

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

Оглавление