Метод getCurrentStep

Метод getCurrentStep является одним из ключевых инструментов управления текущим состоянием тура в библиотеке Shepherd.js. Он позволяет получить ссылку на активный шаг (step) в любой момент выполнения, что делает возможным динамическое взаимодействие с пользователем и условное управление навигацией по туру.

Синтаксис

const currentStep = tour.getCurrentStep();
  • tour – объект тура, созданный через new Shepherd.Tour(options).
  • currentStep – объект типа Step или undefined, если тур не запущен или завершен.

Основные возможности

  1. Получение текущего шага Метод возвращает именно тот шаг, который в данный момент отображается пользователю. Это удобно для изменения его состояния, добавления новых действий или проверки данных.
const tour = new Shepherd.Tour({ defaultStepOptions: { cancelIcon: { enabled: true } } });

tour.addStep({
  id: 'intro',
  text: 'Добро пожаловать!',
  buttons: [
    { text: 'Далее', action: tour.next }
  ]
});

tour.start();

const step = tour.getCurrentStep();
console.log(step.id); // 'intro'
  1. Динамическое управление кнопками и действиями После получения текущего шага можно программно изменять его кнопки, добавлять события show или hide, а также изменять текст и другие параметры.
const currentStep = tour.getCurrentStep();

currentStep.updateStepOptions({
  text: 'Обновленный текст шага',
  buttons: [
    { text: 'Назад', action: tour.back },
    { text: 'Далее', action: tour.next }
  ]
});
  1. Условная логика на основе шага Получив текущий шаг, можно реализовать логику, зависящую от конкретного этапа тура. Например, показывать подсказку только при определенных условиях.
const step = tour.getCurrentStep();
if (step.id === 'settings') {
  // Выполнить дополнительные действия
  console.log('Пользователь находится на шаге настроек');
}

Особенности использования

  • Возврат undefined Если метод вызывается до старта тура или после его завершения, возвращается undefined. Необходимо учитывать это при добавлении логики, зависящей от текущего шага.
if (tour.getCurrentStep()) {
  console.log('Тур запущен');
} else {
  console.log('Тур неактивен');
}

  • Сравнение с другими методами Метод getCurrentStep отличается от next() и back() тем, что не изменяет состояние тура, а лишь возвращает ссылку на активный шаг. Это делает его безопасным для проверки состояния без побочных эффектов.

  • Комбинация с событиями Часто используется вместе с событиями show и hide для получения актуального шага в момент его отображения:

tour.on('show', () => {
  const step = tour.getCurrentStep();
  console.log(`Показан шаг: ${step.id}`);
});

Применение в сложных сценариях

  • Динамическое изменение тура На основе текущего шага можно добавлять новые шаги или менять последовательность:
if (tour.getCurrentStep().id === 'intro') {
  tour.addStep({
    id: 'extra',
    text: 'Дополнительный шаг',
    buttons: [{ text: 'Далее', action: tour.next }]
  });
}
  • Отслеживание прогресса Получение текущего шага позволяет строить визуальные индикаторы прогресса, синхронизировать тур с внешними элементами интерфейса и управлять пользовательским опытом более гибко.

Важные моменты

  • Метод не запускает тур, он лишь предоставляет доступ к активному шагу.
  • Возвращаемый объект полностью совместим с методами класса Step (например, next(), back(), updateStepOptions()).
  • Рекомендуется проверять, что метод не возвращает undefined перед обращением к свойствам шага, чтобы избежать ошибок.

Метод getCurrentStep является инструментом для детального контроля над туром и обеспечивает возможность динамической адаптации шагов, позволяя создавать интерактивные и гибкие пользовательские маршруты в приложениях на JavaScript с использованием Shepherd.js.

Оглавление