Инструменты разработчика

Shepherd.js — это библиотека для создания интерактивных пошаговых подсказок и туров по интерфейсу веб-приложений. Для её использования необходимо установить библиотеку через npm или подключить через CDN.

Установка через npm:

npm install shepherd.js

Подключение через CDN:

<link rel="stylesheet" href="https://unpkg.com/shepherd.js/dist/css/shepherd.css">
<script src="https://unpkg.com/shepherd.js/dist/js/shepherd.min.js"></script>

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

Создание тура

Тур создаётся через объект Shepherd.Tour, в котором задаются глобальные настройки:

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

Ключевые настройки:

  • defaultStepOptions — конфигурация, применяемая ко всем шагам по умолчанию.
  • cancelIcon — добавляет кнопку закрытия подсказки.
  • scrollTo — автоматически скроллит страницу к элементу, к которому привязана подсказка.
  • useModalOverlay — затемняет фон за подсказкой для лучшей фокусировки пользователя.

Добавление шагов

Каждый шаг добавляется методом addStep и включает привязку к элементу, текст подсказки и кнопки навигации.

tour.addStep({
  id: 'step1',
  text: 'Это главное меню приложения.',
  attachTo: {
    element: '#main-menu',
    on: 'bottom'
  },
  buttons: [
    {
      text: 'Назад',
      action: tour.back
    },
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

Особенности настройки шага:

  • id — уникальный идентификатор шага.
  • text — текст подсказки. Можно использовать HTML-разметку.
  • attachTo — объект, определяющий элемент и позицию подсказки (top, bottom, left, right).
  • buttons — массив кнопок, каждая с текстом и действием (tour.next, tour.back, tour.complete).

Кастомизация внешнего вида

Shepherd.js позволяет изменять стиль подсказок через CSS или использовать встроенные классы.

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

tour.addStep({
  id: 'step2',
  text: 'Панель инструментов с дополнительными функциями.',
  attachTo: { element: '#toolbar', on: 'top' },
  classes: 'custom-shepherd-step',
  buttons: [
    { text: 'Далее', action: tour.next }
  ]
});

Возможные классы и стили:

  • shepherd-theme-arrows — подсказка со стрелкой.
  • shepherd-theme-default — стандартная подсказка.
  • custom-shepherd-step — можно создать собственный класс в CSS для изменения цвета, шрифта, размеров кнопок.
.custom-shepherd-step {
  background-color: #2c3e50;
  color: #ecf0f1;
  font-size: 16px;
}

Навигация по туру

Shepherd.js поддерживает несколько методов навигации:

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

Можно также подписываться на события:

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

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

Динамическое создание шагов

Шаги можно создавать на лету, исходя из состояния приложения или взаимодействия пользователя:

const dynamicStep = {
  id: 'dynamic',
  text: 'Элемент появился динамически!',
  attachTo: { element: '#dynamic-element', on: 'right' },
  buttons: [{ text: 'Далее', action: tour.next }]
};

if (document.querySelector('#dynamic-element')) {
  tour.addStep(dynamicStep);
}

Интеграция с инструментами разработчика

Shepherd.js хорошо сочетается с:

  • DevTools — отладка DOM-элементов и событий тура.
  • Консоль браузера — вызов tour.start() напрямую для тестирования.
  • Системами логирования — отслеживание прогресса пользователя в туре (tour.on('show', callback)).
tour.on('show', (event) => {
  console.log(`Показан шаг: ${event.step.id}`);
});

Расширенные возможности

  1. Многоуровневые туры — туры можно объединять, вызывая один из другого.
  2. Условные шаги — отображение шагов только при определённых условиях.
  3. Анимация подсказок — с помощью CSS-анимаций для плавного появления/исчезновения.
  4. Мультиязычность — динамическая подстановка текста для разных локалей.

Рекомендации по отладке

  • Проверять правильность селекторов в attachTo. Ошибка приведёт к некорректному позиционированию.
  • Использовать useModalOverlay для фокусировки внимания на текущем элементе.
  • Для динамически создаваемых элементов проверять их наличие через MutationObserver или события интерфейса.
  • Логировать события через tour.on для отслеживания проблем и последовательности шагов.

Примеры комплексного тура

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

tour.addStep({
  id: 'menu',
  text: 'Главное меню приложения.',
  attachTo: { element: '#main-menu', on: 'bottom' },
  buttons: [
    { text: 'Далее', action: tour.next }
  ]
});

tour.addStep({
  id: 'toolbar',
  text: 'Панель инструментов для работы с документами.',
  attachTo: { element: '#toolbar', on: 'top' },
  buttons: [
    { text: 'Назад', action: tour.back },
    { text: 'Далее', action: tour.next }
  ]
});

tour.addStep({
  id: 'footer',
  text: 'Здесь расположены дополнительные настройки.',
  attachTo: { element: '#footer', on: 'top' },
  buttons: [
    { text: 'Назад', action: tour.back },
    { text: 'Завершить', action: tour.complete }
  ]
});

tour.start();

Этот пример демонстрирует создание последовательного тура с несколькими шагами, кнопками навигации и автоматической прокруткой к элементам.

Оглавление