Сложные многошаговые сценарии

Driver.js позволяет строить интерактивные руководства по интерфейсу с использованием шагов, каждый из которых может быть направлен на определённый элемент страницы. Для сложных сценариев важно грамотно организовать цепочку шагов, настраивать их поведение и управление событиями.

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

Каждый шаг задаётся объектом со следующими ключевыми свойствами:

{
  element: '#selector',      // CSS-селектор или элемент DOM
  popover: {
    title: 'Заголовок',      // Текст заголовка всплывающего окна
    description: 'Описание', // Подробное пояснение
    position: 'top'           // Позиция относительно элемента: top, bottom, left, right
  },
  onNext: () => {},          // Колбэк при переходе к следующему шагу
  onPrevious: () => {},      // Колбэк при возврате к предыдущему шагу
  onSkip: () => {},          // Колбэк при пропуске шага
  onHighlightStarted: () => {}, // Колбэк при подсветке элемента
  onHighlightEnded: () => {}    // Колбэк при завершении подсветки
}

Ключевой момент: onNext и onPrevious позволяют динамически менять порядок шагов или выполнять дополнительные действия, что критично для сложных многошаговых сценариев.

Настройка сложной последовательности

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

const steps = [
  {
    element: '#menu',
    popover: { title: 'Меню', description: 'Основные разделы', position: 'bottom' }
  },
  {
    element: '#profile',
    popover: { title: 'Профиль', description: 'Настройка личных данных', position: 'right' },
    onNext: () => console.log('Перешли к следующему шагу профиля')
  },
  {
    element: '#settings',
    popover: { title: 'Настройки', description: 'Смена параметров', position: 'left' }
  }
];

Инициализация и запуск:

const driver = new Driver({
  animate: true,
  opacity: 0.75,
  padding: 10,
  allowClose: false
});

driver.defineSteps(steps);
driver.start();

Динамическая логика переходов

Для сложных сценариев часто требуется условное управление шагами:

driver.defineSteps([
  {
    element: '#step1',
    popover: { title: 'Шаг 1', description: 'Начало', position: 'bottom' },
    onNext: () => {
      if (userHasPermission()) {
        driver.moveNext(); // переход к следующему шагу
      } else {
        driver.moveTo(steps.findIndex(s => s.element === '#alternativeStep'));
      }
    }
  },
  {
    element: '#alternativeStep',
    popover: { title: 'Альтернатива', description: 'Доступно только определённым пользователям', position: 'right' }
  }
]);

Особенность: driver.moveTo(index) позволяет переключать пользователя на произвольный шаг, не ограничиваясь линейной последовательностью.

Группировка шагов и управление сценарием

Driver.js поддерживает логические группы шагов, что облегчает управление большим сценарием:

const profileSteps = [
  { element: '#profileName', popover: { title: 'Имя', description: 'Введите ваше имя', position: 'bottom' } },
  { element: '#profileEmail', popover: { title: 'Email', description: 'Введите email', position: 'bottom' } }
];

const settingsSteps = [
  { element: '#notifications', popover: { title: 'Уведомления', description: 'Настройка уведомлений', position: 'right' } },
  { element: '#privacy', popover: { title: 'Приватность', description: 'Настройка приватности', position: 'left' } }
];

driver.defineSteps([...profileSteps, ...settingsSteps]);

Такой подход позволяет легко добавлять, удалять или менять порядок шагов, не нарушая общий сценарий.

Обработка событий и интеграция с логикой приложения

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

  • onHighlightStarted – запуск анимации или подсветки элемента.
  • onHighlightEnded – снятие подсветки или проверка состояния.
  • onNext / onPrevious – выполнение действий перед переходом.

Пример интеграции с проверкой формы:

{
  element: '#inputName',
  popover: { title: 'Имя', description: 'Введите имя', position: 'bottom' },
  onNext: () => {
    if (!document.querySelector('#inputName').value) {
      alert('Поле имя не заполнено');
      driver.moveTo(driver.getCurrentStep()); // остаться на текущем шаге
    }
  }
}

Анимации и кастомизация интерфейса

  • animate: true – плавное появление подсветки.
  • opacity – затемнение фона.
  • padding – расстояние между элементом и рамкой подсветки.
  • allowClose: false – запрет на закрытие руководства через крестик, что важно для обязательных сценариев.

Многошаговые сценарии с вложенными условиями

Можно строить ветвящиеся сценарии:

driver.defineSteps([
  { element: '#stepA', popover: { title: 'A', description: '', position: 'bottom' }, onNext: () => driver.moveTo(condition ? 2 : 3) },
  { element: '#stepB', popover: { title: 'B', description: '', position: 'right' } },
  { element: '#stepC', popover: { title: 'C', description: '', position: 'left' } }
]);

Такой подход позволяет создавать персонализированные инструкции в зависимости от действий пользователя или состояния приложения.

Секреты надежного построения сценариев

  1. Использовать уникальные селекторы – это критично для корректной подсветки.
  2. Определять колбэки для каждого шага – контроль логики делает сценарий интерактивным и безопасным.
  3. Разбивать большие сценарии на логические группы – упрощает поддержку и изменение.
  4. Тестировать ветвления – убедиться, что все пути сценария корректны.

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

Оглавление