Добавление собственных элементов

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

Использование кастомных селекторов

По умолчанию Driver.js требует указания CSS-селектора элемента, который необходимо подсветить:

driver.highlight({
    element: '#my-button',
    popover: {
        title: 'Кнопка запуска',
        description: 'Нажмите здесь, чтобы начать процесс',
        position: 'bottom'
    }
});

Для добавления собственных элементов можно использовать виртуальные селекторы — объекты, которые имитируют DOM-элемент. Основная идея заключается в создании объекта с нужными координатами, шириной и высотой, который Driver.js будет воспринимать как элемент для подсветки.

Формат виртуального элемента

Виртуальный элемент должен содержать следующие свойства:

const virtualElement = {
    getBoundingClientRect: () => ({
        top: 100,
        left: 200,
        width: 150,
        height: 50,
        right: 350,
        bottom: 150
    }),
    scrollIntoView: () => {} // Обязательная функция для совместимости с Driver.js
};
  • getBoundingClientRect — возвращает объект с координатами и размерами элемента.
  • scrollIntoView — пустая функция, которая предотвращает ошибки при попытке прокрутки к элементу.

Далее такой объект передается в метод highlight:

driver.highlight({
    element: virtualElement,
    popover: {
        title: 'Виртуальный блок',
        description: 'Этот элемент создан вручную и не существует в DOM',
        position: 'top'
    }
});

Полная кастомизация подсказок

Помимо стандартных popover, можно полностью кастомизировать контент. Driver.js позволяет использовать HTML-шаблоны и CSS-классы, чтобы формировать собственные визуальные компоненты:

driver.highlight({
    element: '#custom-area',
    popover: {
        title: 'Настроенная подсказка',
        description: '<div class="custom-content"><p>Дополнительный текст</p><button id="next-btn">Дальше</button></div>',
        position: 'right',
        className: 'my-custom-popover'
    }
});
  • className добавляет собственный класс к popover для применения стилей.
  • Внутри description можно использовать любой HTML, включая кнопки, картинки и интерактивные элементы.

Динамическое создание шагов

В больших приложениях иногда нужно генерировать шаги на лету, например, для элементов, которые появляются после взаимодействия пользователя. Для этого можно создавать массив шагов программно:

const steps = [];

document.querySelectorAll('.dynamic-item').forEach((el, index) => {
    steps.push({
        element: el,
        popover: {
            title: `Элемент ${index + 1}`,
            description: 'Динамически созданная подсказка',
            position: 'bottom'
        }
    });
});

const driver = new Driver();
driver.defineSteps(steps);
driver.start();

Такой подход позволяет обходить ограничения статического списка шагов и работать с динамически изменяющимся интерфейсом.

Управление видимостью и состояниями

Driver.js позволяет контролировать состояния элементов, например, временно скрывать стандартный поповер и отображать кастомный компонент поверх интерфейса:

driver.on('beforeNext', (step) => {
    if (step.popover && step.popover.className === 'custom-step') {
        document.querySelector('.custom-overlay').style.display = 'block';
        return false; // Прерываем стандартный переход к следующему шагу
    }
});
  • beforeNext и afterNext — события, позволяющие внедрять собственную логику между шагами.
  • С помощью этих событий можно показывать собственные элементы, управлять их анимацией и синхронизировать с действиями пользователя.

Интеграция с анимациями и внешними библиотеками

Собственные элементы легко интегрируются с CSS-анимациями или сторонними библиотеками, например, для подсветки областей через anime.js или управления подсказками с tippy.js. Главное — правильно задать координаты через getBoundingClientRect и синхронизировать показ/скрытие элементов с событиями Driver.js.

Такой подход превращает Driver.js из инструмента для простых подсветок в мощный фреймворк для создания интерактивных и полностью кастомизированных пошаговых гидов по веб-интерфейсу.

Оглавление