Комбинированные условия

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

Фильтрация с использованием нескольких критериев

Muuri предоставляет метод .filter(), который может принимать либо строку с селектором, либо функцию, возвращающую булево значение. Использование функции позволяет реализовать комбинированные условия:

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

grid.filter(item => {
    const element = item.getElement();
    const isActive = element.classList.contains('active');
    const isVisible = element.dataset.visible === 'true';
    const isCategoryA = element.dataset.category === 'A';
    
    return isActive && isVisible && isCategoryA;
});

Здесь условие return isActive && isVisible && isCategoryA; объединяет три критерия, и элемент будет отображаться только если все три условия одновременно выполняются.

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

Логическое AND (&&) используется для обязательного выполнения всех условий.
Логическое OR (||) применяется для отображения элемента, если хотя бы одно из условий выполнено.
Функция может содержать любую комбинацию условий, включая проверки классов, атрибутов и пользовательских данных.

Использование пользовательских данных для фильтров

Каждый элемент Muuri может содержать объект данных (item.getElement().dataset или item.getData()). Это позволяет строить сложные условия, например:

grid.filter(item => {
    const data = item.getData();
    
    return (data.type === 'image' && data.tags.includes('nature')) ||
           (data.type === 'video' && data.duration < 120);
});

В этом примере комбинируются условия для разных типов контента: изображения должны содержать тег nature, а видео отображаются только если их длительность меньше 2 минут.

Сочетание фильтров с сортировкой

Комбинированные условия могут применяться совместно с сортировкой .sort(). Например, сначала можно отфильтровать элементы, а затем отсортировать их по нескольким свойствам:

grid.filter(item => item.getElement().classList.contains('featured'))
    .sort((a, b) => {
        const aPriority = parseInt(a.getElement().dataset.priority);
        const bPriority = parseInt(b.getElement().dataset.priority);
        return bPriority - aPriority; // сортировка по убыванию приоритета
    });

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

Динамическое изменение условий

Комбинированные условия могут меняться во время работы приложения. Muuri поддерживает обновление фильтров на лету с плавной анимацией:

function updateGrid(filterConfig) {
    grid.filter(item => {
        const el = item.getElement();
        const matchesType = filterConfig.types.includes(el.dataset.type);
        const matchesStatus = filterConfig.statuses.includes(el.dataset.status);
        return matchesType && matchesStatus;
    });
}

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

Примеры сложных комбинаций

1. Логика AND/OR с несколькими группами условий:

grid.filter(item => {
    const el = item.getElement();
    const group1 = el.dataset.category === 'A' && el.classList.contains('highlight');
    const group2 = el.dataset.category === 'B' && el.dataset.rating > 4;
    return group1 || group2;
});

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

2. Фильтрация по диапазону значений:

grid.filter(item => {
    const price = parseFloat(item.getElement().dataset.price);
    return price >= 50 && price <= 200;
});

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