Учебник Interact.js

Введение
- Что такое Interact.js
- История создания и развитие библиотеки
- Основные возможности и области применения
- Сравнение с альтернативными решениями
Установка и настройка
- Установка через npm и yarn
- Подключение через CDN
- Сборка из исходников
- Настройка webpack и других сборщиков
- Первый рабочий пример
Базовые концепции
- Архитектура библиотеки
- Система событий
- Целевые элементы и селекторы
- Контекст взаимодействия
- Жизненный цикл взаимодействия
Draggable - перетаскивание элементов
- Инициализация перетаскивания
- События start, move и end
- Ограничение области перемещения
- Инерция и плавность движения
- Автопрокрутка при перетаскивании
- Snap-эффекты и привязка к сетке
- Привязка к другим элементам
- Блокировка осей перемещения
- Курсоры и визуальная обратная связь
Dropzone - зоны сброса
- Создание зон сброса
- События dropzone
- Проверка допустимости сброса
- Множественные зоны сброса
- Взаимодействие между draggable и dropzone
- Визуальные индикаторы активных зон
- Overlap и accept параметры
Resizable - изменение размера
- Базовое изменение размера
- Настройка активных краев и углов
- События изменения размера
- Ограничения минимального и максимального размера
- Сохранение пропорций
- Инверсия при изменении размера
- Margin и padding при ресайзе
Gesturable - жесты
- Основы работы с жестами
- Rotation - вращение элементов
- Pinch - масштабирование щипком
- Одновременное использование жестов
- События жестов
- Ограничения и валидация жестов
Модификаторы
- Концепция модификаторов
- Restrict - ограничение движения
- RestrictEdges - ограничение краев
- RestrictRect - ограничение прямоугольником
- RestrictSize - ограничение размера
- Snap - привязка к точкам
- SnapSize - привязка размера
- SnapEdges - привязка краев
- AspectRatio - сохранение пропорций
- Цепочки модификаторов
- Создание собственных модификаторов
Inertia - инерция
- Настройка параметров инерции
- Resistance - сопротивление
- EndSpeed - конечная скорость
- AllowResume - продолжение движения
- Инерция для разных типов взаимодействий
Автопрокрутка
- Настройка автопрокрутки
- Области срабатывания
- Скорость прокрутки
- Прокрутка внутри контейнеров
- Прокрутка окна браузера
Действия и интеракции
- Объект action
- Множественные действия на одном элементе
- Приоритеты действий
- Отмена и предотвращение действий
- Программное управление действиями
События
- Структура объекта события
- Фазы событий
- Делегирование событий
- Глобальные и локальные слушатели
- Остановка всплытия событий
- Данные события
Взаимодействие с касаниями
- Touch events
- Мультитач
- Различия между mouse и touch
- Эмуляция событий
- Особенности мобильных браузеров
Pointer Events
- Унифицированная модель событий
- Преимущества pointer events
- Настройка обработки указателей
- Hold - удержание
- Tap - касание
Координаты и позиционирование
- Системы координат
- Client, page и screen координаты
- Delta - разница координат
- Velocity - скорость движения
- Вычисление позиций
- Трансформации и матрицы
Динамические свойства
- Функции вместо статических значений
- Контекст выполнения функций
- Динамическое изменение ограничений
- Условная логика во взаимодействиях
Контекст и данные
- Передача данных между событиями
- Хранение состояния
- Изоляция контекста
- Доступ к DOM элементам
Производительность
- Оптимизация обработчиков событий
- Throttle и debounce
- RequestAnimationFrame
- Уменьшение reflow и repaint
- Работа с большим количеством элементов
- Профилирование и отладка
Интеграция с фреймворками
- Vanilla JavaScript подход
- React интеграция
- Vue.js интеграция
- Angular интеграция
- Обертки и компоненты
Стилизация и CSS
- Классы состояний
- CSS трансформации
- Transition и animation
- GPU ускорение
- Визуальная обратная связь
Доступность
- ARIA атрибуты
- Клавиатурная навигация
- Фокус и tabindex
- Альтернативные способы взаимодействия
Отладка
- Режим отладки
- Логирование событий
- Инспекция состояния
- Распространенные проблемы и решения
- Инструменты браузера
Практические паттерны
- Сортируемые списки
- Drag and drop файлов
- Канбан доски
- Диаграммы и схемы
- Изменяемые панели интерфейса
- Модальные окна и диалоги
Расширенные техники
- Виртуализация элементов
- Lazy loading при перетаскивании
- Анимации переходов
- Копирование элементов при перетаскивании
- Вложенные контейнеры
- Undo/Redo функциональность
Безопасность
- Предотвращение XSS
- Валидация входных данных
- Ограничение действий пользователя
- Sanitization контента
Тестирование
- Unit тесты
- Симуляция событий
- Интеграционные тесты
- E2E тестирование
- Моки и стабы
Миграция и обновление
- Миграция с предыдущих версий
- Изменения в API
- Устаревшие возможности
- Обратная совместимость
Справочник API
- Метод interact()
- Объект Interactable
- Методы настройки действий
- Методы управления событиями
- Глобальные методы
- Вспомогательные утилиты
- Константы и перечисления