Создание плагинов

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

Инициализация Driver

Для начала работы создается экземпляр Driver:

const driver = new Driver({
  animate: true,
  opacity: 0.75,
  padding: 10,
  allowClose: false,
});

Ключевые параметры:

  • animate — включает анимацию при переходе между шагами.
  • opacity — прозрачность затемнения фона.
  • padding — отступ вокруг выделяемого элемента.
  • allowClose — запрет на закрытие подсказки пользователем.

Создание шагов

Шаги определяются как массив объектов:

driver.defineSteps([
  {
    element: '#buttonStart',
    popover: {
      title: 'Начало работы',
      description: 'Нажмите на кнопку, чтобы начать процесс.',
      position: 'bottom'
    }
  },
  {
    element: '#inputEmail',
    popover: {
      title: 'Ввод Email',
      description: 'Введите ваш Email для регистрации.',
      position: 'right'
    }
  }
]);

Свойства шага:

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

Плагины в Driver.js

Driver.js поддерживает расширения через плагины. Плагин — это объект с определенной структурой, который подключается к экземпляру Driver и изменяет поведение шагов или событий.

Структура плагина

const myPlugin = {
  name: 'highlightPlugin',
  onBeforeStep: (step) => {
    console.log('Перед шагом:', step);
  },
  onAfterStep: (step) => {
    console.log('После шага:', step);
  },
  onStart: () => {
    console.log('Тур начат');
  },
  onStop: () => {
    console.log('Тур завершен');
  }
};

События плагина:

  • onBeforeStep(step) — вызывается перед отображением каждого шага.
  • onAfterStep(step) — после завершения шага.
  • onStart() — при запуске тура.
  • onStop() — при завершении тура.

Подключение плагина к Driver

После создания плагина его необходимо зарегистрировать:

driver.use(myPlugin);

Можно подключать несколько плагинов:

driver.use(pluginOne);
driver.use(pluginTwo);

Driver.js выполнит все события каждого плагина в порядке подключения.

Создание собственного плагина для кастомизации подсветки

Пример плагина, который изменяет цвет подсветки элементов:

const customHighlight = {
  name: 'customHighlight',
  onBeforeStep: (step) => {
    const el = document.querySelector(step.element);
    if (el) {
      el.style.boxShadow = '0 0 15px 5px rgba(255, 0, 0, 0.5)';
    }
  },
  onAfterStep: (step) => {
    const el = document.querySelector(step.element);
    if (el) {
      el.style.boxShadow = '';
    }
  }
};

driver.use(customHighlight);

Пояснение:

  • Перед шагом элемент подсвечивается красной тенью.
  • После шага стиль возвращается в исходное состояние.

Работа с динамическими элементами

Плагины полезны для обработки элементов, которые создаются динамически:

const dynamicElementPlugin = {
  onBeforeStep: (step) => {
    if (!document.querySelector(step.element)) {
      const placeholder = document.createElement('div');
      placeholder.id = step.element.replace('#','');
      document.body.appendChild(placeholder);
    }
  }
};

driver.use(dynamicElementPlugin);

Управление поведением тура через плагины

Плагины могут изменять ход тура:

const skipCertainStep = {
  onBeforeStep: (step) => {
    if (step.element === '#optionalFeature') {
      driver.skip();
    }
  }
};

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

Итоговая структура использования Driver с плагинами

const driver = new Driver({ animate: true });
driver.defineSteps(stepsArray);
driver.use(customHighlight);
driver.use(skipCertainStep);
driver.start();

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

Оглавление