Динамическое добавление и удаление шагов

В Intro.js шаги могут быть заданы статически через HTML-атрибуты data-intro и data-step или программно через массив объектов в конфигурации. Для динамического управления последовательностью шагов используется метод setOptions(), который позволяет изменять или добавлять шаги во время выполнения.

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

const intro = introJs();

// Изначально задаём один шаг
intro.setOptions({
    steps: [
        { 
            element: '#step1', 
            intro: 'Первый шаг, статически заданный' 
        }
    ]
});

// Запускаем вводный тур
intro.start();

// Добавление нового шага после старта
intro.onafterchange(function(targetElement) {
    if(targetElement.id === 'step1') {
        const steps = intro._options.steps;
        steps.push({
            element: '#step2',
            intro: 'Второй шаг, добавленный динамически'
        });
        intro.setOptions({ steps });
    }
});

Ключевые моменты при динамическом добавлении шагов:

  • setOptions() обновляет текущую конфигурацию тура.
  • Новые шаги могут добавляться как в конец массива, так и вставляться в нужную позицию через метод splice.
  • После изменения шагов рекомендуется использовать intro.refresh() для пересчёта положения подсказок, если элементы на странице могли измениться.

Удаление шагов во время тура

Удаление шагов осуществляется путём манипуляции массивом steps и последующим обновлением конфигурации через setOptions(). Пример:

intro.onbeforechange(function(targetElement) {
    // Удаляем второй шаг, если он существует
    let steps = intro._options.steps;
    steps = steps.filter(step => step.element !== '#step2');
    intro.setOptions({ steps });
});

Особенности удаления:

  • Изменение массива steps не останавливает текущий шаг, но влияет на следующие шаги.
  • Рекомендуется удалять шаги только после проверки условий, чтобы не нарушить логику тура.
  • При удалении шагов индекс текущего шага (currentStep) остаётся прежним, поэтому при необходимости корректируется вручную:
intro._currentStep = Math.min(intro._currentStep, intro._options.steps.length - 1);

Управление шагами на основе событий

Intro.js предоставляет события, позволяющие управлять шагами в реальном времени:

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

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

Пример условного добавления шагов:

intro.onafterchange(function(targetElement) {
    if(targetElement.id === 'step1' && someCondition()) {
        const steps = intro._options.steps;
        steps.splice(1, 0, {
            element: '#conditionalStep',
            intro: 'Шаг, добавленный по условию'
        });
        intro.setOptions({ steps });
    }
});

Работа с индексами и последовательностью

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

  • intro._currentStep — индекс текущего шага.
  • Методы nextStep() и previousStep() продолжают работать корректно, если массив шагов обновлён через setOptions().
  • Для вставки шага между текущим и следующим используется splice(currentStep + 1, 0, newStep).

Практические рекомендации

  1. Всегда обновлять конфигурацию через setOptions(), не модифицировать внутренние массивы напрямую без последующего обновления.
  2. Использовать события (onbeforechange, onafterchange) для контроля логики добавления/удаления шагов.
  3. Контролировать текущий индекс шага при удалении шагов, чтобы не выйти за границы массива.
  4. Использовать intro.refresh() после значительных изменений DOM или динамически добавленных элементов, чтобы корректно вычислить позиции подсказок.

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

Оглавление