cancel

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

Методы отмены тура

tour.cancel() — основной метод для немедленного прекращения тура.

  • При вызове этого метода текущий шаг закрывается.
  • Все последующие шаги не будут показаны.
  • Тур не считается завершённым успешно, поэтому срабатывают события, связанные с отменой.

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

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

tour.addStep({
  id: 'intro',
  text: 'Добро пожаловать!',
  buttons: [
    {
      text: 'Пропустить',
      action: tour.cancel
    }
  ]
});

tour.start();

В этом примере кнопка «Пропустить» вызывает tour.cancel(), сразу останавливая тур.

tour.complete() Метод для завершения тура считается успешным:

  • Все шаги, которые должны были быть показаны, считаются выполненными.
  • Срабатывают события complete.
  • В отличие от cancel, завершение не является прерыванием.

Использование:

tour.addStep({
  id: 'finish',
  text: 'Вы завершили тур!',
  buttons: [
    {
      text: 'Завершить',
      action: tour.complete
    }
  ]
});

Отмена отдельных шагов

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

tour.addStep({
  id: 'conditional',
  text: 'Этот шаг может быть пропущен',
  when: {
    show: function() {
      if (someCondition) {
        tour.next(); // Переход к следующему шагу
        return false; // Отмена текущего шага
      }
    }
  }
});

В блоке when.show можно программно отменять отображение шага, вызывая tour.next() или tour.cancel() в зависимости от условий.

События, связанные с отменой

Shepherd.js позволяет подписываться на события, чтобы реагировать на отмену тура:

  • cancel — срабатывает при вызове tour.cancel().
  • complete — срабатывает при успешном завершении.
  • show / hide / destroy — помогают отслеживать состояние шагов при отмене.

Пример:

tour.on('cancel', () => {
  console.log('Тур был отменён пользователем');
});

tour.on('complete', () => {
  console.log('Тур успешно завершён');
});

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

Практические советы

  • Кнопка отмены на каждом шаге: добавление cancelIcon и кнопки с tour.cancel() улучшает UX.
  • Условная отмена: проверять условия перед показом шагов позволяет избежать ненужных подсказок.
  • Очистка ресурсов: после отмены тура рекомендуется удалять все слушатели событий или динамически созданные элементы, чтобы не оставлять “мусор” в DOM.

Комбинация с другими действиями

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

tour.addStep({
  id: 'step1',
  text: 'Вы можете отменить этот шаг',
  buttons: [
    {
      text: 'Отмена',
      action: () => {
        saveProgress();
        tour.cancel();
      }
    }
  ]
});

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

Вывод

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

Оглавление