Глобальные опции тура

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

Создание тура с глобальными опциями

Основной синтаксис создания тура с глобальными настройками выглядит следующим образом:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shadow-md bg-purple-dark',
    scrollTo: true,
    cancelIcon: {
      enabled: true
    },
    canClickTarget: false,
    showCancelLink: true
  },
  useModalOverlay: true
});

Здесь ключевой параметр defaultStepOptions задаёт набор опций, который автоматически применяется ко всем шагам тура.

  • classes — CSS-классы для оформления окна шага.
  • scrollTo — автоматически скроллит страницу к цели шага.
  • cancelIcon — отображение иконки закрытия шага.
  • canClickTarget — позволяет или запрещает пользователю кликать по целевому элементу.
  • showCancelLink — добавляет ссылку для отмены тура.
  • useModalOverlay — при значении true создаёт затемнённый фон, блокируя взаимодействие с другими элементами страницы.

Переопределение глобальных опций для отдельных шагов

Каждый шаг тура может иметь собственные опции, которые переопределяют глобальные. Например:

tour.addStep({
  id: 'custom-step',
  text: 'Этот шаг имеет индивидуальные настройки.',
  classes: 'custom-step-class',
  scrollTo: false
});

В данном примере глобальная опция scrollTo: true не применяется, так как для этого шага задано scrollTo: false.

Основные глобальные параметры

  1. defaultStepOptions — объект с настройками по умолчанию для шагов.
  2. useModalOverlay — включает или отключает модальный фон для всего тура.
  3. keyboardNavigation — управляет возможностью навигации через клавиши. Например:
const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-arrows',
    scrollTo: true
  },
  useModalOverlay: true,
  keyboardNavigation: false
});
  1. exitOnEsc — позволяет пользователю завершить тур клавишей Esc. Если значение false, тур не закрывается через Esc.
  2. tourName — уникальный идентификатор тура, полезен для сохранения состояния прохождения.

Применение глобальных стилей

Для единообразного оформления шагов можно определить CSS-классы глобально:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-arrows custom-global-class'
  }
});

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

Глобальная логика событий

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

tour.on('show', function() {
  console.log('Шаг показан');
});

tour.on('complete', function() {
  console.log('Тур завершён');
});

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

Настройка навигации и кнопок

Глобальные опции позволяют заранее задать кнопки для всех шагов, чтобы избежать повторного описания:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    buttons: [
      {
        text: 'Назад',
        action: tour.back
      },
      {
        text: 'Далее',
        action: tour.next
      }
    ]
  }
});

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

Использование глобальных опций для упрощения кода

Правильное использование глобальных опций значительно сокращает объём кода, особенно в больших приложениях с десятками шагов. Например, вместо того чтобы задавать scrollTo, classes, cancelIcon для каждого шага, достаточно определить их один раз при создании тура.

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

Итоговые рекомендации

  • Определять основные визуальные и функциональные параметры на уровне тура через defaultStepOptions.
  • Использовать useModalOverlay для модального затемнения интерфейса.
  • Локально переопределять опции только при необходимости.
  • Реализовывать глобальные обработчики событий для единой логики взаимодействия.
  • Задавать глобальные кнопки для единообразной навигации между шагами.

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

Оглавление