Условные туры

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

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

const driver = new Driver();

const steps = [
  {
    element: '#step1',
    popover: {
      title: 'Шаг 1',
      description: 'Описание шага 1'
    },
    condition: () => document.querySelector('#step1') !== null
  },
  {
    element: '#step2',
    popover: {
      title: 'Шаг 2',
      description: 'Описание шага 2'
    },
    condition: () => user.isLoggedIn
  }
];

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

В этом примере первый шаг отображается только если элемент с id="step1" существует на странице, а второй шаг зависит от состояния пользователя.

Использование динамических условий

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

function checkFeatureAvailability(featureId) {
  return () => features[featureId] === true;
}

const steps = [
  {
    element: '#featureA',
    popover: {
      title: 'Функция A',
      description: 'Описание функции A'
    },
    condition: checkFeatureAvailability('featureA')
  },
  {
    element: '#featureB',
    popover: {
      title: 'Функция B',
      description: 'Описание функции B'
    },
    condition: checkFeatureAvailability('featureB')
  }
];

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

Прерывание и продолжение тура

Driver.js поддерживает динамическое завершение тура, если условие для всех оставшихся шагов не выполняется. Для этого используется метод canProceed или проверка условия перед вызовом next:

driver.on('next', (step) => {
  if (!step.condition()) {
    driver.moveNext();
  }
});

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

Комбинация условных шагов и кастомных обработчиков

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

const steps = [
  {
    element: '#loginButton',
    popover: { title: 'Вход', description: 'Нажмите, чтобы войти' },
    condition: () => !user.isLoggedIn,
    onNext: () => {
      waitForLogin().then(() => driver.moveNext());
    }
  },
  {
    element: '#dashboard',
    popover: { title: 'Панель управления', description: 'Ваши данные' },
    condition: () => user.isLoggedIn
  }
];

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

Организация условных туров в крупных приложениях

Для крупных проектов рекомендуется:

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

  2. Использовать карты шагов по состоянию Например, создать объект, где ключи — это состояния интерфейса, а значения — массивы шагов.

    const toursMap = {
  guest: guestSteps,
  loggedIn: loggedInSteps,
  admin: adminSteps
};

  3. Ленивая инициализация шагов Если DOM-элементы загружаются динамически, шаги можно создавать непосредственно перед запуском тура.

Полезные советы

  • Проверять существование элементов перед запуском: это предотвращает ошибки при изменении структуры страницы.
  • Использовать onNext и onPrevious для адаптивного поведения: позволяет добавлять асинхронные действия между шагами.
  • Комбинировать условные шаги с кастомными стилями поповера: визуальные подсказки могут изменяться в зависимости от состояния.

Условные туры в Driver.js превращают статичные walkthrough в интерактивные и адаптивные маршруты, которые учитывают динамический интерфейс и поведение пользователя.

Оглавление