Учебник Featherlight

Введение
- Что такое Featherlight
- История и предназначение библиотеки
- Преимущества и ограничения
- Сравнение с аналогичными решениями
- Требования к окружению
Установка и подключение
- Загрузка библиотеки
- Подключение через CDN
- Установка через npm
- Установка через bower
- Подключение файлов стилей
- Подключение зависимостей
- Проверка корректности установки
Базовое использование
- Первый лайтбокс
- Разметка HTML
- Инициализация через data-атрибуты
- Инициализация через JavaScript
- Открытие изображений
- Открытие HTML-контента
- Открытие iframe
- Открытие Ajax-контента
Структура и архитектура
- Объектная модель Featherlight
- Жизненный цикл лайтбокса
- Внутренние компоненты
- DOM-структура генерируемых элементов
- Система классов
- Порядок применения стилей
Конфигурация
- Глобальные настройки
- Локальные настройки для экземпляра
- Параметр namespace
- Параметр variant
- Параметр resetCss
- Параметр background
- Параметр openTrigger
- Параметр closeTrigger
- Параметр filter
- Параметр root
- Параметр openSpeed
- Параметр closeSpeed
- Параметр closeOnClick
- Параметр closeOnEsc
- Параметр closeIcon
- Параметр loading
- Параметр persist
- Параметр otherClose
- Параметр beforeOpen
- Параметр beforeContent
- Параметр beforeClose
- Параметр afterOpen
- Параметр afterContent
- Параметр afterClose
- Параметр onKeyUp
- Параметр onResize
- Параметр type
- Параметр contentFilters
Работа с изображениями
- Открытие одиночных изображений
- Предзагрузка изображений
- Адаптивные изображения
- Обработка ошибок загрузки
- Альтернативный текст и доступность
- Масштабирование под viewport
Галереи
- Создание галереи через Featherlight Gallery
- Подключение расширения
- Навигация между элементами
- Параметры галереи
- Автоматическая группировка
- Программное управление галереей
- Клавиатурная навигация
HTML-контент
- Inline-контент
- Использование селекторов
- Клонирование элементов
- Динамическая генерация контента
- Формы внутри лайтбокса
- Обработка событий вложенных элементов
Ajax-загрузка
- Загрузка внешнего контента
- Настройка Ajax-запросов
- Обработка ответа сервера
- Индикация загрузки
- Обработка ошибок Ajax
- Фильтрация загруженного контента
Iframe-контент
- Встраивание внешних страниц
- Видео с YouTube
- Видео с Vimeo
- Видео с других платформ
- Настройка размеров iframe
- Автовоспроизведение видео
- Остановка видео при закрытии
Программный интерфейс
- Метод open
- Метод close
- Метод current
- Цепочка методов
- Доступ к экземпляру
- Уничтожение экземпляра
- Проверка состояния
События и коллбэки
- beforeOpen
- beforeClose
- afterOpen
- afterClose
- onKeyUp
- onResize
- Передача данных в коллбэки
- Контекст выполнения
- Прерывание операций через return false
Фильтры контента
- Встроенные фильтры
- Фильтр для изображений
- Фильтр для HTML
- Фильтр для Ajax
- Фильтр для iframe
- Создание собственных фильтров
- Регистрация фильтров
- Приоритет фильтров
Стилизация
- Базовые стили
- Переопределение стилей
- Использование variant
- Модификация overlay
- Модификация контейнера контента
- Модификация кнопки закрытия
- Модификация индикатора загрузки
- Анимации открытия и закрытия
- Кастомные CSS-классы
- Адаптивный дизайн
Доступность
- Семантическая разметка
- ARIA-атрибуты
- Управление фокусом
- Поддержка скринридеров
- Альтернативы для медиа-контента
Адаптивность и мобильные устройства
- Поведение на мобильных экранах
- Touch-события
- Закрытие свайпом
- Масштабирование контента
- Производительность на мобильных
Интеграция с фреймворками
- Использование с jQuery
- Использование в React
- Использование в Vue
- Использование в Angular
- Vanilla JavaScript без jQuery
- Управление жизненным циклом компонентов
Расширения и плагины
- Featherlight Gallery
- Создание собственных расширений
- Расширение прототипа
- Регистрация расширений
Производительность
- Оптимизация загрузки ресурсов
- Ленивая загрузка изображений
- Минимизация reflow и repaint
- Управление памятью
- Профилирование производительности
Отладка
- Частые ошибки
- Конфликты с другими библиотеками
- Проблемы с z-index
- Проблемы с позиционированием
- Логирование событий
Продвинутые техники
- Множественные экземпляры
- Вложенные лайтбоксы
- Программное изменение контента
- Интеграция с роутингом
- Сохранение состояния
- Связывание с историей браузера
Миграция и обратная совместимость
- Миграция с версии 1.x
- Устаревшие возможности
- Стратегия обновления
Безопасность
- XSS при загрузке внешнего контента
- Санитизация HTML
- Content Security Policy
- Безопасная работа с Ajax
- Валидация источников iframe