moveTo

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

Назначение метода

moveTo применяется в случаях, когда требуется:

  • перейти к конкретному элементу вне стандартной последовательности
  • синхронизировать тур с пользовательскими действиями
  • реализовать условную логику переходов
  • управлять туром из внешнего кода (например, по событиям)

Сигнатура метода

driver.moveTo(index)

или

driver.moveTo(stepId)

Параметры

  • index — числовой индекс шага (начиная с 0)
  • stepId — строковый идентификатор шага (если задан)

Переход по индексу

Каждый шаг в Driver.js имеет порядковый номер. Метод позволяет перейти к любому шагу напрямую:

driver.moveTo(2);

В этом случае произойдёт переход к третьему шагу.

Особенности

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

Переход по идентификатору

Шаги могут содержать уникальный id, что делает код более устойчивым:

const driver = new Driver({
  steps: [
    {
      id: "step-login",
      element: "#login",
      popover: {
        title: "Вход",
        description: "Введите логин"
      }
    },
    {
      id: "step-password",
      element: "#password",
      popover: {
        title: "Пароль",
        description: "Введите пароль"
      }
    }
  ]
});

Переход:

driver.moveTo("step-password");

Преимущества использования id

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

Внутренний механизм работы

При вызове moveTo происходит:

  1. Завершение текущего шага
  2. Очистка активного состояния (overlay, подсветка)
  3. Поиск целевого шага
  4. Перерисовка интерфейса
  5. Применение фокуса и popover

Driver.js гарантирует корректное переключение даже при активных анимациях.

Сценарии использования

1. Условная навигация

if (user.isAdmin) {
  driver.moveTo("admin-panel");
} else {
  driver.moveTo("user-dashboard");
}

Позволяет адаптировать тур под роль пользователя.

2. Переход по событию

document.querySelector("#next-btn").addEventListener("click", () => {
  driver.moveTo(3);
});

Тур синхронизируется с действиями в интерфейсе.

3. Интеграция с формами

form.addEventListener("submit", (e) => {
  e.preventDefault();
  driver.moveTo("confirmation");
});

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

4. Навигация назад

driver.moveTo(currentStepIndex - 1);

Реализация пользовательских кнопок “Назад”.

Работа с динамическими шагами

При добавлении шагов на лету важно учитывать:

  • корректность индексов
  • наличие элементов в DOM
  • синхронизацию с состоянием интерфейса

Пример:

steps.push({
  id: "dynamic-step",
  element: "#dynamic",
  popover: {
    title: "Динамика",
    description: "Этот шаг добавлен позже"
  }
});

driver.moveTo("dynamic-step");

Ошибки и отладка

Переход к несуществующему шагу

driver.moveTo(999); // ошибка

Рекомендуется проверять:

if (steps[999]) {
  driver.moveTo(999);
}

Элемент отсутствует в DOM

Если элемент не найден:

  • шаг может не отобразиться
  • popover появится без привязки

Решение:

const el = document.querySelector("#target");
if (el) {
  driver.moveTo("step-id");
}

Асинхронная загрузка

При работе с динамическими интерфейсами:

setTimeout(() => {
  driver.moveTo("loaded-step");
}, 500);

Или через MutationObserver.

Комбинация с другими методами

start

driver.start();
driver.moveTo(1);

highlight

driver.highlight({
  element: "#special"
});

driver.moveTo("next-step");

reset

driver.reset();
driver.moveTo(0);

Практика: кастомная навигация

Создание собственного интерфейса управления туром:

const next = () => {
  driver.moveTo(current + 1);
};

const prev = () => {
  driver.moveTo(current - 1);
};

Особенности поведения

  • moveTo не запускает тур автоматически — требуется start
  • метод работает только при активном экземпляре Driver
  • переходы происходят мгновенно (если не заданы анимации)
  • состояние сохраняется между вызовами

Рекомендации

  • использовать id вместо индексов
  • проверять наличие DOM-элементов
  • избегать жёсткой привязки к порядку шагов
  • централизовать управление переходами
  • учитывать асинхронность интерфейса

Пример полного сценария

const driver = new Driver({
  steps: [
    { id: "step1", element: "#a", popover: { title: "A" } },
    { id: "step2", element: "#b", popover: { title: "B" } },
    { id: "step3", element: "#c", popover: { title: "C" } }
  ]
});

driver.start();

// переход через 2 секунды
setTimeout(() => {
  driver.moveTo("step3");
}, 2000);

Расширенные паттерны

Централизованный контроллер

const TourController = {
  goTo: (step) => driver.moveTo(step),
  next: () => driver.moveTo(current + 1),
  prev: () => driver.moveTo(current - 1)
};

Интеграция с роутингом

router.onChange((route) => {
  if (route === "/dashboard") {
    driver.moveTo("dashboard-step");
  }
});

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

Оглавление