Кастомные методы

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

Кастомные методы работают на основе прототипа объекта Packery. Любой метод, добавленный к Packery.prototype, становится доступным для всех экземпляров сетки. Это открывает широкие возможности для повторного использования кода и создания модульных расширений.

Добавление кастомного метода

Для создания собственного метода используется стандартная запись через прототип:

Packery.prototype.highlightItem = function(itemElement) {
    const item = this.getItem(itemElement);
    if (item) {
        item.element.style.border = "2px solid red";
    }
};

Пояснения:

  • getItem(itemElement) — встроенный метод Packery, возвращающий объект элемента сетки по его DOM-узлу.
  • item.element — реальный DOM-элемент внутри объекта PackeryItem.
  • Любая логика, включающая стили, классы или события, может быть добавлена внутрь метода.

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

const grid = new Packery('.grid', { gutter: 10 });
grid.highlightItem(document.querySelector('.grid-item'));

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

Кастомные методы часто используются для работы сразу с несколькими элементами. Например, для изменения цвета всех элементов с определенным классом:

Packery.prototype.colorItems = function(selector, color) {
    const items = this.items.filter(item => item.element.matches(selector));
    items.forEach(item => {
        item.element.style.backgroundColor = color;
    });
};

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

  • this.items — массив всех элементов сетки Packery, каждый из которых содержит объект с DOM-элементом и его координатами.
  • Метод matches() позволяет проверять соответствие CSS-селектору.
  • Внутри метода можно использовать любые операции с DOM или анимации.

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

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

Packery.prototype.sortByData = function(attribute, ascending = true) {
    this.items.sort((a, b) => {
        const aValue = a.element.dataset[attribute];
        const bValue = b.element.dataset[attribute];
        return ascending ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
    });
    this.layout();
};

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

  • dataset — стандартный способ хранения пользовательских данных на DOM-элементах.
  • После сортировки вызывается layout(), чтобы перестроить сетку с новыми позициями элементов.
  • Можно комбинировать сортировку и фильтрацию в одном кастомном методе.

Расширение функционала событий

Кастомные методы можно использовать для внедрения событийной логики. Например, метод, который добавляет анимацию при клике на элемент:

Packery.prototype.animateOnClick = function() {
    this.items.forEach(item => {
        item.element.addEventListener('click', () => {
            item.element.style.transform = 'scale(1.2)';
            setTimeout(() => item.element.style.transform = 'scale(1)', 300);
        });
    });
};

Важные детали:

  • Использование замыканий позволяет привязать события к конкретным элементам.
  • Можно комбинировать с уже существующими событиями Packery, например с layoutComplete или dragItemPositioned.
  • Этот подход помогает создавать более интерактивные и визуально привлекательные сетки.

Интеграция кастомных методов с плагинами

Packery поддерживает плагины, такие как Draggabilly или jQuery UI Draggable. Кастомные методы могут взаимодействовать с этими плагинами для расширения функционала:

Packery.prototype.makeDraggableWithHighlight = function() {
    this.items.forEach(item => {
        const draggie = new Draggabilly(item.element);
        this.bindDraggabillyEvents(draggie);
        draggie.on('dragStart', () => {
            item.element.style.border = "2px dashed blue";
        });
        draggie.on('dragEnd', () => {
            item.element.style.border = "";
        });
    });
};

Пояснения:

  • bindDraggabillyEvents — встроенный метод Packery для синхронизации позиций с библиотекой Draggabilly.
  • Добавление кастомной визуальной реакции при перетаскивании повышает UX.
  • Возможна адаптация метода под любые другие сторонние плагины.

Практические советы по разработке кастомных методов

  1. Минимизировать прямые манипуляции DOM — использовать методы Packery для перестройки сетки.
  2. Вызывать layout() после изменения порядка или размера элементов — это гарантирует корректное расположение.
  3. Использовать this.items как основу работы с элементами — все элементы сетки уже представлены в этом массиве.
  4. Прототипное расширение — позволяет добавлять методы один раз и использовать во всех экземплярах.
  5. Комбинировать методы — можно вызывать один кастомный метод из другого, создавая цепочки логики без дублирования кода.

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

Оглавление