Профилирование туров

Shepherd.js — это мощная библиотека для создания интерактивных руководств по пользовательскому интерфейсу в веб-приложениях. В её основе лежит объект Tour, который управляет последовательностью шагов (steps) и настройками отображения каждого шага. Для начала работы создаётся экземпляр тура:

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

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

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

После создания тура добавляются шаги через метод addStep:

tour.addStep({
  id: 'step-1',
  text: 'Это первый шаг тура',
  attachTo: { element: '#button1', on: 'bottom' },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

Ключевые параметры шага:

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

Управление последовательностью и условия показа

Shepherd.js позволяет динамически управлять ходом тура. Можно задавать условные переходы, показывать шаги только при определённых условиях:

tour.addStep({
  id: 'conditional-step',
  text: 'Этот шаг виден только если пользователь вошёл в систему',
  when: {
    show: () => {
      return user.isLoggedIn;
    }
  },
  buttons: [{ text: 'Далее', action: tour.next }]
});

Метод when позволяет прикреплять коллбеки к событиям шага, например: show, hide, complete. Это позволяет интегрировать тур с внутренней логикой приложения.

Настройка внешнего вида и поведения шагов

Каждый шаг можно детально настраивать через параметры:

  • Стилизация через классы: classes: 'custom-step highlight' позволяет подключать CSS для визуального оформления.
  • Размер и позиционирование: width, height, maxWidth управляют размерами подсказки.
  • События: Использование beforeShowPromise позволяет выполнять асинхронные действия перед отображением шага, например, подгрузку данных или открытие модального окна.
tour.addStep({
  id: 'async-step',
  text: 'Дождитесь загрузки данных...',
  beforeShowPromise: () => fetchData(),
  attachTo: { element: '#data-container', on: 'top' },
  buttons: [{ text: 'Далее', action: tour.next }]
});

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

Shepherd.js предоставляет обширный API для управления турами:

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

Для сохранения прогресса можно интегрировать тур с локальным хранилищем:

tour.on('complete', () => {
  localStorage.setItem('tourCompleted', 'true');
});

if (!localStorage.getItem('tourCompleted')) {
  tour.start();
}

Продвинутые техники профилирования туров

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

const dashboardTour = new Shepherd.Tour({...});
const settingsTour = new Shepherd.Tour({...});

2. Динамическое создание шагов: Шаги можно генерировать на лету, основываясь на состоянии DOM или данных пользователя:

document.querySelectorAll('.feature').forEach((el, i) => {
  tour.addStep({
    id: `feature-${i}`,
    text: `Описание функции ${i+1}`,
    attachTo: { element: el, on: 'right' },
    buttons: [{ text: 'Далее', action: tour.next }]
  });
});

3. Интеграция с роутером: В SPA часто требуется, чтобы шаги показывались только на определённых маршрутах. Для этого используют события роутера и методы show и hide шагов.

4. Адаптивное позиционирование: Shepherd.js автоматически корректирует позицию подсказки при переполнении экрана, но можно вручную задавать fallback позиции:

attachTo: {
  element: '#menu',
  on: 'left',
  fallback: ['top', 'bottom']
}

Оптимизация пользовательского опыта

  • Модальные оверлеи: помогают сфокусировать внимание пользователя на шаге.
  • Анимации появления/скрытия: можно настроить через CSS для плавного эффекта.
  • События завершения шага: полезны для запуска аналитики, логирования или активации последующих действий.

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

Оглавление