Специализированные версии

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

Intro.js React

Для интеграции с React существует обертка intro.js-react, которая позволяет управлять шагами через состояние компонентов и использовать возможности виртуального DOM. Основные особенности:

  • Контроль через пропсы: состояние показа тура управляется через проп enabled.
  • Динамическое добавление шагов: шаги могут формироваться на основе состояния приложения, что удобно для динамически изменяемых интерфейсов.
  • События жизненного цикла: доступны колбэки onExit, onBeforeStepChange, onAfterChange для отслеживания взаимодействия пользователя.

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

import { Steps } from 'intro.js-react';
import 'intro.js/introjs.css';

const tourSteps = [
  { element: '#step1', intro: 'Это первый шаг' },
  { element: '#step2', intro: 'Это второй шаг' },
];

function App() {
  const [enabled, setEnabled] = React.useState(true);

  return (
    <div>
      <Steps enabled={enabled} steps={tourSteps} onE xit={() => setEnabled(false)} />
      <div id="step1">Элемент 1</div>
      <div id="step2">Элемент 2</div>
    </div>
  );
}

Intro.js Angular

Для проектов на Angular существует модуль ngx-introjs, который обеспечивает глубокую интеграцию с компонентной моделью:

  • Декораторы и директивы: позволяют указывать шаги прямо в шаблоне через атрибуты [introStep] и [introOptions].
  • Сервисный подход: через IntroService можно запускать туры программно, что упрощает интеграцию с навигацией или динамическим контентом.
  • Поддержка RxJS: события тура возвращают Observable, позволяя комбинировать с реактивным потоком данных приложения.

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

<button [introStep]="1" [introOptions]="{ intro: 'Это кнопка запуска' }">Старт</button>
<div [introStep]="2" [introOptions]="{ intro: 'Контент второго шага' }">Контент</div>

Intro.js для мобильных интерфейсов

Мобильные версии интерактивных туров требуют адаптации под сенсорное управление. В специализированных сборках:

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

Особенности реализации:

intro.setOptions({
  showStepNumbers: false,
  tooltipClass: 'mobile-tooltip',
  exitOnOverlayClick: false,
  scrollToElement: true,
});

scrollToElement: true обеспечивает плавное смещение контента, чтобы элемент шага всегда оставался видимым.

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

Intro.js поддерживает несколько плагинов и расширений для специфических сценариев:

  1. Многоуровневые туры: позволяют объединять несколько последовательностей шагов, запускать их условно, и переключать между ними без полной перезагрузки страницы.
  2. Адаптивные подсказки: изменение позиции подсказки в зависимости от размера окна и видимости элементов.
  3. Интерактивные действия внутри шагов: возможность ожидания пользовательских событий, таких как клик или ввод текста, перед переходом к следующему шагу (introjs-nextHint, introjs-hint).

Пример многоуровневого тура:

const level1Steps = [
  { element: '#a', intro: 'Шаг 1 уровня 1' },
  { element: '#b', intro: 'Шаг 2 уровня 1' }
];
const level2Steps = [
  { element: '#c', intro: 'Шаг 1 уровня 2' },
  { element: '#d', intro: 'Шаг 2 уровня 2' }
];

introJs().setOptions({ steps: level1Steps }).start().oncomplete(() => {
  introJs().setOptions({ steps: level2Steps }).start();
});

Работа с динамическим контентом

В специализированных версиях для SPA или динамически загружаемых интерфейсов часто применяется подход динамической генерации шагов:

  • Перед запуском тура собирается массив шагов на основе текущего DOM или состояния приложения.
  • Используются селекторы, которые ищут элементы по CSS, а при отсутствии элемента шаг пропускается или откладывается.
  • Позволяет создавать универсальные туры, которые адаптируются к пользовательскому контенту.
const steps = Array.from(document.querySelectorAll('.tour-step')).map((el, i) => ({
  element: el,
  intro: el.dataset.intro || `Шаг ${i+1}`
}));

introJs().setOptions({ steps }).start();

Поддержка кастомного стиля и тем

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

  • CSS-переменные для цвета фона, стрелок, текста.
  • Классы для анимаций появления/исчезновения.
  • Настраиваемая ширина подсказок и позиционирование.

Пример настройки темы:

introJs().setOptions({
  tooltipClass: 'custom-tooltip',
  highlightClass: 'custom-highlight',
  showProgress: true
});

В CSS:

.custom-tooltip {
  background-color: #1e90ff;
  color: #fff;
  border-radius: 10px;
  padding: 15px;
}
.custom-highlight {
  box-shadow: 0 0 10px #1e90ff;
}

Интеграция с системами аналитики

Специализированные версии Intro.js позволяют отслеживать поведение пользователя:

  • События начала и завершения тура можно отправлять на сервер или в систему аналитики.
  • Использование onchange для фиксации, какие шаги были просмотрены, сколько времени потрачено.
  • Возможность отключения повторных туров для одного пользователя через локальное хранилище или cookies.
introJs().onchange((targetElement) => {
  console.log(`Просмотрен шаг: ${targetElement.id}`);
});

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

Оглавление