Программное управление навигацией

Shepherd.js — это современная библиотека для создания пошаговых интерактивных туров по веб-приложению. Она позволяет не только визуально проводить пользователя по интерфейсу, но и полностью программно управлять навигацией между шагами, контролировать порядок, запускать действия при переходах и динамически изменять содержимое подсказок.

Инициализация тура

Создание тура начинается с объекта Shepherd.Tour, где можно задавать глобальные параметры:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    cancelIcon: { enabled: true },
    classes: 'shepherd-theme-arrows',
    scrollTo: { beh * avior: 'smooth', block: 'center' }
  },
  useModalOverlay: true
});
  • defaultStepOptions задаёт общие настройки всех шагов: оформление, прокрутку к элементу, кнопки отмены.
  • useModalOverlay позволяет затемнять остальную часть страницы для концентрации внимания на текущем шаге.

Создание шагов и привязка к элементам

Шаги тура создаются методом addStep. Каждый шаг может быть привязан к DOM-элементу через attachTo, или быть плавающей подсказкой.

tour.addStep({
  id: 'step-1',
  text: 'Это главное меню приложения.',
  attachTo: {
    element: '.main-menu',
    on: 'bottom'
  },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});
  • id — уникальный идентификатор шага для программного управления.
  • text — содержимое подсказки.
  • attachTo — объект с полями element (селектор) и on (позиция подсказки).
  • buttons — массив кнопок с действиями, можно использовать встроенные методы tour.next(), tour.back() и tour.cancel().

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

Shepherd.js предоставляет гибкий API для управления порядком шагов:

  • tour.start() — запуск тура с первого шага или указанного через start(true).
  • tour.next() и tour.back() — переход к следующему или предыдущему шагу.
  • tour.show('step-id') — открытие конкретного шага по идентификатору.
  • tour.cancel() — немедленное завершение тура.
  • tour.complete() — завершение тура с выполнением всех колбэков завершения.

Пример программного перехода:

document.querySelector('#customButton').addEventListener('click', () => {
  tour.show('step-3');
});

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

Динамическое управление контентом шагов

Содержимое шагов и их привязка к элементам можно менять во время выполнения:

const step = tour.addStep({
  id: 'dynamic-step',
  text: 'Изначальный текст'
});

step.updateStepOptions({
  text: 'Обновлённый текст с инструкцией',
  attachTo: { element: '.new-element', on: 'top' }
});

Метод updateStepOptions позволяет:

  • Изменять текст, кнопки и оформление.
  • Привязывать подсказку к новому элементу на странице.
  • Обновлять условия отображения или классы CSS.

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

Shepherd.js предоставляет широкие возможности для привязки функций к событиям:

tour.on('start', () => console.log('Тур начат'));
tour.on('complete', () => console.log('Тур завершён'));
tour.on('show', (event) => console.log('Показан шаг:', event.step.id));
tour.on('cancel', () => console.log('Тур отменён'));

События ключевые для:

  • Логирования действий пользователя.
  • Динамической модификации интерфейса перед показом шага.
  • Включения дополнительных анимаций или подсказок.

Управление условными переходами

Программное управление шагами позволяет реализовать условные маршруты. Например, выбор разных последовательностей шагов в зависимости от действий пользователя:

tour.addStep({
  id: 'step-choice',
  text: 'Выберите вариант',
  buttons: [
    {
      text: 'Вариант A',
      action: () => tour.show('step-a')
    },
    {
      text: 'Вариант B',
      action: () => tour.show('step-b')
    }
  ]
});

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

Асинхронная навигация

Shepherd.js позволяет интегрировать асинхронные операции перед переходом к следующему шагу. Например, ожидание загрузки данных:

tour.addStep({
  id: 'async-step',
  text: 'Ждём загрузки данных...',
  buttons: [
    {
      text: 'Далее',
      action: async () => {
        await fetchData();
        tour.next();
      }
    }
  ]
});

Это гарантирует, что пользователь не перейдёт к шагу, пока все необходимые ресурсы не будут готовы.

Заключение по функциональности управления

Shepherd.js в JavaScript обеспечивает полное программное управление туром:

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

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

Оглавление