Создание длинных туров

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

const tour = introJs();
tour.setOptions({
    steps: [
        { 
            element: '#step1', 
            intro: 'Описание первого шага', 
            position: 'bottom' 
        },
        { 
            element: '#step2', 
            intro: 'Описание второго шага', 
            position: 'right' 
        },
        // Добавление множества шагов
    ],
    showStepNumbers: true,
    showBullets: true,
    exitOnOverlayClick: false,
    scrollToElement: true
});
tour.start();

Ключевые моменты при длинных турах:

  • Использование steps для точного задания порядка шагов.
  • Настройка позиции подсказки через position (top, bottom, left, right, auto).
  • Контроль прокрутки страницы с помощью scrollToElement: true, что важно при длинных страницах.
  • Возможность отключить закрытие тура при клике на оверлей через exitOnOverlayClick: false, чтобы предотвратить случайное завершение.

Управление навигацией

Intro.js предоставляет методы для управления навигацией по шагам: nextStep(), previousStep(), goToStep(number). Для длинных туров это позволяет создавать условия перехода между шагами, динамически пропускать или добавлять шаги в зависимости от состояния страницы.

tour.onbeforechange(function(targetElement) {
    if (targetElement.id === 'step5') {
        // Пропустить шаг, если элемент скрыт
        if (targetElement.style.display === 'none') {
            tour.nextStep();
        }
    }
});

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

  • onbeforechange позволяет изменять поведение перед отображением каждого шага.
  • onafterchange используется для действий после показа подсказки (например, открытие модального окна).
  • oncomplete и onexit — события для завершения тура.

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

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

function generateTourSteps() {
    const steps = [];
    document.querySelectorAll('.tour-element').forEach((el, index) => {
        steps.push({
            element: el,
            intro: `Шаг ${index + 1}: ${el.dataset.description}`,
            position: el.dataset.position || 'bottom'
        });
    });
    return steps;
}

tour.setOptions({ steps: generateTourSteps() });
tour.start();

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

  • Упрощает поддержку и изменение шагов.
  • Позволяет создавать туры на основе состояния страницы.
  • Облегчает масштабирование, когда количество шагов растёт до десятков.

Использование дополнительных настроек

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

  • Панель навигации: showButtons, showBullets — включение кнопок «Далее», «Назад» и индикатора шагов.
  • Адаптация к экрану: position: 'auto' автоматически выбирает оптимальное расположение подсказки.
  • Интерактивность элементов: disableInteraction: true блокирует элементы страницы, предотвращая случайные клики во время показа тура.
tour.setOptions({
    disableInteraction: true,
    tooltipClass: 'custom-tooltip',
    nextLabel: 'Далее',
    prevLabel: 'Назад',
    skipLabel: 'Пропустить'
});

Оптимизация длинных туров

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

  1. Группировка шагов: объединять схожие элементы в один шаг с общей подсказкой.
  2. Асинхронная подгрузка шагов: можно создавать шаги по мере необходимости, если часть элементов появляется динамически.
  3. Использование кастомного CSS: длинные туры могут перекрывать контент; стилизация tooltipClass и highlightClass помогает улучшить видимость и читаемость подсказок.
  4. Локализация: для многоязычных приложений текст подсказок можно хранить в объекте и подставлять динамически.
const steps = [
    { element: '#step1', intro: translations['step1'][lang] },
    { element: '#step2', intro: translations['step2'][lang] }
];
tour.setOptions({ steps });

Интеграция с SPA (Single Page Application)

В одностраничных приложениях длинные туры требуют особого подхода:

  • Использовать события роутинга для пересоздания шагов при смене страницы.
  • Проверять существование элементов перед их выделением.
  • Динамически обновлять шаги при изменении DOM через MutationObserver.
const observer = new MutationObserver(() => {
    tour.setOptions({ steps: generateTourSteps() });
});
observer.observe(document.body, { childList: true, subtree: true });

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

Оглавление