Удаление шагов

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

Методы удаления шагов

В Shepherd.js шаги добавляются с помощью метода tour.addStep(). Для удаления шагов используются следующие подходы:

  1. Удаление по имени шага

Каждому шагу можно присвоить уникальное имя при создании:

const tour = new Shepherd.Tour({ defaultStepOptions: { scrollTo: true } });

tour.addStep({
  id: 'step1',
  text: 'Первый шаг тура',
  attachTo: { element: '.button', on: 'bottom' }
});

tour.addStep({
  id: 'step2',
  text: 'Второй шаг тура',
  attachTo: { element: '.input', on: 'top' }
});

Для удаления шага используется метод tour.removeStep(id). Он принимает строку с идентификатором шага:

tour.removeStep('step1');

После вызова этого метода шаг с id='step1' будет полностью удалён из коллекции шагов тура и не появится при запуске tour.start().

  1. Удаление текущего шага

Если необходимо удалить шаг, который в данный момент отображается, можно сначала получить текущий шаг через tour.getCurrentStep(), затем удалить его:

const currentStep = tour.getCurrentStep();

if (currentStep) {
  tour.removeStep(currentStep.id);
}

Важно: после удаления текущего шага тур продолжит выполнение, но необходимо учитывать, что метод next() или back() может вести к удалённым шагам, если не обновить последовательность шагов.

  1. Очистка всех шагов

Иногда требуется полностью очистить тур от всех шагов, например, при динамическом формировании контента:

tour.steps.forEach(step => {
  tour.removeStep(step.id);
});

После такой очистки tour.steps будет пустым массивом, и tour.start() не вызовет ни одного шага.

Влияние на работу тура

Удаление шагов может изменить логику маршрута. При удалении:

  • Последовательность шагов автоматически перестраивается. Shepherd.js корректно обрабатывает смещение индексов.
  • Объекты DOM и их события, привязанные к шагам, будут освобождены. Элементы интерфейса перестанут быть выделены или затемнены.
  • События шагов (show, hide, complete) не вызываются для удалённых шагов, что следует учитывать при логике пользовательских действий.

Рекомендации при удалении шагов

  • Всегда проверять наличие шага перед удалением: if (tour.getById(id)).
  • При динамическом изменении шагов в ходе тура использовать методы next() и back() с осторожностью.
  • При удалении шагов с анимациями или пользовательскими обработчиками убедиться, что соответствующие таймеры и слушатели событий очищены.

Примеры комбинированного удаления

// Удаление шага по условию
tour.steps.forEach(step => {
  if (step.id.startsWith('temp')) {
    tour.removeStep(step.id);
  }
});

// Удаление текущего шага и переход к следующему
const current = tour.getCurrentStep();
if (current) {
  const nextStepId = tour.steps[tour.steps.indexOf(current) + 1]?.id;
  tour.removeStep(current.id);
  if (nextStepId) {
    tour.show(nextStepId);
  }
}

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

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

Оглавление