Группировка шагов

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

Определение шагов с привязкой к группам

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

const introSteps = [
  {
    element: '#menu',
    intro: 'Главное меню приложения',
    position: 'right',
    group: 'navigation'
  },
  {
    element: '#search',
    intro: 'Поле поиска',
    position: 'bottom',
    group: 'navigation'
  },
  {
    element: '#profile',
    intro: 'Профиль пользователя',
    position: 'left',
    group: 'user'
  },
  {
    element: '#settings',
    intro: 'Настройки приложения',
    position: 'bottom',
    group: 'user'
  }
];

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

Фильтрация и запуск группы шагов

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

function startIntroGroup(groupName) {
  const stepsForGroup = introSteps.filter(step => step.group === groupName);
  const intro = introJs();
  intro.setOptions({ steps: stepsForGroup });
  intro.start();
}

// Запуск только группы "navigation"
startIntroGroup('navigation');

Это позволяет разделять обучение на несколько этапов и запускать подсказки только для определённой части интерфейса.

Динамическое изменение групп

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

const intro = introJs();

// Добавление шагов для новой группы
intro.addStep({
  element: '#notifications',
  intro: 'Уведомления приложения',
  position: 'bottom',
  group: 'notifications'
});

// Удаление всех шагов, не относящихся к выбранной группе
intro.removeStep(step => step.group !== 'notifications');

intro.start();

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

Объединение групп в единый сценарий

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

const groupedSteps = ['navigation', 'user'].flatMap(groupName =>
  introSteps.filter(step => step.group === groupName)
);

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

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

Контроль переходов между группами

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

let currentGroupIndex = 0;
const groups = ['navigation', 'user'];

function startNextGroup() {
  if (currentGroupIndex >= groups.length) return;
  startIntroGroup(groups[currentGroupIndex]);
  currentGroupIndex++;
}

const intro = introJs();
intro.onexit(() => startNextGroup());
startNextGroup();

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

Выводы по использованию групп

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

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

Оглавление