Расширения функциональности

Intro.js предоставляет гибкую систему расширений, позволяющую добавлять кастомные функции к стандартным шагам руководства. Для подключения расширений необходимо использовать метод IntroJs().use(), куда передаётся объект с определёнными опциями расширения. Пример подключения пользовательского расширения:

const myExtension = {
    onBeforeChange: function(targetElement) {
        console.log('Перед сменой шага:', targetElement);
    },
    onAfterChange: function(targetElement) {
        console.log('После смены шага:', targetElement);
    }
};

introJs().use(myExtension).start();

Ключевые методы расширений:

  • onBeforeChange(element) – вызывается перед переходом к следующему шагу.
  • onAfterChange(element) – срабатывает после отображения нового шага.
  • onComplete() – вызывается при завершении всей последовательности шагов.
  • onExit() – вызывается при досрочном закрытии интерактивного руководства.

Создание пользовательских шагов

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

Пример создания пользовательского шага с кнопкой:

introJs().setOptions({
    steps: [
        {
            element: '#step1',
            intro: 'Это первый шаг',
            position: 'right',
            tooltipClass: 'custom-tooltip',
            buttons: [
                {
                    text: 'Следующий',
                    action: function() {
                        console.log('Пользователь нажал кнопку');
                        this.nextStep();
                    }
                }
            ]
        }
    ]
}).start();

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

  • tooltipClass позволяет добавлять уникальные стили.
  • Массив buttons может содержать любое количество действий с доступом к методам Intro.js (nextStep, previousStep, exit).
  • Возможна привязка пользовательских событий к конкретным элементам через querySelector и методы расширений.

Динамическое управление шагами

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

Пример динамического изменения шагов:

const intro = introJs();

intro.setOptions({
    steps: [
        { element: '#initialStep', intro: 'Начальный шаг' }
    ]
});

intro.onbeforechange(function(targetElement) {
    if (targetElement.id === 'initialStep') {
        intro.addSteps([
            { element: '#dynamicStep', intro: 'Динамический шаг', position: 'bottom' }
        ]);
    }
});

intro.start();

Преимущества:

  • Позволяет подстраивать руководство под состояние страницы.
  • Можно добавлять, удалять или изменять шаги без перезапуска Intro.js.

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

Intro.js легко интегрируется с другими библиотеками JavaScript. Например, можно использовать анимацию через GSAP или визуальные эффекты с Anime.js.

Пример анимации элемента при появлении шага:

introJs().onafterchange(function(targetElement) {
    gsap.from(targetElement, { opacity: 0, y: -20, duration: 0.5 });
}).start();

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

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

Кастомизация подсказок и оверлеев

Расширения позволяют создавать собственные шаблоны подсказок (tooltip) и оверлеев (overlay). Это делается через переопределение CSS-классов и добавление элементов DOM.

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

introJs().setOptions({
    tooltipClass: 'my-tooltip',
    highlightClass: 'my-highlight'
}).start();

Применение:

  • tooltipClass задаёт уникальный вид подсказки (цвет, тень, размеры).
  • highlightClass управляет визуальным выделением целевого элемента.
  • Можно добавлять анимацию появления подсветки и изменять цвет в зависимости от состояния приложения.

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

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

  • onbeforechange(element) – перед сменой шага.
  • onafterchange(element) – после смены шага.
  • onchange(element) – при каждом изменении шага.
  • oncomplete() – завершение всех шагов.
  • onexit() – прерывание руководства.
  • onhintclick(element) – взаимодействие с подсказками (hint).

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

introJs()
    .onbeforechange(function(elem) { console.log('Перед шагом:', elem.id); })
    .onafterchange(function(elem) { console.log('После шага:', elem.id); })
    .onexit(function() { console.log('Инструкция завершена'); })
    .start();

Разработка модульных расширений

Для создания повторно используемых расширений можно оформлять их как модули:

export function introLogger() {
    return {
        onbeforechange: function(element) { console.log('Шаг меняется:', element.id); },
        onafterchange: function(element) { console.log('Шаг показан:', element.id); }
    };
}

// Использование
import { introLogger } from './extensions.js';
introJs().use(introLogger()).start();

Преимущества модульного подхода:

  • Возможность подключать одинаковые расширения в разных проектах.
  • Легкая интеграция с фреймворками вроде React или Vue.
  • Управление логикой событий и пользовательских шагов без дублирования кода.

Итоговые возможности расширений

  • Управление логикой шагов: добавление, удаление, изменение.
  • Расширение интерфейса подсказок: кнопки, стили, анимации.
  • Интеграция с внешними библиотеками для анимаций и визуализации.
  • Событийная модель для точного контроля последовательности.
  • Модульная архитектура расширений для повторного использования и масштабирования.

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

Оглавление