Получение информации о текущем шаге

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

Методы для получения текущего шага

Основной способ узнать текущий шаг — использовать метод currentStep() у экземпляра тура. Экземпляр создаётся через introJs():

const tour = introJs();

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

// Получение текущего шага
let stepIndex = tour.currentStep();
console.log(stepIndex); // выводит индекс текущего шага, начиная с 0

Особенности метода currentStep():

  • Возвращает целое число, соответствующее индексу текущего шага.
  • Индексация шагов начинается с 0, то есть первый шаг имеет индекс 0, второй — 1 и так далее.
  • Если тур не запущен, метод вернёт 0 по умолчанию, так как первый шаг считается активным при старте.

Доступ к объекту текущего шага

Для более детальной информации о текущем шаге используется метод getStep() в сочетании с объектом introJs()._options.steps. Пример:

const tour = introJs();

tour.setOptions({
    steps: [
        { element: '#step1', intro: 'Первый шаг' },
        { element: '#step2', intro: 'Второй шаг' },
        { element: '#step3', intro: 'Третий шаг' }
    ]
});

tour.start();

let currentStepIndex = tour.currentStep();
let stepData = tour._options.steps[currentStepIndex];

console.log(stepData.element); // DOM-элемент текущего шага
console.log(stepData.intro);   // текст подсказки текущего шага

Важно: использование _options — это обращение к внутренним данным библиотеки. Хотя оно работает, в будущих версиях API может измениться. Для стабильного кода рекомендуется использовать события и колбэки.

Использование событий для получения информации о шаге

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

  • onchange(callback) — срабатывает при смене шага.
  • onbeforechange(callback) — вызывается перед сменой шага.
  • onafterchange(callback) — вызывается после отображения нового шага.

Пример получения информации через onchange:

const tour = introJs();

tour.setOptions({
    steps: [
        { element: '#step1', intro: 'Первый шаг' },
        { element: '#step2', intro: 'Второй шаг' },
        { element: '#step3', intro: 'Третий шаг' }
    ]
});

tour.onchange(function(targetElement) {
    const stepIndex = tour.currentStep();
    const stepData = tour._options.steps[stepIndex];
    
    console.log('Текущий шаг:', stepIndex);
    console.log('Элемент шага:', targetElement);
    console.log('Описание шага:', stepData.intro);
});

tour.start();

В этом примере:

  • targetElement — DOM-элемент, на который ссылается текущий шаг.
  • stepData позволяет получить текст подсказки, дополнительные опции и кастомные свойства, если они заданы в шаге.

Применение информации о текущем шаге

Информация о текущем шаге используется в нескольких сценариях:

  1. Динамическое изменение текста или элементов шага Например, добавление актуальной информации в подсказку перед отображением шага:
tour.onbeforechange(function(targetElement) {
    const stepIndex = tour.currentStep();
    tour._options.steps[stepIndex].intro = `Шаг ${stepIndex + 1}: обновлённый текст`;
});
  1. Управление логикой переходов Можно программно пропускать шаги, возвращаться к предыдущим или завершать тур на определённом шаге:
tour.onbeforechange(function() {
    if (tour.currentStep() === 1) {
        tour.next(); // автоматически переходит к следующему шагу
    }
});
  1. Отслеживание прогресса пользователя Индекс текущего шага можно сохранять в переменной или отправлять на сервер для аналитики:
tour.onchange(function() {
    const stepIndex = tour.currentStep();
    console.log('Пользователь на шаге:', stepIndex);
    // Отправка данных на сервер
});

Итоговые рекомендации

  • Метод currentStep() — основной способ узнать индекс текущего шага.
  • Для получения полного объекта шага используется доступ к tour._options.steps[currentStepIndex].
  • События onbeforechange, onchange и onafterchange позволяют динамически реагировать на изменение шага.
  • Доступ к объекту шага через _options полезен для кастомизации, но следует помнить о потенциальной нестабильности внутреннего API.

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

Оглавление