Безопасное хранение данных

Intro.js — это легкая библиотека для создания интерактивных пошаговых руководств (туров) по веб-приложениям. Она позволяет выделять элементы страницы, добавлять всплывающие подсказки и управлять последовательностью действий пользователя. Основной функционал библиотеки строится вокруг объекта introJs, который управляет всеми аспектами тура: от шагов до настроек анимации и отображения подсказок.

Инициализация тура выполняется через:

const intro = introJs();
intro.start();

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

Настройка шагов тура

Шаги можно задавать двумя способами: через HTML-атрибуты или через JavaScript-массив объектов.

Через HTML:

<button data-intro="Это кнопка запуска" data-step="1">Старт</button>
<div data-intro="Здесь отображается информация" data-step="2"></div>

Через Jav * aScript:

intro.setOptions({
  steps: [
    { element: '#startButton', intro: 'Это кнопка запуска' },
    { element: '#infoDiv', intro: 'Здесь отображается информация' },
    { intro: 'Финальный шаг без привязки к элементу' }
  ]
});
intro.start();
  • element — CSS-селектор или DOM-элемент, к которому привязан шаг.
  • intro — текст подсказки, отображаемый пользователю.
  • Шаг без element будет отображаться как центральное модальное окно.

Управление поведением тура

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

  • Автоматическое прохождение:
intro.setOptions({ showStepNumbers: true, exitOnOverlayClick: false });
  • События тура:
intro.onbeforechange(function(targetElement) {
  console.log('Перед сменой шага:', targetElement);
});

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

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

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

Стиль и кастомизация подсказок

Intro.js предоставляет возможность стилизовать подсказки через CSS. Основные классы:

  • .introjs-tooltip — контейнер подсказки.
  • .introjs-helperLayer — слой выделения элемента.
  • .introjs-overlay — затемнение остальной части страницы.

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

.introjs-tooltip {
  background-color: #2c3e50;
  color: #ecf0f1;
  font-size: 16px;
  border-radius: 8px;
}

Можно изменять положение подсказок через опцию position в шаге:

{ element: '#infoDiv', intro: 'Подсказка сверху', position: 'top' }

Доступные позиции: top, left, right, bottom, floating.

Работа с асинхронным контентом

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

intro.onafterchange(function(targetElement) {
  if (!document.querySelector('#dynamicContent')) {
    loadDynamicContent().then(() => {
      intro.refresh(); // Обновляет расположение подсказок
    });
  }
});

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

Многошаговые и условные туры

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

intro.onbeforechange(function(targetElement) {
  if (targetElement.id === 'optionalStep' && !user.isAdmin) {
    intro.nextStep(); // Пропустить шаг
  }
});

Это позволяет создавать персонализированные туры для разных категорий пользователей.

Сохранение прогресса пользователя

Для сохранения текущего шага можно использовать localStorage:

intro.onchange(function(targetElement) {
  const step = intro._currentStep;
  localStorage.setItem('tourStep', step);
});

const savedStep = localStorage.getItem('tourStep');
if (savedStep) {
  intro.goToStep(parseInt(savedStep, 10)).start();
} else {
  intro.start();
}

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

Интеграция с фреймворками

Intro.js легко интегрируется с современными фреймворками: React, Vue, Angular.

React пример:

import introJs from 'intro.js';
import 'intro.js/introjs.css';
import { useEffect } from 'react';

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

  return null;
}

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

Расширенные возможности

  • Многоуровневые туры: создание туров, которые могут запускать другие туры по завершении.
  • Модальные шаги: шаги без привязки к элементам, используемые для демонстрации общей информации.
  • Интерактивные подсказки: включение кнопок Next, Back, Skip с кастомными действиями.
intro.setOptions({
  showButtons: true,
  nextLabel: 'Дальше',
  prevLabel: 'Назад',
  skipLabel: 'Пропустить'
});
  • Локализация: замена текста кнопок и подсказок в зависимости от языка пользователя.

Поддержка мобильных устройств

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

intro.setOptions({
  overlayOpacity: 0.5,
  exitOnOverlayClick: true,
  disableInteraction: false
});

Это позволяет сохранять интерактивность элементов на сенсорных устройствах.

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

Оглавление