Что такое Driver.js

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

Библиотека используется для:

  • онбординга новых пользователей
  • демонстрации функциональности интерфейса
  • обучения работе с системой
  • сопровождения сложных пользовательских сценариев

Driver.js работает поверх DOM, не требуя сложной интеграции или зависимости от фреймворков.

Ключевая идея работы

В основе Driver.js лежит концепция шагов (steps). Каждый шаг:

  • указывает на конкретный DOM-элемент
  • выделяет его с помощью затемнения остальной части экрана
  • отображает описание (tooltip)
  • управляет переходом к следующему шагу

Механизм включает:

  1. Затемнение всего экрана (overlay)
  2. Выделение нужного элемента (highlight)
  3. Отображение информационного блока (popover)

Основные возможности

1. Подсветка элементов

Driver.js выделяет элемент с помощью:

  • изменения z-index
  • создания маски поверх страницы
  • анимации перехода между элементами

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

2. Пошаговые туры

Последовательность шагов формирует полноценный сценарий обучения:

  • каждый шаг описывает отдельный элемент
  • переходы управляются автоматически или вручную
  • можно добавлять условия и обработчики событий

3. Гибкая настройка всплывающих подсказок

Подсказки (popover) включают:

  • заголовок
  • описание
  • кнопки управления (Next, Previous, Close)

Настраиваются:

  • позиция (сверху, снизу, слева, справа)
  • стиль
  • содержимое (HTML поддерживается)

4. Управление поведением тура

Driver.js предоставляет API для:

  • запуска и остановки тура
  • перехода между шагами
  • программного управления последовательностью

5. Независимость от фреймворков

Библиотека:

  • не зависит от React, Vue или Angular
  • работает с чистым JavaScript
  • легко интегрируется в любой проект

Архитектура Driver.js

Основные сущности

Driver (экземпляр библиотеки) Главный объект, управляющий логикой тура.

Step (шаг) Описание одного элемента интерфейса:

  • селектор элемента
  • текст подсказки
  • дополнительные параметры

Popover (подсказка) UI-компонент, отображающий информацию.

Overlay (оверлей) Затемнённая область вокруг выделенного элемента.

Принцип работы

  1. Создаётся экземпляр Driver

  2. Определяется массив шагов

  3. При запуске:

    • затемняется экран
    • выделяется первый элемент
    • отображается подсказка

  4. При переходе:

    • текущий элемент снимается с фокуса
    • следующий выделяется
    • обновляется содержимое popover

Установка и подключение

Через npm

npm install driver.js

Через CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js/dist/driver.min.css">
<script src="https://cdn.jsdelivr.net/npm/driver.js/dist/driver.min.js"></script>

Базовое использование

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

import Driver from "driver.js";
import "driver.js/dist/driver.css";

const driver = new Driver();

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

driver.defineSteps([
  {
    element: "#header",
    popover: {
      title: "Заголовок",
      description: "Основная панель навигации",
      position: "bottom"
    }
  },
  {
    element: "#menu",
    popover: {
      title: "Меню",
      description: "Здесь находятся основные разделы",
      position: "right"
    }
  }
]);

Запуск тура

driver.start();

Настройки конфигурации

Driver.js поддерживает глобальные параметры:

const driver = new Driver({
  opacity: 0.75,
  padding: 10,
  allowClose: true,
  overlayClickNext: false,
  doneBtnText: "Готово",
  closeBtnText: "Закрыть",
  nextBtnText: "Далее",
  prevBtnText: "Назад"
});

Описание ключевых параметров

  • opacity — прозрачность затемнения
  • padding — отступ вокруг выделенного элемента
  • allowClose — разрешение закрытия тура
  • overlayClickNext — переход по клику на затемнение
  • nextBtnText / prevBtnText — кастомизация кнопок

Работа с событиями

Driver.js позволяет отслеживать жизненный цикл тура:

const driver = new Driver({
  onStart: () => console.log("Тур начался"),
  onReset: () => console.log("Тур завершён"),
  onNext: () => console.log("Следующий шаг"),
  onPrevious: () => console.log("Предыдущий шаг")
});

Программное управление

Методы экземпляра

  • start() — запуск тура
  • reset() — остановка и сброс
  • moveNext() — переход вперёд
  • movePrevious() — переход назад
driver.moveNext();
driver.reset();

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

Driver.js учитывает изменения в DOM:

  • элементы могут появляться динамически
  • селекторы проверяются при переходе к шагу
  • при отсутствии элемента шаг может быть пропущен или вызвать ошибку

Практика:

  • проверка наличия элемента перед запуском
  • использование задержек или observer’ов

Кастомизация внешнего вида

CSS-переопределения

Библиотека позволяет полностью изменить внешний вид:

.driver-popover {
  background-color: #222;
  color: #fff;
}

.driver-overlay {
  background-color: rgba(0, 0, 0, 0.8);
}

Темизация

Можно:

  • менять цвета
  • добавлять анимации
  • стилизовать кнопки
  • изменять форму подсказок

Преимущества Driver.js

  • минимальный размер
  • простота интеграции
  • высокая наглядность
  • гибкость настройки
  • отсутствие зависимостей

Ограничения

  • отсутствие встроенной логики сложных сценариев (ветвления)
  • необходимость ручного контроля состояния UI
  • возможные сложности с динамическими интерфейсами

Типичные сценарии использования

1. Первый запуск приложения

Пошаговое объяснение ключевых элементов интерфейса.

2. Обучающие подсказки

Выделение новых функций после обновлений.

3. Демонстрация возможностей

Показ возможностей продукта потенциальным пользователям.

4. Поддержка пользователей

Объяснение сложных действий внутри интерфейса.

Сравнение с альтернативами

Driver.js отличается от аналогов:

Библиотека Особенности
Intro.js более тяжёлая, больше возможностей
Shepherd.js сложнее настройка
Driver.js минимализм и простота

Внутренний механизм подсветки

Driver.js:

  1. вычисляет координаты элемента
  2. создаёт маску с “вырезом”
  3. позиционирует popover относительно элемента
  4. управляет фокусом и прокруткой страницы

Особенности работы с прокруткой

  • автоматический скролл к элементу
  • плавная анимация
  • корректная работа с фиксированными элементами

Поддержка браузеров

Driver.js работает в:

  • современных браузерах (Chrome, Firefox, Edge, Safari)
  • не требует полифиллов для базового функционала

Итоговое понимание

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

Оглавление