removeStep

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

Синтаксис

tour.removeStep(stepId);
  • stepId — строка, представляющая уникальный идентификатор шага, который нужно удалить.
  • Возвращаемое значение отсутствует — метод выполняет удаление шага в рамках объекта тура.

Принцип работы

Метод removeStep ищет шаг по его id, который задаётся при создании шага через tour.addStep({ id: 'example' }). После вызова метода:

  1. Шаг удаляется из внутреннего массива шагов тура.
  2. Если удалённый шаг активен в данный момент, тур автоматически завершает его показ.
  3. Индексация шагов корректируется, чтобы последующие шаги продолжали работать корректно при навигации.

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

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

tour.addStep({
  id: 'intro',
  text: 'Добро пожаловать в интерактивный тур!',
  attachTo: { element: '.header', on: 'bottom' },
  buttons: [
    { text: 'Далее', action: tour.next }
  ]
});

tour.addStep({
  id: 'feature',
  text: 'Здесь показана ключевая функциональность.',
  attachTo: { element: '.feature', on: 'top' },
  buttons: [
    { text: 'Назад', action: tour.back },
    { text: 'Далее', action: tour.next }
  ]
});

// Удаление шага с id 'feature'
tour.removeStep('feature');

tour.start();

В этом примере шаг с id: 'feature' удаляется, и при запуске тура пользователь не увидит этого шага.

Важные моменты при использовании

  • Идентификатор обязателен: метод не работает с объектом шага напрямую, только через id.
  • Динамическое удаление: можно удалять шаги как до старта тура, так и во время его выполнения.
  • Эффект на текущий шаг: если удалённый шаг активен, он автоматически закрывается, и тур продолжает работу с последующим шагом, если он существует.
  • Влияние на навигацию: при удалении шагов индексация и порядок остаются корректными, но стоит убедиться, что кнопки типа next и back ведут к существующим шагам.

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

Чтобы очистить тур полностью, можно использовать комбинацию getSteps() и removeStep():

tour.getSteps().forEach(step => tour.removeStep(step.id));

Это гарантирует удаление всех шагов независимо от их количества и порядка.

Частые ошибки

  1. Неверный id — шаг не удаляется, если указанный идентификатор не существует.
  2. Удаление активного шага без проверки — может вызвать внезапное закрытие шага и потерю логики навигации.
  3. Попытка удалить шаг до его добавления — метод требует, чтобы шаг уже был зарегистрирован в туре.

Рекомендации по применению

  • Использовать уникальные и осмысленные идентификаторы для каждого шага.
  • Динамически удалять шаги, когда функциональность интерфейса изменяется или пользователь выполняет определённые действия.
  • Проверять существование шага перед удалением, если есть сомнения:
if (tour.getById('feature')) {
  tour.removeStep('feature');
}
  • При сложных турах с ветвлениями стоит планировать удаление шагов заранее, чтобы не нарушить логику последовательности.

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

Оглавление