Адаптация под роли пользователей

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

Определение ролей

Роли пользователей обычно определяются на сервере и передаются на клиентскую часть через API или через встроенные переменные JavaScript. Например:

const userRole = window.currentUser.role; // 'admin', 'editor', 'viewer'

На основе этого значения можно динамически формировать последовательность шагов для Intro.js.

Формирование шагов с фильтрацией по ролям

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

let steps = [];

if (userRole === 'admin') {
  steps.push(
    {
      element: '#dashboard',
      intro: 'Панель администратора позволяет управлять пользователями и настройками системы.'
    },
    {
      element: '#settings',
      intro: 'Здесь можно изменять глобальные настройки приложения.'
    }
  );
} else if (userRole === 'editor') {
  steps.push(
    {
      element: '#editor-panel',
      intro: 'Панель редактора для работы с контентом.'
    }
  );
} else {
  steps.push(
    {
      element: '#overview',
      intro: 'Общая панель для просмотра доступного контента.'
    }
  );
}

Инициализация Intro.js с динамическими шагами

После формирования массива шагов достаточно передать его в Intro.js:

const intro = introJs();
intro.setOptions({ steps: steps });
intro.start();

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

Скрытие элементов интерфейса для определённых ролей

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

steps = steps.filter(step => {
  if (step.element === '#admin-only' && userRole !== 'admin') {
    return false;
  }
  return true;
});

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

Динамическая подстановка текста и стилей

Для более сложной адаптации можно изменять текст подсказок и CSS-стили в зависимости от роли:

steps.forEach(step => {
  if (userRole === 'viewer') {
    step.intro = step.intro.replace('управлять', 'просматривать');
    step.position = 'bottom';
  }
});

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

Использование событий Intro.js для кастомной логики

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

intro.onbeforechange(function(targetElement) {
  if (userRole !== 'admin' && targetElement.id === 'settings') {
    intro.nextStep(); // пропуск шага для пользователя без прав
  }
});

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