Управление жизненным циклом

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

Создание и инициализация тура

Для начала необходимо создать объект тура с помощью функции introJs(). Этот объект предоставляет методы для настройки и управления туром.

const tour = introJs();
tour.setOptions({
    steps: [
        { element: '#step1', intro: 'Это первый шаг тура' },
        { element: '#step2', intro: 'Это второй шаг' },
        { element: '#step3', intro: 'Последний шаг' }
    ],
    showStepNumbers: true,
    exitOnOverlayClick: false,
    nextLabel: 'Далее',
    prevLabel: 'Назад',
    skipLabel: 'Пропустить',
    doneLabel: 'Готово'
});

Ключевые моменты инициализации:

  • setOptions() позволяет задавать шаги тура и общие параметры поведения.
  • Каждый шаг должен содержать либо element, либо position, а также текст intro.
  • Параметры exitOnOverlayClick, keyboardNavigation, scrollToElement управляют интерактивностью.

Запуск и управление шагами

После настройки объекта можно запускать тур методом start():

tour.start();

В процессе выполнения доступны методы управления:

  • nextStep() — переход к следующему шагу.
  • previousStep() — возврат к предыдущему шагу.
  • goToStep(stepNumber) — переход к конкретному шагу по индексу.
  • exit() — завершение тура в любой момент.
  • refresh() — обновление позиции и размеров подсказок (необходимо при динамическом изменении DOM).

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

tour.onbeforechange(function(targetElement) {
    if(targetElement.id === 'step2') {
        console.log('Подготовка к шагу 2');
    }
});

tour.oncomplete(function() {
    console.log('Тур завершен');
});

Обработка событий

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

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

Пример комплексного управления:

tour.onbeforechange(function(targetElement) {
    console.log('Перед показом шага:', targetElement.id);
});

tour.onchange(function(targetElement) {
    console.log('Показан шаг:', targetElement.id);
});

tour.onafterchange(function(targetElement) {
    console.log('Анимация шага завершена:', targetElement.id);
});

tour.oncomplete(function() {
    console.log('Тур успешно завершен');
});

tour.onexit(function() {
    console.log('Тур был прерван пользователем');
});

Приостановка и возобновление тура

Intro.js поддерживает временную приостановку тура. Для этого можно использовать методы exit() и последующий start(), сохранив текущий шаг:

let currentStep = 1;

tour.onchange(function(targetElement) {
    currentStep = tour._currentStep;
});

// приостановка
tour.exit();

// возобновление
tour.goToStep(currentStep).start();

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

Автоматизация и повторный запуск

Туры могут быть настроены для автоматического запуска при определённых событиях:

document.addEventListener('DOMContentLoaded', () => {
    if(!localStorage.getItem('tourCompleted')) {
        tour.start();
    }
});

tour.oncomplete(function() {
    localStorage.setItem('tourCompleted', true);
});

Этот метод позволяет реализовать систему «один раз на пользователя», сохраняя состояние завершённого тура между сессиями.

Динамическое изменение шагов

Intro.js поддерживает добавление и удаление шагов на лету. Используется метод setOptions() с новым массивом шагов:

tour.setOptions({
    steps: [
        { element: '#newStep', intro: 'Новый шаг добавлен динамически' }
    ]
}).refresh();

Метод refresh() гарантирует, что подсказки будут корректно позиционироваться относительно новых элементов DOM.

Итоговые рекомендации по жизненному циклу

  • Всегда использовать события (onbeforechange, onchange, onafterchange) для синхронизации интерфейса с текущим шагом.
  • Для динамических интерфейсов применять refresh() после изменений DOM.
  • Сохранять состояние текущего шага для возможности приостановки и возобновления тура.
  • Управлять завершением через oncomplete и onexit для корректного логирования или сохранения состояния пользователя.

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

Оглавление