movePrevious

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

Общая концепция навигации в Driver.js

Driver.js строит последовательность шагов (steps), каждый из которых описывает:

  • целевой DOM-элемент
  • всплывающую подсказку (popover)
  • позицию отображения
  • дополнительные настройки

Навигация между шагами осуществляется с помощью методов:

  • moveNext() — переход к следующему шагу
  • movePrevious() — переход к предыдущему шагу
  • moveTo(index) — переход к произвольному шагу
  • reset() — завершение тура

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

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

driver.movePrevious();

Метод не принимает аргументов и работает с текущим состоянием экземпляра Driver.

Принцип работы

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

  1. Определение текущего шага (current step index)

  2. Проверка, существует ли предыдущий шаг

  3. Уменьшение индекса на единицу

  4. Отрисовка предыдущего шага:

    • подсветка нового элемента
    • обновление popover
    • применение конфигурации шага

Если текущий шаг — первый, поведение зависит от конфигурации (по умолчанию переход не выполняется).

Пример базового использования

const driver = new Driver({
  steps: [
    { element: '#step1', popover: { title: 'Шаг 1', description: 'Описание 1' }},
    { element: '#step2', popover: { title: 'Шаг 2', description: 'Описание 2' }},
    { element: '#step3', popover: { title: 'Шаг 3', description: 'Описание 3' }}
  ]
});

// запуск тура
driver.start();

// переход назад
driver.movePrevious();

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

movePrevious часто связывается с кастомными кнопками интерфейса:

document.querySelector('#prevBtn').addEventListener('click', () => {
  driver.movePrevious();
});

Это позволяет полностью контролировать UX, заменяя стандартные кнопки Driver.js.

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

Если текущий шаг имеет индекс 0, вызов movePrevious():

  • не изменяет состояние
  • не вызывает ошибок
  • не инициирует повторную отрисовку

Для обработки этого случая можно использовать проверку:

if (driver.getCurrentStepIndex() > 0) {
  driver.movePrevious();
}

Взаимодействие с хуками

Driver.js предоставляет хуки жизненного цикла, которые можно использовать совместно с movePrevious:

const driver = new Driver({
  onPrevious: (element, step) => {
    console.log('Переход к предыдущему шагу:', step);
  }
});

При вызове movePrevious:

  • срабатывает onPrevious
  • передаются текущий DOM-элемент и конфигурация шага

Состояние и синхронизация

Метод работает синхронно, но визуальные изменения могут зависеть от:

  • CSS-анимаций
  • времени рендеринга DOM
  • пользовательских хуков

При необходимости синхронизации логики:

driver.movePrevious();

// дополнительная логика после перехода
setTimeout(() => {
  // действия после обновления UI
}, 300);

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

Если шаги изменяются во время выполнения:

driver.defineSteps(newSteps);

movePrevious будет учитывать обновлённый массив шагов. Однако важно:

  • сохранять корректный индекс
  • избегать удаления текущего шага

Частые ошибки

1. Вызов без инициализации

const driver = new Driver();
driver.movePrevious(); // нет шагов

Результат: отсутствие эффекта

2. Вызов до start()

driver.movePrevious();

Driver ещё не знает текущий шаг — переход невозможен

3. Нарушение порядка шагов

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

Кастомизация поведения

Можно изменить поведение кнопки “Назад” через настройки popover:

const driver = new Driver({
  showButtons: true,
  nextBtnText: 'Далее',
  prevBtnText: 'Назад'
});

Driver автоматически привязывает movePrevious к кнопке “Назад”.

Использование в асинхронных сценариях

При необходимости загрузки данных перед переходом:

async function goBack() {
  await fetch('/api/data');
  driver.movePrevious();
}

Это позволяет контролировать последовательность действий.

Взаимодействие с moveNext

movePrevious и moveNext образуют двунаправленную навигацию:

// вперёд
driver.moveNext();

// назад
driver.movePrevious();

Оба метода используют один и тот же внутренний механизм управления индексом.

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

Driver хранит текущий индекс шага:

const index = driver.getCurrentStepIndex();

После вызова:

driver.movePrevious();

значение уменьшается:

index - 1

Ограничение переходов

Для предотвращения возврата:

const driver = new Driver({
  allowClose: false,
  keyboardControl: false
});

Или вручную:

document.querySelector('#prevBtn').disabled = true;

Практический сценарий

const driver = new Driver({
  steps: [
    { element: '#menu', popover: { title: 'Меню' }},
    { element: '#profile', popover: { title: 'Профиль' }},
    { element: '#settings', popover: { title: 'Настройки' }}
  ]
});

driver.start();

// кастомная логика
document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowLeft') {
    driver.movePrevious();
  }
});

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

Упрощённая логика работы метода:

movePrevious() {
  if (this.currentStepIndex > 0) {
    this.currentStepIndex--;
    this.highlightStep(this.currentStepIndex);
  }
}

Роль в UX

Метод movePrevious:

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

Особенно важен в сложных интерфейсах, где шаги не всегда воспринимаются с первого раза.

Связь с клавиатурным управлением

При включённом keyboardControl:

  • стрелка влево (←) может быть связана с movePrevious
  • поведение зависит от реализации версии Driver.js

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

Ограничение возврата на определённые шаги:

if (driver.getCurrentStepIndex() !== 1) {
  driver.movePrevious();
}

Логирование переходов:

const original = driver.movePrevious;

driver.movePrevious = function() {
  console.log('Назад');
  original.call(driver);
};

Интеграция с состоянием приложения:

driver.movePrevious();
appState.currentStep--;

Итоговая структура использования

  • Инициализация Driver
  • Определение шагов
  • Запуск тура (start)
  • Управление переходами (moveNext, movePrevious)
  • Обработка граничных условий
  • Кастомизация UX

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

Оглавление