Метод complete

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

Назначение метода

Метод complete используется для:

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

Он не требует передачи параметров, так как завершение тура подразумевает обработку всех внутренних состояний Shepherd.js автоматически.

Синтаксис

tour.complete();

Пояснения:

  • tour — экземпляр Shepherd.Tour.
  • Метод вызывает финализацию тура, скрывает все подсказки и выполняет любые callback-функции, назначенные на событие complete.

Связь с событиями

Shepherd.js использует собственную систему событий. Метод complete вызывает событие complete, на которое можно подписаться для выполнения дополнительных действий:

tour.on('complete', function() {
  console.log('Тур завершён');
});

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

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

Взаимодействие с шагами

При вызове complete Shepherd.js выполняет следующие действия с шагами тура:

  1. Закрытие активного шага — текущая подсказка закрывается с анимацией.
  2. Очистка всех оставшихся подсказок — если остались невидимые шаги, они удаляются из DOM.
  3. Сброс состояния тура — свойства currentStep и steps остаются, но тур больше не считается активным.

Пример:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    cancelIcon: {
      enabled: true
    },
    classes: 'shepherd-theme-arrows',
    scrollTo: { beh * avior: 'smooth', block: 'center' }
  }
});

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

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

tour.start();

В этом примере кнопка “Завершить” вызывает метод complete, автоматически закрывая все шаги и вызывая событие complete.

Параметры и опции

Метод complete не принимает аргументов, однако его поведение можно контролировать через настройки тура и колбеков:

  • tour.on('complete', callback) — основной способ добавления кастомной логики при завершении тура.
  • tour.steps — позволяет проверить, какие шаги были выполнены до вызова complete.
  • tour.cancel() — альтернативный метод для отмены тура без вызова событий завершения.

Отличие от cancel

Метод cancel завершает тур преждевременно и может не вызывать события complete в зависимости от конфигурации. Основные отличия:

Метод Событие complete Состояние шагов Предназначение
complete Вызывается Тур корректно завершён Нормальное завершение тура
cancel Не всегда Тур прерван Отмена тура без выполнения всех шагов

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

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

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

Оглавление