Переход к конкретному шагу по индексу

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

Метод move(index)

Для перехода к конкретному шагу используется метод move(index) объекта Driver. Индекс шага соответствует позиции в массиве steps, начиная с 0. Если необходимо перейти к третьему шагу в списке, используется индекс 2.

Синтаксис:

driver.move(index);

Параметры:

  • index — целое число, индекс шага, на который нужно перейти.
  • Возвращает объект Driver, что позволяет использовать цепочки вызовов.

Пример использования move(index)

const driver = new Driver({
    steps: [
        {
            element: '#step1',
            popover: {
                title: 'Первый шаг',
                description: 'Описание первого шага',
            }
        },
        {
            element: '#step2',
            popover: {
                title: 'Второй шаг',
                description: 'Описание второго шага',
            }
        },
        {
            element: '#step3',
            popover: {
                title: 'Третий шаг',
                description: 'Описание третьего шага',
            }
        }
    ]
});

// Запуск турa
driver.start();

// Переход к третьему шагу через 2 секунды
setTimeout(() => {
    driver.move(2);
}, 2000);

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

Особенности работы метода move(index)

  1. Проверка границ индекса Если переданный индекс выходит за пределы массива шагов, Driver.js автоматически игнорирует вызов или завершает тур в зависимости от конфигурации.

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

  3. Асинхронное поведение Внутри события onNext или onPrevious можно вызывать move(index) для создания условной логики перехода. Например, перепрыгивать шаги в зависимости от выбора пользователя.

driver.defineSteps([
    {
        element: '#step1',
        popover: { title: 'Шаг 1', description: 'Выберите действие' },
        onNext: () => {
            const condition = document.querySelector('#option').checked;
            driver.move(condition ? 2 : 1);
        }
    },
    { element: '#step2', popover: { title: 'Шаг 2', description: 'Действие 1' } },
    { element: '#step3', popover: { title: 'Шаг 3', description: 'Действие 2' } }
]);

Метод moveNext() и movePrevious()

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

driver.moveNext();     // Переход к следующему шагу
driver.movePrevious(); // Возврат к предыдущему шагу
driver.move(4);        // Переход к шагу с индексом 4

Использование move(index) вместе с moveNext() и movePrevious() позволяет комбинировать линейные и условные маршруты.

Практическое применение

  • Пропуск шагов: при наличии шагов, необязательных для определенных пользователей, можно сразу перейти к нужному шагу, минуя промежуточные.
  • Динамическая маршрутизация: в зависимости от выбора пользователя можно строить разные ветви тура, управляя индексами.
  • Интеграция с событиями приложения: переход к шагу по событию, например, после загрузки данных или завершения анимации.
document.querySelector('#loadData').addEventListener('click', () => {
    driver.move(3); // Переход к шагу после загрузки данных
});

Рекомендации по использованию

  • Всегда проверять, что индекс находится в диапазоне массива шагов.
  • Для сложных туров рекомендуется заранее строить карту индексов для каждой ветви.
  • Использовать move(index) для условной логики, а moveNext() и movePrevious() — для линейных туров, чтобы сохранить стандартное поведение навигации.

Метод move(index) открывает гибкие возможности управления туром, позволяя строить как простые линейные, так и сложные ветвящиеся интерактивные инструкции в веб-приложениях с помощью Driver.js.

Оглавление