Удаление шагов во время тура

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

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

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

  • tour.removeStep(id) — удаляет конкретный шаг по его идентификатору.
  • step.destroy() — удаляет шаг через объект шага, предварительно полученный методом tour.getById(id).
  • tour.steps = [] — полное очищение всех шагов тура (редко используется, чаще для сброса).

Удаление шага по идентификатору

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

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

tour.addStep({
  id: 'intro',
  text: 'Добро пожаловать!',
  attachTo: { element: '.header', on: 'bottom' }
});

tour.addStep({
  id: 'feature',
  text: 'Здесь находится важная функция',
  attachTo: { element: '.feature-btn', on: 'right' }
});

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

При вызове removeStep('feature') шаг с идентификатором 'feature' полностью удаляется из внутреннего массива tour.steps, и тур будет проигрываться без него.

Удаление шага через объект шага

Если есть ссылка на объект шага, можно использовать метод destroy:

const step = tour.getById('intro');
step.destroy();

После вызова destroy() шаг автоматически удаляется из туров, и связанные с ним DOM-элементы также очищаются. Это особенно полезно, когда шаги создаются динамически на основе условий приложения.

Удаление шагов во время активного тура

Shepherd.js позволяет удалять шаги даже во время активного тура. При этом важно учитывать:

  1. Переключение текущего шага: если удаляется текущий шаг, тур автоматически переходит к следующему доступному шагу.
  2. Проверка наличия шагов: если после удаления не остаётся шагов, метод tour.next() не будет работать, и тур завершится.

Пример динамического удаления шагов в процессе тура:

tour.on('show', (event) => {
  const step = event.step;

  if (step.id === 'intro' && someCondition) {
    tour.removeStep('feature');
  }
});

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

Массовое удаление шагов

Иногда необходимо очистить все шаги и создать их заново:

tour.steps.forEach(step => step.destroy());
// теперь можно добавить новые шаги
tour.addStep({
  id: 'new-step',
  text: 'Обновлённый шаг',
  attachTo: { element: '.new-element', on: 'top' }
});

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

Особенности удаления шагов

  • Ссылки на удалённые шаги: после удаления шага через removeStep или destroy ссылки на этот объект становятся недействительными. Попытка вызвать методы удалённого шага приведёт к ошибке.
  • События: удаление шага вызывает внутренние события Shepherd.js, такие как destroy, что может быть использовано для логирования или дополнительных действий.
  • Динамическая генерация: удаление и создание шагов на лету не требует перезапуска тура, однако рекомендуется тщательно управлять идентификаторами, чтобы избежать конфликтов.

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

  • Использовать уникальные id для всех шагов — это облегчает управление удалением.
  • Для условного отображения шагов лучше сначала удалить лишние шаги до вызова tour.start(), чтобы избежать визуальных сбоев.
  • При сложных турах с динамическими шагами комбинировать getById, destroy и removeStep, чтобы гарантировать корректное управление памятью и DOM.

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

Оглавление