hasNextStep

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

Метод возвращает логическое значение:

  • true — если следующий шаг существует
  • false — если текущий шаг является последним

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

В рамках пошагового тура Driver.js каждый шаг описывается объектом конфигурации. Управление переходами может происходить автоматически (через встроенные кнопки) или вручную — через пользовательскую логику.

hasNextStep особенно важен при:

  • создании кастомных кнопок управления
  • реализации нестандартного поведения на последнем шаге
  • условной логике интерфейса (например, смена текста кнопок)

Синтаксис

driver.hasNextStep()

Метод вызывается у экземпляра driver.

Пример базового использования

const driver = new Driver({
  steps: [
    { element: '#step1', popover: { title: 'Шаг 1' } },
    { element: '#step2', popover: { title: 'Шаг 2' } }
  ]
});

if (driver.hasNextStep()) {
  console.log('Следующий шаг доступен');
} else {
  console.log('Это последний шаг');
}

Использование в кастомной кнопке

Driver.js позволяет переопределять элементы управления. В этом случае hasNextStep помогает адаптировать поведение кнопки «Далее».

const driver = new Driver({
  steps: [...],
  popoverClass: 'custom-popover',
  nextBtnText: 'Далее',
  doneBtnText: 'Завершить',
  onNextClick: () => {
    if (driver.hasNextStep()) {
      driver.moveNext();
    } else {
      driver.reset();
    }
  }
});

Здесь:

  • при наличии следующего шага вызывается moveNext()
  • при его отсутствии — завершение тура через reset()

Динамическое изменение текста кнопки

На основе hasNextStep можно менять интерфейс прямо во время выполнения:

const updateButtonText = () => {
  const nextButton = document.querySelector('.driver-next-btn');

  if (driver.hasNextStep()) {
    nextButton.textContent = 'Далее';
  } else {
    nextButton.textContent = 'Готово';
  }
};

driver.on('highlighted', updateButtonText);

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

Работа с пользовательскими обработчиками

hasNextStep часто используется внутри событий:

driver.on('next', () => {
  if (!driver.hasNextStep()) {
    console.log('Достигнут последний шаг');
  }
});

Это позволяет:

  • выполнять дополнительные действия при завершении
  • отправлять аналитику
  • запускать другие процессы

Связь с другими методами

hasNextStep обычно применяется вместе с:

  • moveNext() — переход к следующему шагу
  • movePrevious() — возврат назад
  • isLastStep() — альтернативная проверка (если доступна в версии)
  • getActiveIndex() — получение текущего индекса

Пример комбинирования:

if (driver.hasNextStep()) {
  driver.moveNext();
} else {
  console.log('Конец тура');
}

Практические сценарии

1. Завершение тура с подтверждением

if (!driver.hasNextStep()) {
  if (confirm('Завершить обучение?')) {
    driver.reset();
  }
}

2. Логирование шагов

driver.on('next', () => {
  if (driver.hasNextStep()) {
    console.log('Переход к следующему шагу');
  } else {
    console.log('Финальный шаг');
  }
});

3. Условная загрузка данных

if (!driver.hasNextStep()) {
  fetch('/api/complete-tour', { method: 'POST' });
}

Внутренний механизм

Driver.js хранит массив шагов и текущий индекс. Метод hasNextStep фактически проверяет:

currentIndex < steps.length - 1

Это означает:

  • если текущий индекс меньше последнего — шаги ещё есть
  • если равен последнему — следующий шаг отсутствует

Особенности и ограничения

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

Частые ошибки

Ошибка: вызов до старта тура

driver.hasNextStep(); // может вернуть некорректный результат

Решение — вызывать после driver.start().

Ошибка: игнорирование асинхронных изменений

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

Расширенное применение

В сложных интерфейсах hasNextStep может использоваться как часть управляющего слоя:

function handleNext() {
  if (driver.hasNextStep()) {
    driver.moveNext();
  } else {
    completeOnboarding();
  }
}

Где completeOnboarding — функция завершения пользовательского сценария.

Роль в архитектуре тура

hasNextStep не управляет переходами напрямую, а выступает как индикатор состояния, позволяющий:

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

Поведение в граничных случаях

Ситуация Результат
Первый шаг true (если >1 шага)
Последний шаг false
Один шаг в туре false
Тур не запущен зависит от реализации

Интеграция с UI-фреймворками

В React:

const handleNext = () => {
  if (driver.hasNextStep()) {
    driver.moveNext();
  } else {
    setTourFinished(true);
  }
};

В Vue:

methods: {
  nextStep() {
    if (this.driver.hasNextStep()) {
      this.driver.moveNext();
    } else {
      this.finishTour();
    }
  }
}

Выводы по применению

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

Метод становится особенно важным при создании сложных обучающих интерфейсов, где стандартного поведения Driver.js недостаточно.

Оглавление