Понятие тура

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

Тур как объект

Тур в Shepherd.js создается как объект класса Shepherd.Tour с набором параметров конфигурации. Основные из них:

  • defaultStepOptions — объект с настройками по умолчанию для всех шагов.
  • useModalOverlay — флаг для затемнения фона при отображении шага.
  • exitOnEsc — закрытие тура при нажатии клавиши Esc.
  • steps — массив шагов, который может быть пустым при инициализации и заполняться динамически.

Пример создания базового тура:

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

Структура шага

Каждый шаг в туре представляет собой отдельный объект с набором ключевых параметров:

  • id — уникальный идентификатор шага.

  • text — текстовое содержание, которое будет отображаться пользователю.

  • attachTo — объект с двумя полями:

    • element — DOM-элемент, к которому прикрепляется подсказка.
    • on — сторона, на которой будет отображаться подсказка (top, bottom, left, right).

  • buttons — массив кнопок с действиями (next, back, cancel).

  • when — события жизненного цикла шага (show, hide и др.).

Пример шага:

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

Управление туром

Shepherd.js предоставляет методы для управления жизненным циклом тура:

  • tour.start() — запускает тур с первого шага.
  • tour.next() — переходит к следующему шагу.
  • tour.back() — возвращается к предыдущему шагу.
  • tour.cancel() — завершает тур досрочно.
  • tour.complete() — завершает тур после последнего шага.

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

tour.on('start', () => console.log('Тур начался'));
tour.on('complete', () => console.log('Тур завершён'));
tour.on('cancel', () => console.log('Тур был отменён'));

Настройка визуального оформления

Shepherd.js поддерживает темы и классы CSS для стилизации подсказок. Через параметр classes можно указать существующую тему (shepherd-theme-arrows, shepherd-theme-dark) или создать собственную.

Дополнительно можно настраивать анимацию, стрелки и размеры:

const step = tour.addStep({
  id: 'feature',
  text: 'Здесь находится важная функциональность.',
  attachTo: { element: '#feature', on: 'right' },
  classes: 'custom-theme',
  arrow: true
});

Динамические шаги и условные туры

Шаги можно добавлять динамически в процессе работы приложения, что позволяет создавать адаптивные туры:

if (user.isNew) {
  tour.addStep({
    id: 'new-user',
    text: 'Специальный шаг для новых пользователей',
    attachTo: { element: '#welcome', on: 'bottom' }
  });
}

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

Интеграция с событиями DOM

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

document.querySelector('#start-tour').addEventListener('click', () => {
  tour.start();
});

Кроме того, для каждого шага можно задать колбэки beforeShowPromise, которые возвращают Promise и позволяют выполнять асинхронные действия перед отображением подсказки.

Оглавление