Событие перед началом тура

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

Основное событие beforeChange

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

var intro = introJs();

intro.onbeforestart(function() {
    console.log("Тур собирается начаться");
    // Выполнение дополнительных действий
});

Ключевые особенности onbeforestart:

  • Срабатывает один раз перед запуском тура.
  • Позволяет отменить старт тура, если возвращаемое значение функции false.
  • Дает доступ к объекту intro, позволяя модифицировать шаги перед их рендерингом.

Изменение шагов перед стартом

Часто необходимо изменять шаги динамически, основываясь на состоянии страницы или действиях пользователя. Использование события перед стартом позволяет это сделать:

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

intro.onbeforestart(function() {
    // Динамическая модификация шагов
    if (document.querySelector('#step3')) {
        intro.addStep({
            element: '#step3',
            intro: 'Дополнительный шаг'
        });
    }
});
intro.start();

В этом примере третий шаг добавляется только если соответствующий элемент присутствует на странице. Это особенно удобно для SPA-приложений, где структура DOM может изменяться динамически.

Отмена запуска тура

Функция onbeforestart может возвращать false, чтобы предотвратить старт интерактивного тура:

intro.onbeforestart(function() {
    if (!userHasPermission()) {
        console.log("Пользователь не имеет доступа к туру");
        return false;
    }
});

В этом случае метод intro.start() вызовет событие, но тур не начнется, если условие не выполнено. Это позволяет строить сложную логику доступа к обучающим инструкциям.

Работа с асинхронными действиями

Для случаев, когда необходимо выполнить асинхронную подготовку перед началом тура (например, загрузку данных или элементов DOM), можно использовать промисы или колбэки внутри onbeforestart:

intro.onbeforestart(async function() {
    await fetchDataForTour();
    intro.setOptions({
        steps: generateStepsFromData()
    });
});
intro.start();

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

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

Использование события перед стартом особенно полезно при:

  • Подготовке модальных окон или скрытых элементов.
  • Адаптации шагов под разрешение экрана или устройство.
  • Проверке состояния пользователя (например, авторизован/не авторизован).
  • Логировании запуска тура для аналитики.

Важные нюансы

  1. Событие срабатывает до визуального появления любого шага, поэтому любые изменения DOM в этом моменте корректно отобразятся в первом шаге.
  2. Несколько подписчиков на onbeforestart вызываются последовательно, но важно учитывать, что возвращение false одним из обработчиков прервет старт для всех.
  3. Изменение шагов внутри onbeforestart влияет только на текущий старт тура; повторный вызов intro.start() потребует повторной настройки, если шаги были динамически добавлены.

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

Оглавление