getCurrentStep

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

Основное назначение

getCurrentStep используется для:

  • Определения, какой шаг активен в конкретный момент.
  • Выполнения действий, специфичных для текущего шага (например, динамическое изменение контента).
  • Проверки состояния руководства перед программным переходом на следующий или предыдущий шаг.
  • Управления пользовательским интерфейсом в зависимости от позиции в туре.

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

Синтаксис

const currentStep = tour.getCurrentStep();

Пояснения:

  • tour — экземпляр объекта Shepherd.Tour.
  • currentStep — объект текущего шага (Shepherd.Step) или null, если тур еще не начат или завершен.

Структура возвращаемого объекта

Объект шага (Shepherd.Step) содержит следующие ключевые свойства и методы:

Свойства

  • id — уникальный идентификатор шага.
  • options — объект конфигурации шага, включающий текст, заголовок, расположение и кнопки.
  • element — DOM-элемент, к которому привязан шаг.
  • tether — объект Tether, отвечающий за позиционирование подсказки.

Методы

  • show() — отображение текущего шага.
  • hide() — скрытие текущего шага.
  • next() — переход к следующему шагу.
  • back() — возвращение к предыдущему шагу.
  • updateStepOptions(options) — обновление параметров шага динамически.
  • destroy() — удаление шага и освобождение ресурсов.

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

Получение текущего шага и вывод его идентификатора

const currentStep = tour.getCurrentStep();
if (currentStep) {
  console.log("Текущий шаг:", currentStep.id);
}

Динамическое изменение текста шага

const currentStep = tour.getCurrentStep();
if (currentStep) {
  currentStep.updateStepOptions({
    text: "Обновленный текст текущего шага"
  });
}

Условный переход на следующий шаг

const currentStep = tour.getCurrentStep();
if (currentStep && currentStep.id === "step-2") {
  currentStep.next();
}

Взаимодействие с событиями

Метод getCurrentStep часто используется вместе с событиями туров:

  • show — вызывается при отображении шага.
  • hide — вызывается при скрытии шага.
  • complete — вызывается при завершении тура.

Пример использования внутри события show:

tour.on('show', function() {
  const step = tour.getCurrentStep();
  if (step && step.id === 'step-3') {
    console.log("Пользователь достиг шага 3");
  }
});

Практические рекомендации

  • Проверка на null: метод может вернуть null, если тур не активен. Всегда проверять результат перед вызовом методов шага.
  • Динамическая адаптация: с помощью getCurrentStep можно менять контент шага в зависимости от действий пользователя, что делает тур более интерактивным.
  • Синхронизация с внешним UI: интеграция с кнопками или элементами страницы позволяет создавать более гибкие и контекстно-зависимые подсказки.

Совместимость с другими методами Shepherd.js

getCurrentStep эффективно работает вместе с методами:

  • next() и back() для навигации.
  • addStep() для добавления новых шагов на лету.
  • start() и cancel() для управления жизненным циклом тура.

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

Оглавление