Возврат к предыдущему шагу

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

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

Настройка шагов с поддержкой возврата

Каждый шаг задается через массив объектов в параметре steps при создании экземпляра Driver:

const driver = new Driver({
    animate: true,
    opacity: 0.75,
    steps: [
        {
            element: '#step1',
            popover: {
                title: 'Шаг 1',
                description: 'Описание первого шага',
                position: 'bottom'
            }
        },
        {
            element: '#step2',
            popover: {
                title: 'Шаг 2',
                description: 'Описание второго шага',
                position: 'top'
            }
        },
        {
            element: '#step3',
            popover: {
                title: 'Шаг 3',
                description: 'Описание третьего шага',
                position: 'right'
            }
        }
    ]
});

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

Встроенные методы для возврата

Для ручного управления шагами используются методы экземпляра Driver:

  • driver.moveNext() – переход к следующему шагу.
  • driver.movePrevious() – возврат к предыдущему шагу.
  • driver.start() – запуск последовательности шагов с первого.
  • driver.reset() – сброс текущего состояния и шагов.

Пример ручного контроля с кнопками:

document.querySelector('#nextBtn').addEventListener('click', () => {
    driver.moveNext();
});

document.querySelector('#prevBtn').addEventListener('click', () => {
    driver.movePrevious();
});

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

События, влияющие на возврат

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

  • onNext – вызывается перед переходом к следующему шагу.
  • onPrevious – вызывается перед возвратом к предыдущему шагу.
  • onHighlightStarted – срабатывает при выделении нового элемента.
  • onReset – при полном сбросе шагов.

Пример:

driver.on('onPrevious', (step) => {
    console.log(`Возврат к шагу: ${step.popover.title}`);
});

Это позволяет реализовать динамическую проверку состояния интерфейса и корректно обновлять контент поповера при возврате.

Управление индексом текущего шага

Внутри Driver.js каждый шаг имеет индекс, начиная с 0. Для сложной логики возврата можно использовать текущий индекс:

let currentStep = driver.getCurrentStep();

if (currentStep > 0) {
    driver.movePrevious();
}

Метод getCurrentStep() возвращает объект текущего шага, что упрощает контроль над последовательностью шагов при возврате.

Сложные сценарии возврата

В интерактивных руководствах иногда требуется:

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

Это реализуется через динамическое управление массивом steps и события onNext/onPrevious:

driver.on('onPrevious', (step) => {
    if(step.element === '#step3' && !userCompletedStep2) {
        driver.movePrevious(); // дополнительный возврат к step2
    }
});

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

Визуальная обратная навигация

Кнопка “Назад” в Driver.js добавляется автоматически, если включена опция showButtons в popover:

{
    element: '#step2',
    popover: {
        title: 'Шаг 2',
        description: 'Описание второго шага',
        position: 'top',
        showButtons: true
    }
}

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

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

  1. Всегда отслеживать состояние интерфейса, чтобы возврат к предыдущему шагу не приводил к конфликту с динамическим контентом.
  2. Использовать onPrevious для кастомной логики: корректировка шагов, проверка условий, подгрузка данных.
  3. Для длинных руководств поддерживать индексацию шагов, чтобы легко реализовать возврат к любому предыдущему шагу.
  4. Включать визуальные кнопки навигации (showButtons), если руководство предполагает сложное взаимодействие.

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

Оглавление