Многовариантные сценарии

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

Определение шагов и базовая конфигурация

Каждый шаг Intro.js задается объектом с ключевыми параметрами:

const steps = [
    {
        element: '#menu',
        intro: 'Это главное меню, здесь можно выбрать раздел.'
    },
    {
        element: '#profile',
        intro: 'Здесь отображается информация профиля.'
    }
];

Основные свойства объекта шага:

element — селектор DOM-элемента, к которому привязывается подсказка.
intro — текст подсказки.
position — положение подсказки относительно элемента (top, bottom, left, right).
tooltipClass — дополнительный CSS-класс для кастомизации внешнего вида.
disableInteraction — блокирует взаимодействие с элементом, если установлено в true.

Динамическое изменение последовательности шагов

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

const steps = [
    { element: '#start', intro: 'Начнем с главного экрана.' }
];

if (userHasProfile) {
    steps.push({ element: '#profile', intro: 'Просмотр информации профиля.' });
} else {
    steps.push({ element: '#signup', intro: 'Создайте профиль для продолжения.' });
}

const intro = introJs();
intro.setOptions({ steps });
intro.start();

В этом примере шаги для элемента #profile отображаются только при наличии профиля пользователя, а шаг #signup — если профиль отсутствует.

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

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

onbeforechange(targetElement) — вызывается перед переходом к следующему шагу, позволяет изменить текст или визуализацию шага.
onchange(targetElement) — срабатывает при переходе на шаг, можно динамически изменять подсказку.
oncomplete() — вызывается при завершении тура, подходит для запуска финальных действий.
onexit() — срабатывает при досрочном завершении тура.

Пример условной логики с использованием событий:

intro.onbeforechange(function(targetElement) {
    if (targetElement.id === 'advanced-settings') {
        const step = intro._introItems[intro._currentStep];
        if (!userHasAccess) {
            step.intro = 'Эти настройки недоступны для вашего аккаунта.';
            step.disableInteraction = true;
        }
    }
});

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

Ветки сценариев

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

intro.onafterchange(function(targetElement) {
    if (targetElement.id === 'feature-choice') {
        const choice = document.querySelector('input[name="feature"]:checked').value;
        if (choice === 'A') {
            intro.setOptions({ steps: [
                { element: '#featureA1', intro: 'Особенности A1' },
                { element: '#featureA2', intro: 'Особенности A2' }
            ]});
        } else {
            intro.setOptions({ steps: [
                { element: '#featureB1', intro: 'Особенности B1' },
                { element: '#featureB2', intro: 'Особенности B2' }
            ]});
        }
        intro.goToStep(1).start();
    }
});

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

Интеграция с формами и модальными окнами

Intro.js поддерживает динамические элементы интерфейса, включая формы и модальные окна. Важно вызывать intro.refresh() после появления новых элементов на странице, чтобы библиотека корректно позиционировала подсказки:

document.querySelector('#openModal').addEventListener('click', () => {
    openModal();
    setTimeout(() => {
        intro.refresh();
    }, 300); // задержка для рендеринга модального окна
});

Пользовательские кнопки и управление логикой

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

intro.setOptions({
    steps: [
        { element: '#step1', intro: 'Начало тура', buttons: ['Далее'] },
        { element: '#step2', intro: 'Продолжение', buttons: ['Назад', 'Пропустить'] }
    ]
});