Создание экземпляра драйвера

Driver.js — это библиотека для создания интерактивных пошаговых подсказок на веб-странице. Основной объект библиотеки создается через конструктор Driver, который управляет всеми шагами, параметрами и поведением подсказок. Создание экземпляра начинается с простого вызова:

const driver = new Driver(options);

Параметр options является объектом конфигурации, который задает глобальные настройки для всех шагов. Если опция не передана, используются значения по умолчанию.

Основные параметры конфигурации при создании экземпляра

  • animate (boolean, по умолчанию true) — включает анимацию появления подсказок. Если установлено false, все подсказки будут отображаться мгновенно.
  • opacity (number, по умолчанию 0.75) — задает прозрачность фона, затемняющего страницу за подсказкой. Значение от 0 до 1.
  • padding (number, по умолчанию 10) — расстояние между подсказкой и элементом, на который она указывает.
  • allowClose (boolean, по умолчанию true) — разрешает закрытие подсказки кликом на затемненный фон.
  • overlayClickNext (boolean, по умолчанию false) — при true клик по фону продвигает подсказку на следующий шаг.
  • doneBtnText и nextBtnText — настраиваемые тексты кнопок завершения и перехода к следующему шагу.

Пример создания экземпляра с пользовательскими настройками:

const driver = new Driver({
    animate: true,
    opacity: 0.8,
    padding: 15,
    allowClose: false,
    overlayClickNext: true,
    doneBtnText: 'Готово',
    nextBtnText: 'Далее'
});

Добавление шагов к экземпляру

После создания экземпляра все шаги добавляются методом defineSteps(). Этот метод принимает массив объектов, каждый из которых описывает отдельный шаг.

Структура шага

  • element — CSS-селектор или DOM-элемент, на который будет указывать подсказка.

  • popover — объект с настройками подсказки:

    • title — заголовок подсказки.
    • description — текст подсказки.
    • position — положение подсказки относительно элемента (top, bottom, left, right, auto).
    • padding — локальная настройка отступа (перекрывает глобальный padding).

  • onNext — функция, вызываемая при переходе к следующему шагу.

  • onPrevious — функция, вызываемая при возврате на предыдущий шаг.

  • onHighlightStarted — коллбек при активации подсветки элемента.

Пример определения шагов:

driver.defineSteps([
    {
        element: '#menu',
        popover: {
            title: 'Меню',
            description: 'Здесь находится основное меню навигации.',
            position: 'right'
        }
    },
    {
        element: '#search',
        popover: {
            title: 'Поиск',
            description: 'Используйте поиск для быстрого нахождения нужной информации.',
            position: 'bottom'
        }
    }
]);

Методы управления экземпляром

  • start() — запускает показ подсказок с первого шага:

    driver.start();

  • moveNext() — программно переходит к следующему шагу.

  • movePrevious() — возвращается к предыдущему шагу.

  • reset() — сбрасывает текущий прогресс и закрывает все подсказки.

  • highlight(element) — вручную подсвечивает конкретный элемент без показа поповера.

Важные особенности при создании экземпляра

  1. Один экземпляр на страницу — рекомендуется создавать один глобальный Driver и использовать его для всех интерактивных подсказок, чтобы избежать конфликтов.
  2. Динамические элементы — если элемент появляется в DOM позже, необходимо убедиться, что вызов defineSteps() выполняется после его загрузки.
  3. Переопределение настроек шага — локальные параметры шага (padding, position) всегда имеют приоритет над глобальными настройками экземпляра.
  4. Коллбеки жизненного цикла — onNext, onPrevious, onHighlightStarted позволяют интегрировать Driver.js с другими компонентами интерфейса, например, с анимациями или состоянием приложения.

Расширенные настройки экземпляра

Driver.js поддерживает расширенные параметры при инициализации:

  • keyboardControl (boolean) — управление шагами с помощью клавиш ArrowRight и ArrowLeft.
  • allowCloseText — текст кнопки закрытия подсказки, если allowClose включен.
  • className — добавляет CSS-класс к контейнеру всех подсказок для кастомного стиля.

Пример расширенной конфигурации:

const driver = new Driver({
    animate: true,
    opacity: 0.7,
    keyboardControl: true,
    className: 'custom-driver',
    allowClose: true,
    doneBtnText: 'Завершить'
});

Итоговая последовательность действий при работе с экземпляром

  1. Создание экземпляра Driver с глобальными параметрами.
  2. Определение шагов через defineSteps().
  3. Вызов start() для начала последовательности.
  4. Использование методов moveNext(), movePrevious(), reset() для управления показом подсказок.
  5. Настройка коллбеков и локальных параметров шагов для гибкого взаимодействия с интерфейсом.

Эта структура позволяет строить комплексные пошаговые инструкции с полной кастомизацией внешнего вида, поведения и интеграции с приложением.

Оглавление