Работа с шаблонами

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

Структура шаблона шага

Каждый шаг в Driver.js описывается объектом с набором свойств. Основные из них:

  • element — CSS-селектор элемента, к которому будет привязан шаг.

  • popover — объект, определяющий содержимое всплывающей подсказки.

    • title — заголовок подсказки.
    • description — текст описания.
    • position — позиция подсказки относительно элемента (top, bottom, left, right).

  • onNext и onPrevious — функции обратного вызова при переходе между шагами.

  • stageBackground — цвет или прозрачность фона вокруг выделяемого элемента.

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

const stepTemplate = {
  element: '',
  popover: {
    title: '',
    description: '',
    position: 'bottom'
  },
  onNext: null,
  onPrevious: null,
  stageBackground: 'rgba(0,0,0,0.5)'
};

Создание динамических шаблонов

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

function createStep(elementSelector, titleText, descriptionText, position='bottom') {
  return {
    element: elementSelector,
    popover: {
      title: titleText,
      description: descriptionText,
      position: position
    },
    stageBackground: 'rgba(0,0,0,0.6)'
  };
}

const steps = [
  createStep('#button1', 'Кнопка отправки', 'Нажмите для отправки формы', 'top'),
  createStep('#input1', 'Поле ввода', 'Введите имя пользователя', 'right')
];

Наследование и переопределение шаблонов

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

const baseStep = {
  stageBackground: 'rgba(0,0,0,0.4)',
  popover: { position: 'bottom' }
};

const customStep = {
  ...baseStep,
  element: '#menu',
  popover: {
    ...baseStep.popover,
    title: 'Меню',
    description: 'Основная панель навигации'
  }
};

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

Использование массивов шаблонов

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

const tourSteps = [
  { element: '#nav', popover: { title: 'Навигация', description: 'Перемещайтесь между разделами', position: 'bottom' } },
  { element: '#profile', popover: { title: 'Профиль', description: 'Просмотр информации о пользователе', position: 'right' } }
];

const driver = new Driver();
driver.defineSteps(tourSteps);
driver.start();

Подключение пользовательских HTML-шаблонов

Driver.js позволяет использовать кастомные HTML-шаблоны для поповеров, что расширяет возможности оформления:

const customPopoverTemplate = `
  <div class="custom-popover">
    <h3 class="custom-title">{{title}}</h3>
    <p class="custom-description">{{description}}</p>
    <button class="custom-next">Далее</button>
  </div>
`;

const driver = new Driver({
  className: 'custom-driver',
  stageBackground: 'rgba(0,0,0,0.7)',
  animate: true,
  nextBtnText: 'Вперед',
  prevBtnText: 'Назад',
  allowClose: false
});

driver.defineSteps([
  { element: '#feature', popover: { title: 'Фича', description: 'Описание фичи', template: customPopoverTemplate } }
]);
driver.start();

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

Советы по масштабированию

  1. Хранить шаблоны отдельно — лучше держать шаги и шаблоны в отдельных файлах или модулях, чтобы можно было легко подключать их в разных сценариях.
  2. Использовать функции-конструкторы — для генерации повторяющихся шагов с разными параметрами.
  3. Применять наследование и spread-операторы — для минимизации дублирования и упрощения поддержки больших гидов.
  4. Комбинировать с динамическим контентом — для адаптивных интерфейсов и шагов, зависящих от состояния приложения.

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

Оглавление