Определение типа устройства

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

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

Конфигурация туров и шагов

Тур создается через конструктор:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    cancelIcon: {
      enabled: true
    },
    classes: 'shepherd-theme-arrows',
    scrollTo: { beh * avior: 'smooth', block: 'center' }
  }
});

Пояснения ключевых опций:

  • defaultStepOptions — задает параметры по умолчанию для всех шагов.
  • cancelIcon — иконка для закрытия подсказки пользователем.
  • classes — CSS-класс для стилизации подсказок.
  • scrollTo — обеспечивает автоматическую прокрутку страницы к целевому элементу.

Добавление шага происходит через метод addStep:

tour.addStep({
  id: 'example-step',
  text: 'Это подсказка для важного элемента интерфейса.',
  attachTo: {
    element: '#my-element',
    on: 'bottom'
  },
  buttons: [
    {
      text: 'Назад',
      action: tour.back
    },
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

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

  • id — уникальный идентификатор шага.
  • text — содержимое подсказки.
  • attachTo — объект, указывающий элемент DOM и позицию подсказки (top, bottom, left, right).
  • buttons — массив кнопок управления шагом, каждая кнопка может выполнять функцию (tour.next, tour.back, tour.cancel) или кастомный callback.

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

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

Для этого можно использовать проверку типа устройства через Jav * aScript:

function isMobile() {
  return /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
}

Применение в Shepherd.js:

tour.addStep({
  id: 'responsive-step',
  text: 'Этот шаг адаптирован под тип устройства.',
  attachTo: isMobile() 
    ? { element: 'body', on: 'top' } 
    : { element: '#desktop-element', on: 'right' },
  buttons: [
    { text: 'Закрыть', action: tour.cancel }
  ]
});

Особенности:

  • На мобильных устройствах шаг может быть прикреплен к body, занимая верхнюю часть экрана.
  • На десктопе шаг позиционируется рядом с элементом интерфейса.
  • Использование регулярных выражений для navigator.userAgent позволяет корректно различать iOS и Android устройства.

Настройка динамического позиционирования

Shepherd.js позволяет динамически изменять положение подсказки в зависимости от доступного пространства:

tour.addStep({
  id: 'dynamic-step',
  text: 'Подсказка, которая автоматически выбирает сторону.',
  attachTo: {
    element: '#dynamic-element',
    on: 'auto'
  }
});
  • Значение auto позволяет библиотеке Popper.js выбрать оптимальное расположение.
  • Можно дополнительно указать fallback позиции через массив:
on: ['right', 'bottom', 'top']
  • Shepherd.js обеспечит плавное переключение позиции при изменении размера окна или ориентации устройства.

Управление поведением шагов

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

tour.on('start', () => console.log('Тур начался'));
tour.on('complete', () => console.log('Тур завершен'));

tour.addStep({
  id: 'event-step',
  text: 'Шаг с событиями',
  buttons: [{
    text: 'Следующий',
    action() {
      console.log('Переход к следующему шагу');
      tour.next();
    }
  }]
});
  • События: show, hide, active, complete, cancel.
  • Позволяют строить логику условного отображения шагов в зависимости от действий пользователя или типа устройства.

Интеграция с адаптивным дизайном

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

if (window.innerWidth < 768) {
  tour.addStep({
    id: 'mobile-first-step',
    text: 'Мобильная подсказка',
    attachTo: { element: 'body', on: 'top' }
  });
} else {
  tour.addStep({
    id: 'desktop-first-step',
    text: 'Десктоп подсказка',
    attachTo: { element: '#main-menu', on: 'right' }
  });
}
  • Позволяет создавать разные туры для мобильных и десктопных пользователей.
  • Можно использовать динамическое добавление шагов в зависимости от ширины экрана или ориентации устройства.

Заключение по технической сути

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

  • Привязки шагов к элементам интерфейса.
  • Динамического позиционирования подсказок.
  • Разделения логики под мобильные и десктопные устройства.
  • Управления шагами через события и программные методы.
  • Легкой интеграции с адаптивным дизайном и медиазапросами.

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

Оглавление