Адаптивное позиционирование

Driver.js — библиотека для создания интерактивных пошаговых туров по интерфейсу. Одной из ключевых возможностей является адаптивное позиционирование подсказок относительно элементов страницы. Это позволяет сохранять корректное отображение подсказок даже при изменении размеров окна браузера или расположения элементов.

Основные принципы

Определение целевого элемента Каждая подсказка привязывается к конкретному DOM-элементу через селектор element. Driver.js автоматически вычисляет позицию элемента на странице и определяет возможное размещение подсказки.
```
const driver = new Driver();
driver.defineSteps([
    {
        element: '#submitButton',
        popover: {
            title: 'Отправка формы',
            description: 'Нажмите эту кнопку, чтобы отправить данные',
            position: 'top'
        }
    }
]);
```
Позиции подсказок Библиотека поддерживает стандартные позиции:
- top — над элементом
- bottom — под элементом
- left — слева
- right — справа
- auto — выбор оптимальной позиции в зависимости от пространства на экране
Позиция auto особенно полезна при адаптивных интерфейсах, так как автоматически предотвращает обрезание подсказки за пределами окна.

Алгоритм адаптивного позиционирования

Driver.js использует динамический расчет доступного пространства вокруг элемента:

Получение размеров и координат целевого элемента с помощью getBoundingClientRect().
Определение доступного места в четырех направлениях относительно элемента.
Выбор позиции, где подсказка полностью помещается в видимую область окна.
Применение смещения (offset) для дополнительной отступной подстройки.

Если выбранная позиция недоступна, Driver.js автоматически переключается на альтернативную позицию.

Настройка смещений

Каждый шаг можно дополнительно настраивать через padding и offset.

padding — минимальное расстояние между подсказкой и границами окна.
offset — смещение подсказки относительно целевого элемента по основной оси.

driver.defineSteps([
    {
        element: '#menu',
        popover: {
            title: 'Меню',
            description: 'Основная навигация сайта',
            position: 'auto',
            padding: 10,
            offset: 5
        }
    }
]);

Обработка изменения размеров окна

Driver.js автоматически отслеживает событие resize окна браузера и пересчитывает позиции всех активных подсказок. Это предотвращает их наложение на элементы интерфейса и обеспечивает корректное отображение на мобильных устройствах и планшетах.

Для ручного пересчета можно использовать метод reposition():

window.addEventListener('resize', () => {
    driver.reposition();
});

Поддержка прокрутки страницы

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

Дополнительно можно использовать опцию scrollIntoViewOptions для точного управления прокруткой:

driver.defineSteps([
    {
        element: '#footer',
        popover: {
            title: 'Футер сайта',
            description: 'Ссылки на контакты и социальные сети',
            position: 'bottom'
        },
        scrollIntoViewOptions: { beh * avior: 'smooth', block: 'center' }
    }
]);

Интерактивные примеры адаптивного позиционирования

Несколько подсказок с auto При последовательном отображении нескольких подсказок библиотека автоматически подбирает оптимальные позиции для каждого шага.
Адаптация под мобильные экраны Подсказки подстраиваются под узкие экраны, меняя позицию с горизонтальной на вертикальную (top или bottom) для удобства чтения.
Сложные интерфейсы с плавающими элементами Для элементов с динамическим позиционированием (position: fixed или sticky) Driver.js корректно вычисляет координаты и смещения, предотвращая наложение подсказок на другие блоки.