Учебник Muuri

Введение
- Что такое Muuri
- История и предпосылки создания
- Основные возможности и преимущества
- Сравнение с альтернативными решениями
- Требования и совместимость
- Структура документации
Установка и подготовка окружения
- Установка через npm
- Установка через yarn
- Подключение через CDN
- Загрузка и локальное размещение файлов
- Минимальная HTML-структура
- Подключение зависимостей
Базовая инициализация
- Создание экземпляра Grid
- Параметры конструктора
- Структура DOM-элементов
- Требования к разметке элементов
- Первый рабочий пример
- Проверка корректности инициализации
Элементы сетки
- Структура Item
- Свойства элемента
- Жизненный цикл элемента
- Получение элементов из Grid
- Работа с коллекциями элементов
- Идентификация и поиск элементов
Макеты и позиционирование
- Алгоритмы раскладки
- Горизонтальная раскладка
- Вертикальная раскладка
- Контроль порядка элементов
- Расчет позиций вручную
Drag and Drop
- Включение перетаскивания
- Параметры dragging
- Обработка начала перетаскивания
- Процесс перемещения
- Завершение перетаскивания
- Отмена операции drag
- Ограничения области перетаскивания
- Placeholder при перетаскивании
Сортировка элементов
- Методы sort и synchronize
- Функции сравнения
- Сортировка по атрибутам
- Сортировка по пользовательским критериям
- Стабильная и нестабильная сортировка
- Производительность при сортировке
Фильтрация
- Метод filter
- Предикаты фильтрации
- Фильтрация по классам
- Фильтрация по атрибутам данных
- Комбинированные условия
- Анимация при фильтрации
- Управление видимостью элементов
Добавление и удаление элементов
- Метод add
- Создание элементов программно
- Вставка в определенную позицию
- Метод remove
- Уничтожение элементов
- Пакетные операции
- Обработка DOM при изменениях
Анимации и переходы
- Параметры layout animation
- Длительность и easing
- Анимация появления элементов
- Анимация скрытия элементов
- Пользовательские анимации
- Отключение анимаций
- Производительность анимаций
События
- Система событий Muuri
- Подписка на события
- Отписка от событий
- События жизненного цикла Grid
- События элементов
- События drag and drop
- События layout
- События синхронизации
- Передача данных в обработчики
Синхронизация между сетками
- Перемещение элементов между Grid
- Параметр dragSort
- Настройка принимающих сеток
- Обработка межсеточного drag
- Синхронизация состояния
- Ограничения и правила передачи
Управление размерами
- Определение размеров элементов
- Динамическое изменение размеров
- Метод refreshItems
- Обновление после изменений DOM
- Оптимизация пересчета размеров
- Работа с responsive элементами
Настройка внешнего вида
- CSS-классы элементов
- Стилизация placeholder
- Стилизация активного drag-элемента
- Кастомизация анимаций через CSS
- Темизация сетки
- Адаптивная верстка
Продвинутые техники layout
- Пользовательские алгоритмы упаковки
- Работа с разнородными элементами
- Оптимизация заполнения пространства
- Фиксированные и динамические элементы
- Группировка элементов
- Вложенные сетки
Оптимизация производительности
- Виртуализация элементов
- Throttling и debouncing
- Минимизация reflow и repaint
- Оптимизация обработчиков событий
- Работа с большим количеством элементов
- Профилирование и отладка
Интеграция с фреймворками
- Использование с React
- Использование с Vue
- Использование с Angular
- Управление жизненным циклом
- Реактивность и обновления
- Паттерны интеграции
Работа с асинхронными операциями
- Загрузка элементов по требованию
- Ленивая загрузка изображений
- Пагинация и infinite scroll
- Обработка промисов
- Индикаторы загрузки
- Обработка ошибок
Доступность
- ARIA-атрибуты
- Навигация с клавиатуры
- Screen reader поддержка
- Focus management
- Семантическая разметка
- Объявления изменений
Адаптивность и responsive design
- Media queries и breakpoints
- Изменение layout на разных экранах
- Адаптация количества колонок
- Touch-устройства
- Мобильная оптимизация
- Ориентация экрана
Расширение функциональности
- Создание плагинов
- API расширения
- Хуки и middleware
- Переопределение методов
- Добавление пользовательских событий
- Изоляция расширений
Отладка и диагностика
- Включение режима отладки
- Логирование событий
- Инспектирование состояния Grid
- Частые ошибки и их решения
- Валидация конфигурации
- Использование DevTools
Миграция и обновление
- Изменения между версиями
- Breaking changes
- Стратегии миграции
- Обратная совместимость
- Deprecation warnings
- Обновление зависимостей
Тестирование
- Unit-тестирование Grid
- Тестирование взаимодействий
- E2E тестирование drag and drop
- Мокирование зависимостей
- Тестовые утилиты
- Coverage и метрики
Паттерны и best practices
- Организация кода
- Управление состоянием
- Разделение ответственности
- Переиспользование конфигураций
- Код-стайл и конвенции
Практические примеры
- Галерея изображений
- Канбан-доска
- Адаптивная сетка товаров
- Dashboard с виджетами
- Портфолио с фильтрацией
- Календарь событий
Справочник API
- Конструктор Grid
- Методы экземпляра Grid
- Свойства Grid
- Методы Item
- Свойства Item
- Статические методы
- Константы и перечисления