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

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

import Driver from "driver.js";

const driver = new Driver({
  animate: true,
  opacity: 0.75
});

Все дальнейшие действия выполняются через объект driver.

Метод defineSteps

Метод предназначен для задания последовательности шагов тура. Каждый шаг описывает элемент интерфейса и сопровождающий его контент.

driver.defineSteps([
  {
    element: "#header",
    popover: {
      title: "Заголовок",
      description: "Описание элемента",
      position: "bottom"
    }
  },
  {
    element: "#menu",
    popover: {
      title: "Меню",
      description: "Навигация по сайту",
      position: "right"
    }
  }
]);

Ключевые особенности:

  • принимает массив объектов
  • каждый объект — отдельный шаг
  • можно вызывать повторно для полной замены шагов

Метод start

Запускает выполнение тура с первого шага.

driver.start();

Поведение:

  • если шаги не определены — ничего не происходит
  • автоматически активируется первый шаг
  • создаётся overlay и подсветка элемента

Метод highlight

Позволяет подсветить конкретный элемент без запуска полноценного тура.

driver.highlight({
  element: "#login",
  popover: {
    title: "Авторизация",
    description: "Введите данные для входа"
  }
});

Отличие от start:

  • работает с одним шагом
  • не требует предварительного defineSteps
  • используется для точечной подсветки

Метод moveNext

Переход к следующему шагу.

driver.moveNext();

Особенности:

  • игнорируется, если текущий шаг последний
  • может быть вызван вручную или из обработчиков

Метод movePrevious

Возвращает к предыдущему шагу.

driver.movePrevious();

Особенности:

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

Метод moveTo

Позволяет перейти к конкретному шагу по индексу.

driver.moveTo(2);

Особенности:

  • индекс начинается с 0
  • обеспечивает произвольную навигацию
  • удобно для динамических сценариев

Метод hasNextStep

Проверяет наличие следующего шага.

if (driver.hasNextStep()) {
  driver.moveNext();
}

Возвращает:

  • true — если следующий шаг существует
  • false — если текущий шаг последний

Метод hasPreviousStep

Проверяет наличие предыдущего шага.

if (driver.hasPreviousStep()) {
  driver.movePrevious();
}

Метод getCurrentStep

Возвращает текущий активный шаг.

const step = driver.getCurrentStep();
console.log(step);

Структура:

  • содержит описание элемента
  • включает popover-настройки
  • полезен для логики и аналитики

Метод getCurrentStepIndex

Возвращает индекс текущего шага.

const index = driver.getCurrentStepIndex();

Метод refresh

Перерисовывает текущий шаг.

driver.refresh();

Использование:

  • при изменении DOM
  • при динамическом позиционировании элементов
  • после анимаций или загрузки контента

Метод reset

Полностью сбрасывает состояние драйвера.

driver.reset();

Что происходит:

  • удаляется overlay
  • очищается активный шаг
  • сбрасывается внутреннее состояние

Метод destroy

Удаляет экземпляр драйвера и освобождает ресурсы.

driver.destroy();

Различие с reset:

  • reset — временный сброс
  • destroy — окончательное удаление

Метод setConfig

Позволяет изменить конфигурацию драйвера после создания.

driver.setConfig({
  opacity: 0.5,
  padding: 10
});

Особенности:

  • применяется динамически
  • влияет на последующие шаги
  • не требует пересоздания экземпляра

Метод getConfig

Возвращает текущую конфигурацию.

const config = driver.getConfig();

Метод setSteps

Альтернативный способ задать шаги.

driver.setSteps([
  {
    element: "#profile",
    popover: {
      title: "Профиль",
      description: "Настройки пользователя"
    }
  }
]);

Отличие от defineSteps:

  • чаще используется в новых версиях
  • может частично обновлять шаги

Метод addStep

Добавляет шаг к уже существующим.

driver.addStep({
  element: "#footer",
  popover: {
    title: "Подвал",
    description: "Дополнительная информация"
  }
});

Метод removeStep

Удаляет шаг по индексу.

driver.removeStep(1);

Метод isActivated

Проверяет, запущен ли драйвер.

if (driver.isActivated()) {
  console.log("Тур активен");
}

Метод on

Назначает обработчики событий.

driver.on("next", () => {
  console.log("Следующий шаг");
});

Поддерживаемые события:

  • next
  • previous
  • reset
  • highlightStarted
  • highlightCompleted

Метод off

Удаляет обработчик события.

driver.off("next");

Управление через методы: сценарный подход

Методы экземпляра позволяют реализовать сложные сценарии:

driver.defineSteps(steps);

document.querySelector("#start").addEventListener("click", () => {
  driver.start();
});

document.querySelector("#skip").addEventListener("click", () => {
  driver.reset();
});

document.querySelector("#next").addEventListener("click", () => {
  if (driver.hasNextStep()) {
    driver.moveNext();
  }
});

Динамическое управление шагами

Методы позволяют изменять поведение тура на лету:

if (user.isAdmin) {
  driver.addStep({
    element: "#admin-panel",
    popover: {
      title: "Админ-панель",
      description: "Дополнительные функции"
    }
  });
}

Взаимодействие с асинхронными данными

fetch("/api/data")
  .then(res => res.json())
  .then(data => {
    driver.setSteps(generateSteps(data));
    driver.start();
  });

Поведение при изменении DOM

При работе с динамическими интерфейсами необходимо учитывать:

setTimeout(() => {
  driver.refresh();
}, 500);

Управление жизненным циклом

Типичный жизненный цикл работы с экземпляром:

  1. Создание
  2. Настройка (setConfig, defineSteps)
  3. Запуск (start)
  4. Навигация (moveNext, movePrevious)
  5. Завершение (reset или destroy)

Ошибки и особенности

1. Отсутствие элемента

element: "#not-found"

Если элемент не найден — шаг может быть пропущен или вызовет ошибку.

2. Динамический DOM Требуется refresh().

3. Повторный запуск

driver.start(); // без reset может вести к неожиданному поведению

Практика комбинирования методов

driver.setSteps(steps);

driver.on("next", () => {
  console.log("Шаг:", driver.getCurrentStepIndex());
});

driver.start();

Методы экземпляра формируют полный API управления поведением интерактивного тура, обеспечивая гибкость, расширяемость и интеграцию с любыми пользовательскими сценариями.

Оглавление