Классы для оверлея

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

Класс Shepherd.Tour и настройка оверлея

Создание оверлея начинается с инициализации тура через конструктор Shepherd.Tour:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-arrows',
    scrollTo: true,
    showCancelLink: true
  },
  useModalOverlay: true
});

Ключевые моменты:

  • useModalOverlay: true — включает оверлей по всей странице с затемнением области вокруг шага.
  • defaultStepOptions.classes — задаёт визуальные стили, включая стрелки, анимацию и т.д.
  • scrollTo: true — автоматически прокручивает страницу к целевому элементу.

Опции шагов, влияющие на оверлей

Каждый шаг тура создается через метод addStep и может иметь собственные настройки оверлея:

tour.addStep({
  id: 'example-step',
  text: 'Это пример шага с оверлеем',
  attachTo: {
    element: '#my-element',
    on: 'bottom'
  },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ],
  classes: 'custom-shepherd-step',
  highlightClass: 'highlighted-element'
});
  • attachTo.element — CSS-селектор или DOM-элемент, к которому будет прикреплён шаг.
  • attachTo.on — положение тултипа относительно элемента (top, bottom, left, right).
  • highlightClass — CSS-класс, применяемый к целевому элементу для подсветки через оверлей.
  • classes — позволяет кастомизировать вид шага.

Работа с highlightClass

highlightClass управляет визуальной подсветкой целевого элемента. Shepherd автоматически добавляет этот класс к элементу при отображении шага и убирает после его завершения. Для стилизации можно использовать CSS:

.highlighted-element {
  box-shadow: 0 0 0 5px rgba(255, 200, 0, 0.5);
  border-radius: 5px;
  position: relative;
  z-index: 10001;
}

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

Модальные оверлеи и useModalOverlay

В Shepherd.js существует два типа оверлеев:

  1. Простая подсветка шага — затемняет только область вокруг целевого элемента.
  2. Модальный оверлей (useModalOverlay) — затемняет всю страницу, создавая эффект модального окна и блокируя взаимодействие с остальными элементами.
const tour = new Shepherd.Tour({
  useModalOverlay: true
});

При использовании модального оверлея Shepherd создаёт div с классом shepherd-modal-overlay-container, который перекрывает весь интерфейс. Это особенно полезно для пошаговых инструкций, где важно предотвратить клики вне шага.

Настройка стилей оверлея

Shepherd позволяет полностью кастомизировать внешний вид оверлея через CSS. Например:

.shepherd-modal-overlay-container {
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 10000;
}

.shepherd-modal-overlay-element {
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
}
  • shepherd-modal-overlay-container управляет затемнением всей страницы.
  • shepherd-modal-overlay-element стилизует область вокруг выделяемого элемента.

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

Shepherd предоставляет события, которые позволяют управлять оверлеем динамически:

  • show — вызывается при отображении шага. Можно добавить дополнительное оформление или анимацию.
  • hide — срабатывает при скрытии шага, позволяет убрать кастомные стили.
  • complete и cancel — финализируют тур, очищая оверлей.

Пример использования:

tour.on('show', function() {
  console.log('Шаг показан, оверлей активен');
});

tour.on('hide', function() {
  console.log('Шаг скрыт, оверлей деактивирован');
});

Множественные оверлеи и сложные взаимодействия

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

tour.addStep({
  id: 'multi-element-step',
  text: 'Выделение нескольких элементов',
  buttons: [{ text: 'Далее', action: tour.next }],
  beforeShowPromise: function() {
    return new Promise((resolve) => {
      document.querySelector('#elem1').classList.add('highlighted-element');
      document.querySelector('#elem2').classList.add('highlighted-element');
      resolve();
    });
  },
  when: {
    hide: function() {
      document.querySelector('#elem1').classList.remove('highlighted-element');
      document.querySelector('#elem2').classList.remove('highlighted-element');
    }
  }
});

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

Эта структура классов и настроек оверлея в Shepherd.js позволяет гибко управлять визуальным фокусом пользователя, обеспечивая как простые, так и сложные сценарии интерактивных туров.

Оглавление