Изменение порядка шагов

Shepherd.js предоставляет гибкий механизм для создания интерактивных руководств по пользовательскому интерфейсу. Основой любого такого руководства является тур (Tour), который состоит из множества шагов (Step). Управление порядком этих шагов позволяет создавать динамичные, адаптивные и интерактивные сценарии обучения пользователей.

Структура шага

Каждый шаг создается с помощью метода tour.addStep(id, options), где id — уникальный идентификатор шага, а options — объект с настройками шага. Среди ключевых опций:

  • text — текст, отображаемый в тултипе.
  • attachTo — привязка к элементу DOM.
  • buttons — массив кнопок, каждая из которых может вызывать next(), back(), или кастомную функцию.
  • advanceOn — событие, которое автоматически переводит на следующий шаг.
  • beforeShowPromise — функция или промис, выполняемый перед отображением шага, полезен для динамического изменения контента.

Пример создания шага:

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

Перестановка шагов

Shepherd.js не использует фиксированное числовое индексирование для шагов. Вместо этого порядок определяется последовательностью добавления шагов и методами навигации (next(), back()). Для изменения порядка шагов можно:

  1. Изменять порядок добавления шагов Самый простой способ — добавить шаги в нужной последовательности:
tour.addStep('step1', { text: 'Первый шаг' });
tour.addStep('step2', { text: 'Второй шаг' });
tour.addStep('step3', { text: 'Третий шаг' });
  1. Использовать кнопки для перехода на конкретный шаг Можно задать кастомную функцию для кнопки, которая переводит на любой шаг по его id:
tour.addStep('step2', {
  text: 'Второй шаг',
  buttons: [
    { text: 'Пропустить к третьему', action: () => tour.show('step3') },
    { text: 'Назад', action: tour.back }
  ]
});
  1. Динамическая вставка шагов Shepherd позволяет создавать шаги “на лету”, что удобно, если порядок должен зависеть от состояния приложения:
if(user.isAdmin) {
  tour.addStep('adminStep', { text: 'Админские функции' });
}

Управление видимостью шагов

Для сложных сценариев важно не только менять порядок, но и управлять тем, какие шаги будут отображены:

  • Удаление шагов: tour.removeStep('stepId') удаляет шаг из тура.
  • Пропуск шагов: при помощи кнопок или условий можно пропустить определенные шаги.
  • Проверка перед показом: beforeShowPromise позволяет динамически отменять или изменять шаг:
tour.addStep('stepConditional', {
  text: 'Шаг только для определённых пользователей',
  beforeShowPromise: () => {
    if(!user.isLoggedIn) {
      tour.next();
    }
  }
});

Навигация вне стандартной последовательности

Shepherd.js предоставляет методы:

  • tour.show(id) — показать шаг с указанным идентификатором.
  • tour.next() — перейти к следующему шагу.
  • tour.back() — перейти к предыдущему шагу.
  • tour.complete() — завершить тур.

Сочетание этих методов позволяет полностью контролировать поток тура. Например, можно создать нелинейный сценарий:

tour.addStep('step1', { text: 'Начало' });
tour.addStep('step2', { text: 'Выбор опции A или B', buttons: [
  { text: 'A', action: () => tour.show('stepA') },
  { text: 'B', action: () => tour.show('stepB') }
]});
tour.addStep('stepA', { text: 'Выбран A' });
tour.addStep('stepB', { text: 'Выбран B' });

Итоговая структура для динамического порядка

  • Использовать уникальные id для всех шагов.
  • Настраивать переходы через buttons и advanceOn.
  • Применять beforeShowPromise для динамических условий.
  • Добавлять или удалять шаги на лету при необходимости.
  • Использовать методы show, next, back для точного контроля порядка.

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

Оглавление