Factory для создания туров

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

Основы Factory

Factory в контексте Shepherd.js — это способ централизованного создания объектов Shepherd.Tour с предопределёнными настройками. Она позволяет:

  • Задать глобальные параметры для всех шагов (кнопки, классы, поведение при закрытии).
  • Повторно использовать один и тот же шаблон туров на разных страницах.
  • Уменьшить дублирование кода при создании похожих интерактивных последовательностей.

Простейший пример Factory выглядит следующим образом:

function createTour(defaultOptions = {}) {
  const tour = new Shepherd.Tour({
    defaultStepOptions: {
      scrollTo: true,
      cancelIcon: { enabled: true },
      ...defaultOptions
    }
  });
  return tour;
}

Здесь defaultOptions позволяет задавать глобальные настройки для всех шагов, включая стили, кнопки и поведение скролла.

Настройка шагов через Factory

Factory упрощает добавление шагов с повторяющимися шаблонами:

function addStep(tour, selector, text, buttons = []) {
  tour.addStep({
    text: text,
    attachTo: { element: selector, on: 'bottom' },
    buttons: buttons.length ? buttons : [
      {
        text: 'Далее',
        action: tour.next
      }
    ]
  });
}

Применение:

const tour = createTour({ classes: 'shepherd-theme-arrows' });

addStep(tour, '#header', 'Это заголовок приложения.');
addStep(tour, '#sidebar', 'Здесь находится меню.');
addStep(tour, '#main', 'Основная рабочая область.');

tour.start();

Преимущество: все шаги наследуют глобальные настройки, определённые в Factory, что обеспечивает единый стиль и поведение туров.

Параметры по умолчанию и кастомизация

Factory позволяет задавать:

  • Глобальные CSS-классы (classes) для единообразного оформления.
  • Поведение скролла (scrollTo), чтобы каждый шаг автоматически фокусировался на элементе.
  • Кнопки управления (buttons) и их действия (tour.next, tour.back, tour.cancel).
  • Обработчики событий (beforeShowPromise, when) для интеграции с логикой приложения.

Пример расширенной Factory:

function createCustomTour() {
  return new Shepherd.Tour({
    defaultStepOptions: {
      classes: 'custom-shepherd-theme',
      scrollTo: { beh * avior: 'smooth', block: 'center' },
      cancelIcon: { enabled: true },
      when: {
        show: () => console.log('Шаг показан'),
        hide: () => console.log('Шаг скрыт')
      }
    }
  });
}

Генерация туров для разных страниц

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

function initPageTour(page) {
  const tour = createTour({ classes: 'page-tour' });

  const stepsConfig = {
    home: [
      { selector: '#home-banner', text: 'Баннер на главной' },
      { selector: '#home-features', text: 'Особенности продукта' }
    ],
    dashboard: [
      { selector: '#dashboard-stats', text: 'Статистика' },
      { selector: '#dashboard-settings', text: 'Настройки' }
    ]
  };

  stepsConfig[page].forEach(step => {
    addStep(tour, step.selector, step.text);
  });

  return tour;
}

// Использование
const tour = initPageTour('dashboard');
tour.start();

Ключевой момент: Factory разделяет логику создания тура и конфигурацию шагов, что облегчает поддержку и масштабирование.

Динамические шаги и условия

Factory может включать логику выбора шагов в зависимости от состояния приложения:

function createConditionalTour(userRole) {
  const tour = createTour({ classes: 'role-tour' });

  addStep(tour, '#common-feature', 'Общие функции');

  if (userRole === 'admin') {
    addStep(tour, '#admin-panel', 'Панель администратора');
  }

  return tour;
}

Таким образом, Factory позволяет создавать динамические, адаптивные туры, не дублируя код.

Интеграция с модульной структурой

В современных приложениях Factory удобно интегрировать с ES6-модулями:

// tourFactory.js
export function createTourFactory(defaultOptions = {}) {
  return function(tourSteps) {
    const tour = new Shepherd.Tour({ defaultStepOptions: defaultOptions });
    tourSteps.forEach(step => tour.addStep(step));
    return tour;
  }
}

// usage.js
import { createTourFactory } from './tourFactory.js';

const tourFactory = createTourFactory({ classes: 'module-tour' });
const tour = tourFactory([
  { text: 'Первый шаг', attachTo: { element: '#elem1', on: 'right' } },
  { text: 'Второй шаг', attachTo: { element: '#elem2', on: 'left' } }
]);
tour.start();

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

Итоговые возможности Factory

Использование Factory в Shepherd.js обеспечивает:

  • Консистентный стиль и поведение шагов.
  • Повторное использование кода и конфигураций.
  • Лёгкую адаптацию туров под разные страницы или роли пользователей.
  • Простую интеграцию с событиями и модульной архитектурой.

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

Оглавление