События уровня тура

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

Типы событий тура

В Shepherd.js события тура делятся на несколько категорий:

  • start – срабатывает при запуске тура через tour.start().
  • complete – срабатывает после успешного завершения всех шагов тура.
  • cancel – срабатывает, если пользователь прерывает тур через tour.cancel().
  • show – возникает при отображении конкретного шага тура.
  • active – срабатывает, когда шаг становится активным (актуально при переходе вперед или назад).
  • hide – вызывается при скрытии шага, например, при переходе к следующему шагу.

Эти события позволяют синхронизировать действия внешних компонентов с состоянием тура, а также выполнять кастомные функции в нужные моменты.

Регистрация обработчиков событий

События тура регистрируются через метод on объекта тура:

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

tour.on('start', () => {
  console.log('Тур запущен');
});

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

tour.on('cancel', () => {
  console.log('Тур отменен');
});

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

Работа с событиями шагов через тур

Хотя шаги Shepherd.js имеют свои собственные события, часто требуется обработка событий шагов через объект тура. Это достигается с помощью событий show и hide, которые предоставляют ссылку на текущий шаг:

tour.on('show', (event) => {
  const step = event.step;
  console.log(`Показан шаг: ${step.id}`);
});

tour.on('hide', (event) => {
  console.log(`Скрыт шаг: ${event.step.id}`);
});

Использование event.step позволяет не только отслеживать прогресс тура, но и выполнять кастомные действия для каждого конкретного шага, например, запуск анимаций или подгрузку данных.

Снятие обработчиков событий

Для предотвращения утечек памяти и управления динамическими турами важно уметь удалять обработчики событий. Shepherd.js предоставляет метод off:

function onTourStart() {
  console.log('Тур снова запущен');
}

tour.on('start', onTourStart);

// Позднее при необходимости убрать обработчик
tour.off('start', onTourStart);

Метод off принимает два аргумента: название события и ссылку на функцию-обработчик. Без передачи функции будет удалена только конкретная зарегистрированная функция, а не все обработчики события.

События и асинхронные действия

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

tour.on('show', async (event) => {
  const step = event.step;
  await fetchDataForStep(step.id);
  step.updateStepOptions({
    text: `Данные подгружены для шага ${step.id}`
  });
});

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

Порядок срабатывания событий

Важно понимать последовательность срабатывания основных событий тура:

  1. start — перед показом первого шага.
  2. show — когда первый шаг видим на странице.
  3. active — когда шаг активен и готов к взаимодействию.
  4. hide — перед переходом к следующему шагу.
  5. complete — после окончания последнего шага.
  6. cancel — если тур был прерван в любой момент.

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

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

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

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

Оглавление