Обновление конфигурации на лету

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

Основные методы для изменения конфигурации

Intro.js использует объект конфигурации, который задаётся при инициализации с помощью метода introJs(). Классические свойства включают steps, tooltipClass, highlightClass, showStepNumbers и другие.

Для обновления конфигурации на лету применяются следующие подходы:

Метод setOptions() Позволяет заменить или расширить существующую конфигурацию. Аргументом является объект с новыми значениями.
```
const intro = introJs();
intro.setOptions({
    showStepNumbers: false,
    exitOnOverlayClick: true
});
intro.start();
```
Если метод вызывается уже после старта тура, изменения будут применены к оставшимся шагам.
Метод addStep() Добавляет новый шаг без перезапуска всего тура.
```
intro.addStep({
    element: document.querySelector('#new-element'),
    intro: 'Новый динамический шаг'
});
```
Такой подход полезен, когда шаг зависит от действия пользователя, например появления нового блока после клика.
Метод removeStep() Позволяет удалить конкретный шаг по индексу или по element.
```
intro.removeStep(2); // Удаление третьего шага
```
Удаление шага на лету позволяет корректировать маршрут, если определённые элементы отсутствуют или неактуальны.

Динамическая модификация текущего шага

Иногда необходимо менять содержимое текущего шага без пересоздания тура. Для этого можно использовать метод refresh() вместе с прямым обновлением DOM.

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

document.querySelector('#update-btn').addEventListener('click', () => {
    intro._introItems[0].intro = 'Обновленный текст первого шага';
    intro.refresh(); // Перерисовывает текущий шаг с новыми данными
});

Условное добавление шагов

При построении сложного интерфейса часто требуется показывать шаги только при определённых условиях. Используется проверка наличия элемента или состояния данных перед добавлением шага:

const intro = introJs();

if (document.querySelector('#optional-feature')) {
    intro.addStep({
        element: '#optional-feature',
        intro: 'Этот шаг появляется только при наличии функции'
    });
}

intro.start();

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

Intro.js предоставляет события (onbeforechange, onafterchange, onexit), которые позволяют реагировать на переходы между шагами и динамически менять параметры тура:

intro.onbeforechange(function(targetElement) {
    if (targetElement.id === 'step2') {
        intro.setOptions({
            tooltipClass: 'highlight-tooltip'
        });
    }
});

Такой подход позволяет изменять стиль подсказки, текст или поведение переходов прямо во время тура.

Пример комплексного динамического тура

const intro = introJs();

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

intro.start();

document.querySelector('#add-step-btn').addEventListener('click', () => {
    intro.addStep({
        element: '#dynamic',
        intro: 'Динамический шаг добавлен пользователем'
    });
});

intro.onafterchange((targetElement) => {
    if (targetElement.id === 'dynamic') {
        intro.setOptions({ exitOnOverlayClick: false });
    }
});

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