Условная логика в турах

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

Условные шаги с `step` и `intro` объектами

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

const steps = [
  {
    element: '#username',
    intro: 'Введите ваше имя.',
  },
  {
    element: '#premium-section',
    intro: 'Эта функция доступна только для премиум-пользователей.',
    // Условие будет проверяться перед показом шага
    onbeforechange: function(targetElement) {
      return user.isPremium;
    }
  },
  {
    element: '#finish',
    intro: 'Завершение тура.'
  }
];

Здесь onbeforechange позволяет отменить переход к шагу, если условие не выполнено. Возврат false предотвращает отображение шага.

Использование `onbeforechange` и `onchange`

onbeforechange вызывается до перехода на шаг и позволяет отменить или изменить шаг динамически:

introJs().onbeforechange(function(targetElement) {
    if (targetElement.id === 'premium-section' && !user.isPremium) {
        return false; // Пропустить шаг
    }
});

onchange срабатывает после перехода на шаг. Его можно использовать для динамического изменения текста, стиля или состояния:

introJs().onchange(function(targetElement) {
    if (targetElement.id === 'username') {
        targetElement.style.backgroundColor = '#e0f7fa';
    }
});

Пропуск шагов с условием

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

const steps = [
  { element: '#step1', intro: 'Первый шаг' },
  { element: '#step2', intro: 'Второй шаг для продвинутых', condition: () => user.isAdvanced },
  { element: '#step3', intro: 'Последний шаг' }
];

const filteredSteps = steps.filter(step => !step.condition || step.condition());

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

Здесь ключ condition определяет, будет ли шаг включен в тур. Фильтрация позволяет исключить ненужные шаги до старта.

Динамическая генерация шагов

Шаги тура можно создавать на лету, в зависимости от состояния DOM или данных пользователя:

const steps = [];

if (document.querySelector('#feature1')) {
    steps.push({ element: '#feature1', intro: 'Функция 1' });
}

if (user.isPremium) {
    steps.push({ element: '#premium-feature', intro: 'Премиум функция' });
}

steps.push({ element: '#end', intro: 'Конец тура' });

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

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

Использование `nextStep` для условного перехода

Внутри обработчиков можно динамически менять следующий шаг с помощью метода nextStep():

introJs().onbeforechange(function(targetElement) {
    if (targetElement.id === 'step2' && !user.isPremium) {
        this.nextStep(2); // Пропустить шаг 2
    }
});

Метод nextStep позволяет управлять логикой движения тура без изменения самого массива шагов.

Совмещение условий с `hideNext` и `hidePrev`

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

introJs().setOptions({
    steps: [
        {
            element: '#step1',
            intro: 'Шаг 1',
            hideNext: !user.canProceed
        },
        {
            element: '#step2',
            intro: 'Шаг 2'
        }
    ]
}).start();

Скрытие кнопок позволяет контролировать доступ к шагам без полной фильтрации массива.

Управление туром через глобальные переменные состояния

Для сложной условной логики удобно использовать объект состояния:

const tourState = {
    isAdmin: user.role === 'admin',
    completedIntro: localStorage.getItem('introCompleted') === 'true'
};

const steps = [
    { element: '#step1', intro: 'Обычный шаг' },
    { element: '#adminStep', intro: 'Только для админов', condition: () => tourState.isAdmin }
];

const activeSteps = steps.filter(step => !step.condition || step.condition());
introJs().setOptions({ steps: activeSteps }).start();

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

Условная логика в турах

Условные шаги с step и intro объектами

Использование onbeforechange и onchange