Dashboard с виджетами

Muuri — это мощная библиотека JavaScript для создания адаптивных, анимированных сеток и сеточных интерфейсов с поддержкой drag-and-drop. В контексте Dashboard с виджетами Muuri позволяет управлять расположением блоков, изменением их размеров и анимацией перемещения, сохраняя при этом гибкость и отзывчивость интерфейса.

Инициализация сетки

Для начала работы необходимо подключить библиотеку и инициализировать сетку. Предположим, что HTML-структура содержит контейнер dashboard и несколько виджетов с классом widget:

<div id="dashboard">
    <div class="widget">Виджет 1</div>
    <div class="widget">Виджет 2</div>
    <div class="widget">Виджет 3</div>
</div>

Инициализация Muuri выглядит следующим образом:

const grid = new Muuri('#dashboard', {
    dragEnabled: true,
    layout: {
        rounding: false
    },
    dragSortPredicate: {
        action: 'move'
    }
});

Ключевые параметры:

  • dragEnabled — включает возможность перетаскивания элементов.
  • layout.rounding — управляет округлением координат для более плавной анимации.
  • dragSortPredicate — задаёт правила сортировки элементов при перетаскивании.

Настройка адаптивного расположения виджетов

Muuri автоматически размещает элементы в сетке, но можно настроить поведение при изменении размеров контейнера. Для Dashboard это важно, чтобы виджеты корректно перестраивались при ресайзе окна:

window.addEventListener('resize', () => {
    grid.refreshItems().layout();
});

refreshItems() обновляет информацию о размерах элементов, а layout() перестраивает сетку.

Работа с динамическим добавлением и удалением виджетов

Для Dashboard часто требуется добавление или удаление виджетов на лету. Muuri поддерживает методы add() и remove():

// Добавление нового виджета
const newWidget = document.createElement('div');
newWidget.className = 'widget';
newWidget.textContent = 'Новый виджет';
grid.add(newWidget);

// Удаление виджета
const widgetToRemove = document.querySelector('.widget:last-child');
grid.remove(widgetToRemove, { removeElements: true });

Параметр { removeElements: true } гарантирует, что элемент удаляется из DOM после удаления из сетки.

Drag-and-Drop и управление событиями

Muuri предоставляет события, которые позволяют реагировать на перемещение элементов. Для Dashboard полезны события dragStart, dragEnd и move:

grid.on('dragStart', (item) => {
    item.getElement().style.opacity = '0.7';
});

grid.on('dragEnd', (item) => {
    item.getElement().style.opacity = '1';
});

grid.on('move', (item, fromIndex, toIndex) => {
    console.log(`Виджет перемещён с позиции ${fromIndex} на ${toIndex}`);
});

Эти события позволяют реализовать сохранение позиции виджетов в локальном хранилище или на сервере.

Анимация и стилизация

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

const grid = new Muuri('#dashboard', {
    layout: {
        duration: 400,
        easing: 'ease-in-out'
    },
    dragEnabled: true,
    dragSort: true
});
  • duration — время анимации в миллисекундах.
  • easing — CSS-функция ускорения движения для более естественной анимации.

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

#dashboard {
    display: flex;
    flex-wrap: wrap;
}

.widget {
    width: 200px;
    height: 150px;
    margin: 10px;
    background-color: #f0f0f0;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
}
.widget:active {
    cursor: grabbing;
}

Сортировка и фильтрация виджетов

Muuri поддерживает фильтры для скрытия или показа определённых виджетов и сортировку по заданным критериям:

// Фильтрация виджетов с классом "active"
grid.filter('.active');

// Сортировка по атрибуту data-priority
grid.sort((a, b) => {
    return a.getElement().dataset.priority - b.getElement().dataset.priority;
});

Фильтры и сортировка позволяют создавать интерактивные Dashboard с настройкой отображения блоков.

Интеграция с локальным хранилищем

Для сохранения расположения виджетов между сессиями используется localStorage:

function saveLayout() {
    const order = grid.getItems().map(item => item.getElement().dataset.id);
    localStorage.setItem('dashboardLayout', JSON.stringify(order));
}

function loadLayout() {
    const order = JSON.parse(localStorage.getItem('dashboardLayout') || '[]');
    if(order.length) {
        grid.sort((a, b) => order.indexOf(a.getElement().dataset.id) - order.indexOf(b.getElement().dataset.id));
    }
}

grid.on('move', saveLayout);
window.addEventListener('load', loadLayout);

Каждому виджету необходимо присвоить уникальный data-id для корректного сохранения порядка.

Поддержка разных размеров виджетов

Muuri позволяет создавать Dashboard с виджетами разных размеров, сохраняя сетку адаптивной. Для этого используется grid.add() с элементами, которые имеют CSS размеры, отличные друг от друга. Важно, чтобы layout был настроен с rounding: false для плавного расположения.

.widget.large { width: 400px; height: 300px; }
.widget.small { width: 150px; height: 100px; }

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

Интерактивные расширения

Для создания более сложного Dashboard с виджетами можно использовать:

  • Resizable виджеты: вручную менять размеры блоков с последующим вызовом grid.refreshItems().layout().
  • Drag между контейнерами: Muuri поддерживает сортировку между несколькими сетками.
  • Анимация скрытия/появления: сочетание фильтров и CSS-анимаций для плавного исчезновения виджетов.

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

Оглавление