События изменения шага

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

События onbeforechange и onchange

onbeforechange(targetElement) вызывается перед тем, как текущий шаг изменится на следующий. Параметр targetElement указывает на DOM-элемент нового шага. Основные особенности:

  • Позволяет проверять состояние приложения перед переходом на следующий шаг.
  • Можно отменить переход, вернув false из функции обработчика.
  • Используется для условной навигации и динамического изменения контента шагов.

Пример:

introJs().onbeforechange(function(targetElement) {
    if (targetElement.id === 'restricted-step') {
        alert('Этот шаг временно недоступен');
        return false; // отменяет переход
    }
});

onchange(targetElement) срабатывает после того, как шаг изменился. Параметр targetElement соответствует текущему шагу. Применяется для:

  • Инициализации анимаций на новом шаге.
  • Динамического подгружаемого контента.
  • Обновления интерфейса или состояния кнопок.

Пример:

introJs().onchange(function(targetElement) {
    console.log('Текущий шаг:', targetElement.id);
    if (targetElement.dataset.highlight === 'true') {
        targetElement.classList.add('highlighted');
    }
});

События навигации: onbeforeexit и onexit

onbeforeexit() вызывается перед завершением интерактивного тура, когда пользователь нажимает “Закрыть” или завершает все шаги. Позволяет:

  • Подтвердить действие пользователя.
  • Сохранить промежуточные данные или прогресс.
introJs().onbeforeexit(function() {
    return confirm('Вы уверены, что хотите завершить тур?');
});

onexit() выполняется после завершения тура. Используется для:

  • Очистки динамически добавленных стилей или классов.
  • Сброса состояний элементов интерфейса.
  • Логирования завершения тура.
introJs().onexit(function() {
    console.log('Тур завершен');
    document.querySelectorAll('.highlighted').forEach(el => el.classList.remove('highlighted'));
});

События навигационных кнопок: onbeforechange + кастомизация

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

introJs().onbeforechange(function(targetElement) {
    if (targetElement.dataset.skipStep === 'true') {
        this.next(); // автоматически пропускает шаг
    }
});

Особенности:

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

Доступ к текущему шагу и его элементу

Intro.js предоставляет методы и свойства для работы с текущим шагом:

  • this._currentStep – индекс текущего шага (нумерация с 0).
  • this._introItems[this._currentStep] – объект шага, включая element, intro, position.
  • Можно изменять текст или положение шага динамически в обработчиках событий.

Пример обновления текста шага:

introJs().onchange(function(targetElement) {
    const currentStep = this._currentStep;
    this._introItems[currentStep].intro = 'Обновленный текст для текущего шага';
});

Асинхронные операции при изменении шага

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

introJs().onbeforechange(async function(targetElement) {
    if (targetElement.dataset.loadData === 'true') {
        await fetchDataForStep(targetElement.id);
    }
});

Особенности использования:

  • onbeforechange можно использовать с async/await.
  • Переход на шаг может быть задержан до завершения асинхронной операции.
  • Позволяет интегрировать тур с внешними API или динамическими компонентами.

Взаимодействие с динамическими элементами

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

  1. Обновить список шагов:
introJs().addStep({
    element: '#dynamic-element',
    intro: 'Динамически добавленный шаг'
});
  1. Использовать события onbeforechange для проверки существования элемента:
introJs().onbeforechange(function(targetElement) {
    if (!document.body.contains(targetElement)) {
        this.next(); // пропускаем шаг
    }
});

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

Советы по управлению событиями изменения шага

  • Минимизировать тяжелые операции в onchange и onbeforechange, чтобы не замедлять интерфейс.
  • Использовать отмену перехода через return false в onbeforechange для контроля логики тура.
  • Объединять события с кастомными классами и анимациями для визуальной интерактивности.
  • Динамически обновлять шаги при изменении интерфейса без полной перезагрузки тура.

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

Оглавление