Переход к следующему шагу

В Driver.js управление последовательностью шагов осуществляется через встроенные методы и события, которые позволяют плавно переходить от одного шага к другому, обеспечивая интерактивные подсказки пользователю. Основным инструментом для перехода между шагами является метод moveNext(), который вызывается на экземпляре Driver. Этот метод автоматически закрывает текущий шаг и открывает следующий в очереди.

driver.moveNext();

Если текущий шаг является последним, вызов moveNext() завершает демонстрацию, после чего срабатывает событие driver:complete.

Автоматическое продвижение

Driver.js поддерживает возможность автоматического перехода между шагами через настройку onNext для каждого шага. Это позволяет выполнять определённый код перед открытием следующего шага или реализовать условное продвижение.

const steps = [
  {
    element: '#step1',
    popover: {
      title: 'Первый шаг',
      description: 'Описание первого шага',
      position: 'bottom'
    },
    onNext: function () {
      console.log('Переход к следующему шагу');
    }
  },
  {
    element: '#step2',
    popover: {
      title: 'Второй шаг',
      description: 'Описание второго шага',
      position: 'top'
    }
  }
];

const driver = new Driver();
driver.defineSteps(steps);
driver.start();

В данном примере для первого шага задан коллбек onNext, который выполняется при вызове moveNext(), позволяя добавлять дополнительные действия между шагами.

Переход к предыдущему шагу

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

driver.movePrevious();

Управление шагами через индексы

Driver.js позволяет программно переходить к любому шагу, используя moveTo(stepIndex), где stepIndex — индекс шага в массиве, определённом при помощи defineSteps(). Этот подход обеспечивает полный контроль над последовательностью и позволяет реализовать динамические сценарии.

driver.moveTo(2); // Переход к третьему шагу

Метод moveTo() автоматически вызывает все события закрытия и открытия шагов, что гарантирует корректное выполнение коллбеков onNext и onPrevious.

Использование событий для контроля переходов

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

  • driver:next — срабатывает перед переходом к следующему шагу.
  • driver:previous — срабатывает перед переходом к предыдущему шагу.
  • driver:complete — срабатывает при завершении всех шагов.
  • driver:reset — срабатывает при сбросе демонстрации.

Пример использования событий:

driver.on('driver:next', (step) => {
  console.log('Переходим к шагу:', step);
});

driver.on('driver:complete', () => {
  console.log('Все шаги завершены');
});

Условные переходы

Для создания интерактивных сценариев можно использовать условные переходы с помощью коллбеков onNext или событий driver:next. Например, можно проверять состояние интерфейса или значения формы и переходить только при выполнении определённых условий:

driver.on('driver:next', (step) => {
  if (!document.querySelector('#requiredInput').value) {
    alert('Заполните поле перед переходом');
    step.preventDefault();
  }
});

Метод preventDefault() внутри события позволяет остановить переход к следующему шагу до выполнения необходимых условий.

Автопереход через таймер

Driver.js поддерживает автоматическое переключение шагов с задержкой. Для этого можно использовать стандартный setTimeout в коллбеке onNext:

{
  element: '#step1',
  popover: {
    title: 'Шаг с задержкой',
    description: 'Следующий шаг откроется через 3 секунды'
  },
  onNext: function () {
    setTimeout(() => driver.moveNext(), 3000);
  }
}

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

Комбинация методов для сложных сценариев

Для построения гибкой демонстрации шагов методы moveNext(), movePrevious(), moveTo() и события driver:next, driver:previous можно комбинировать. Это позволяет реализовать:

  • Пошаговые инструкции с ветвлениями
  • Динамическое добавление шагов в процессе демонстрации
  • Условные переходы на основе действий пользователя

Пример динамического добавления шагов:

driver.on('driver:next', (step) => {
  if (step.element === '#step2') {
    driver.defineSteps([{
      element: '#step2b',
      popover: { title: 'Доп. шаг', description: 'Новый шаг после второго' }
    }]);
  }
});

В результате демонстрация становится адаптивной и полностью управляемой из кода.

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

Оглавление