Отмена действий через события

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

Ключевые события можно разделить на следующие категории:

  • Инициализация и завершение: onbeforechange, onchange, oncomplete, onexit.
  • Навигация между шагами: onafterchange, onbeforeexit.
  • Контроль пользовательских действий: onbeforechange, onchange.

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

Событие onbeforechange

Событие onbeforechange срабатывает перед отображением нового шага. Его можно использовать для:

  • Валидации состояния страницы перед переходом на следующий шаг.
  • Динамического изменения текста или кнопок подсказки.
  • Блокировки перехода, если условия не выполнены.

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

introJs().onbeforechange(function(targetElement) {
    if(targetElement.id === "step3" && !userHasCompletedStep2()) {
        alert("Сначала завершите предыдущий шаг!");
        return false; // блокирует переход на следующий шаг
    }
});

В данном примере проверяется выполнение предыдущего шага и при нарушении условия переход блокируется.

Событие onchange

Срабатывает после того, как шаг стал активным. Используется для:

  • Добавления динамических эффектов на элемент.
  • Запуска анимаций.
  • Логирования посещенных шагов.

Пример:

introJs().onchange(function(targetElement) {
    console.log("Текущий шаг: " + targetElement.id);
    highlightElement(targetElement);
});

Это событие часто применяется для визуальных подсказок, таких как подсветка элемента или запуск подсказки, зависящей от состояния DOM.

Событие onafterchange

Подобно onchange, но чаще используется для инициализации сторонних библиотек после полной загрузки подсказки на элементе. Полезно при работе с динамическими компонентами, которые должны быть видимы перед манипуляциями.

Пример:

introJs().onafterchange(function(targetElement) {
    if(targetElement.classList.contains('chart-step')) {
        renderChart(targetElement);
    }
});

Событие oncomplete

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

  • Сохранять информацию о прохождении.
  • Запускать финальные анимации.
  • Перенаправлять пользователя.

Пример:

introJs().oncomplete(function() {
    saveTourProgress();
    showCompletionMessage();
});

Событие onexit

Вызывается при выходе из тура пользователем (например, по кнопке закрытия). Отличается от oncomplete тем, что не обязательно означает прохождение всех шагов. Используется для:

  • Очистки ресурсов.
  • Сброса временных изменений интерфейса.
  • Логирования попытки прерывания тура.

Пример:

introJs().onexit(function() {
    console.log("Пользователь покинул тур досрочно");
    resetHighlighting();
});

Событие onbeforeexit

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

Пример:

introJs().onbeforeexit(function() {
    if(!userConfirmedExit()) {
        alert("Вы уверены, что хотите выйти?");
        return false; // отменяет выход
    }
});

Практика динамического управления шагами

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

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

tour.onbeforechange(function(targetElement) {
    if(targetElement.id === "step2" && !userAgreed()) {
        this.addStep({ element: '#agreement', intro: 'Сначала примите соглашение' });
    }
});

tour.start();

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

Взаимодействие событий с навигацией

Важно учитывать, что события могут влиять на навигацию:

  • Возврат false в onbeforechange или onbeforeexit блокирует действие.
  • Можно комбинировать события для создания сложных сценариев (например, валидация → динамическое изменение → подсветка → переход).

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

  • Использовать onbeforechange для валидации и блокировки переходов.
  • Применять onchange и onafterchange для визуальных эффектов и инициализации компонентов.
  • onexit и oncomplete — для финальных действий и логирования.
  • Всегда проверять существование элемента в DOM перед манипуляциями, чтобы избежать ошибок при динамических интерфейсах.
  • Комбинировать события с setOptions и методами nextStep(), previousStep(), чтобы создавать гибкие интерактивные туры.

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

Оглавление