hasPreviousStep

Метод hasPreviousStep используется для проверки наличия предыдущего шага в последовательности шагов интерактивного руководства, создаваемого с помощью библиотеки Driver.js. Он позволяет определить, можно ли вернуть пользователя к предыдущему шагу, что особенно важно для реализации навигации «назад» в пошаговых инструкциях.

Синтаксис

driver.hasPreviousStep();

  • Возвращаемое значение: boolean

    • true — если предыдущий шаг существует.
    • false — если текущий шаг является первым и возврат невозможен.

Метод не принимает аргументов.

Контекст использования

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

{
    element: '#button',
    popover: {
        title: 'Кнопка подтверждения',
        description: 'Нажмите для продолжения',
        position: 'bottom'
    }
}

При использовании метода hasPreviousStep важно, чтобы был инициализирован экземпляр Driver с массивом шагов:

const driver = new Driver({
    steps: [
        { element: '#step1', popover: { title: 'Шаг 1', description: 'Описание шага 1' } },
        { element: '#step2', popover: { title: 'Шаг 2', description: 'Описание шага 2' } }
    ]
});

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

driver.start();

if (driver.hasPreviousStep()) {
    console.log('Можно перейти к предыдущему шагу');
} else {
    console.log('Текущий шаг первый, возврат невозможен');
}

В этом примере метод hasPreviousStep возвращает false на первом шаге и true на всех последующих.

Использование совместно с previous()

Метод hasPreviousStep обычно применяется перед вызовом метода previous(), который осуществляет переход к предыдущему шагу:

if (driver.hasPreviousStep()) {
    driver.previous();
} else {
    console.log('Вы уже на первом шаге');
}

Такой подход предотвращает ошибочные вызовы previous() на первом шаге, обеспечивая безопасную навигацию.

Примеры интеграции в UI

  1. Кнопка «Назад» в пользовательском интерфейсе
const backButton = document.querySelector('#backBtn');

backButton.addEventListener('click', () => {
    if (driver.hasPreviousStep()) {
        driver.previous();
    } else {
        backButton.disabled = true;
    }
});
  • Метод позволяет динамически блокировать кнопку, если пользователь находится на первом шаге.
  • Это улучшает UX, предотвращая попытки возврата туда, где шага нет.
  1. Условная логика внутри шагов
driver.on('next', () => {
    if (driver.hasPreviousStep()) {
        console.log('Пользователь может вернуться к предыдущему шагу при необходимости');
    }
});
  • Встраивается в события Driver.js (next, previous, start, reset) для расширенного контроля навигации.
  • Позволяет изменять поведение интерфейса или отображение подсказок в зависимости от положения пользователя в последовательности шагов.

Важные особенности

  • Метод не изменяет состояние шагов, а лишь проверяет возможность возврата.
  • Работает корректно только после вызова driver.start(), так как без инициализации шагов проверка не имеет смысла.
  • Всегда возвращает булево значение, что позволяет использовать его в условных операторах без дополнительной обработки.

Советы по использованию

  • Проверка с hasPreviousStep должна быть частью навигационной логики для кнопок «Назад» или пользовательских свайпов.
  • Комбинирование с событиями Driver.js (on('next'), on('previous')) позволяет создавать сложные динамические инструкции.
  • Метод особенно полезен для длинных последовательностей шагов, где возврат к предыдущему элементу важен для понимания интерфейса пользователем.

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

Оглавление