Навигация между шагами

В Shepherd.js навигация между шагами реализуется через встроенные методы экземпляра тура. Каждый шаг определяется объектом конфигурации с уникальным идентификатором (id) и набором опций, включая текст, привязку к элементу DOM и кнопки управления. Перемещение между шагами может быть как автоматическим, так и управляемым пользователем.

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-arrows',
    scrollTo: true
  }
});

tour.addStep({
  id: 'step-1',
  text: 'Это первый шаг',
  attachTo: { element: '#first', on: 'bottom' },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

tour.addStep({
  id: 'step-2',
  text: 'Это второй шаг',
  attachTo: { element: '#second', on: 'top' },
  buttons: [
    {
      text: 'Назад',
      action: tour.back
    },
    {
      text: 'Завершить',
      action: tour.complete
    }
  ]
});

Методы tour.next(), tour.back() и tour.complete() позволяют управлять последовательностью шагов. Важно отметить, что каждый шаг должен быть добавлен в тур до вызова этих методов, иначе навигация не будет работать корректно.

Управление текущим шагом

Экземпляр тура предоставляет доступ к текущему шагу через метод tour.getCurrentStep(). Этот метод возвращает объект текущего шага, позволяя динамически изменять его контент, кнопки или привязку.

const currentStep = tour.getCurrentStep();
currentStep.updateStepOptions({
  text: 'Обновленный текст шага',
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

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

Переход к произвольному шагу

Shepherd.js позволяет переходить к конкретному шагу без следования последовательности с помощью метода tour.show('step-id').

tour.show('step-2');

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

Автоматическая навигация

Иногда необходимо переключение шагов без участия пользователя. Для этого используется коллбэк when или события шага:

tour.addStep({
  id: 'auto-step',
  text: 'Следующий шаг появится через 3 секунды',
  buttons: [],
  when: {
    show: () => setTimeout(() => tour.next(), 3000)
  }
});

Событие show вызывается при отображении шага, а hide — при его скрытии. Это позволяет программно управлять навигацией и синхронизировать её с внешними процессами на странице.

Настройка кнопок навигации

Каждая кнопка в шаге имеет обязательный параметр action, который указывает функцию, вызываемую при нажатии. Помимо стандартных tour.next() и tour.back(), можно использовать произвольные функции:

buttons: [
  {
    text: 'Сохраниить и далее',
    action: function() {
      saveData();
      tour.next();
    }
  }
]

Также кнопки могут быть скрыты или динамически добавлены с помощью методов шага, например step.addButton() и step.removeButton(). Это позволяет создавать сложные сценарии с условной логикой переходов.

События для контроля навигации

Shepherd.js предоставляет богатый набор событий, связанных с навигацией:

  • show — шаг отображается;
  • hide — шаг скрывается;
  • complete — тур завершён;
  • cancel — тур прерван пользователем.

Подписка на события осуществляется через метод tour.on:

tour.on('show', (step) => {
  console.log(`Отображен шаг: ${step.id}`);
});

События позволяют отслеживать поведение пользователя и программно изменять последовательность шагов, например, пропускать шаги при определённых условиях.

Управление шагами на основе условий

Навигация может зависеть от состояния приложения. С помощью условных проверок и метода tour.show() можно реализовать ветвление маршрута:

if (user.isAdvanced()) {
  tour.show('advanced-step');
} else {
  tour.show('basic-step');
}

Это делает Shepherd.js гибким инструментом для создания адаптивных интерактивных инструкций.

Итоговые рекомендации по навигации

  • Использовать tour.next() и tour.back() для линейной навигации.
  • Применять tour.show('step-id') для перехода к произвольному шагу.
  • Динамически обновлять шаги через getCurrentStep() для гибкости.
  • Управлять событиями show, hide, complete для синхронизации с внешними действиями.
  • Конфигурировать кнопки с кастомными действиями для сложных сценариев.

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

Оглавление