drive

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

В основе работы лежит механизм затемнения экрана и выделения конкретного DOM-элемента с помощью маски, а также отображения всплывающего блока с описанием.

Ключевые задачи:

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

Библиотека написана на JavaScript и не требует зависимостей.

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

Через npm

npm install driver.js

Подключение в проекте

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

Через CDN

<link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css" />
<script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>

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

Создание экземпляра:

const driver = new Driver();

Инициализация с настройками:

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

Базовые методы

Запуск подсветки элемента

driver.highlight('#element');

Подсвечивает один элемент без сценария шагов.

Запуск тура

driver.defineSteps([
  {
    element: '#step1',
    popover: {
      title: 'Шаг 1',
      description: 'Описание первого шага',
      position: 'bottom'
    }
  },
  {
    element: '#step2',
    popover: {
      title: 'Шаг 2',
      description: 'Описание второго шага',
      position: 'top'
    }
  }
]);

driver.start();

Завершение тура

driver.reset();

Конфигурация

Основные параметры

Параметр Описание
animate Включение анимации
opacity Затемнение фона
padding Отступ вокруг элемента
allowClose Возможность закрытия
overlayClickNext Переход по клику на фон
doneBtnText Текст кнопки завершения

Пример:

const driver = new Driver({
  animate: true,
  opacity: 0.6,
  padding: 8,
  doneBtnText: 'Готово',
  closeBtnText: 'Закрыть'
});

Шаги тура

Каждый шаг описывается объектом:

{
  element: '#selector',
  popover: {
    title: 'Заголовок',
    description: 'Описание',
    position: 'right'
  }
}

Позиции popover

  • top
  • bottom
  • left
  • right
  • auto

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

Переход к следующему шагу

driver.moveNext();

Переход назад

driver.movePrevious();

Переход к конкретному шагу

driver.goTo(2);

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

Driver.js предоставляет хуки для отслеживания состояния.

beforeHighlight

const driver = new Driver({
  onHighlightStarted: (element) => {
    console.log('Подсветка началась:', element);
  }
});

afterHighlight

onHighlighted: (element) => {
  console.log('Подсветка завершена');
}

при завершении тура

onReset: () => {
  console.log('Тур завершён');
}

Кастомизация popover

Настройка кнопок

const driver = new Driver({
  nextBtnText: 'Далее',
  prevBtnText: 'Назад',
  doneBtnText: 'Завершить'
});

HTML в описании

popover: {
  title: 'Заголовок',
  description: '<b>Жирный текст</b> и <i>курсив</i>'
}

Стилизация

Driver.js использует CSS, который можно переопределить.

Пример кастомизации

.driver-popover {
  background-color: #222;
  color: #fff;
  border-radius: 8px;
}

.driver-highlighted-element {
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
}

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

В приложениях с динамической отрисовкой (React, Vue и др.) важно учитывать момент появления элементов.

Ожидание элемента

setTimeout(() => {
  driver.start();
}, 500);

Проверка наличия элемента

if (document.querySelector('#element')) {
  driver.highlight('#element');
}

Использование без сценария (focus mode)

driver.highlight({
  element: '#button',
  popover: {
    description: 'Нажмите сюда'
  }
});

Многошаговые сценарии с логикой

Пример сложного сценария:

driver.defineSteps([
  {
    element: '#login',
    popover: {
      title: 'Авторизация',
      description: 'Введите логин'
    }
  },
  {
    element: '#password',
    popover: {
      title: 'Пароль',
      description: 'Введите пароль'
    }
  },
  {
    element: '#submit',
    popover: {
      title: 'Отправка',
      description: 'Нажмите кнопку'
    }
  }
]);

Управление прокруткой

Driver автоматически прокручивает страницу к элементу.

Отключение:

const driver = new Driver({
  smoothScroll: false
});

Ограничение взаимодействия

Блокировка кликов

const driver = new Driver({
  disableInteraction: true
});

Работа с формами

Подсветка полей формы:

driver.highlight('#email');

Комбинирование с валидацией:

if (!email.value) {
  driver.highlight('#email');
}

Использование в SPA

В одностраничных приложениях важно:

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

Пример:

useEffect(() => {
  driver.start();
}, []);

Lazy запуск

Запуск только при первом посещении:

if (!localStorage.getItem('tourShown')) {
  driver.start();
  localStorage.setItem('tourShown', true);
}

Частые ошибки

Элемент не найден

Причина:

  • неправильный селектор
  • элемент ещё не отрисован

Popover отображается не там

Причина:

  • overflow:hidden у родителя
  • position: relative

Тур не запускается

Причина:

  • не вызван start()
  • не определены шаги

Производительность

Driver.js:

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

Расширенные сценарии

Условные шаги

const steps = [];

if (isAdmin) {
  steps.push({
    element: '#admin',
    popover: {
      title: 'Админ панель'
    }
  });
}

driver.defineSteps(steps);

Повторный запуск

driver.reset();
driver.start();

Интеграция с аналитикой

const driver = new Driver({
  onHighlighted: (el) => {
    analytics.track('step_view', { element: el.id });
  }
});

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

Библиотека Особенности
Driver.js Простота, лёгкость
Intro.js Более тяжёлая
Shepherd.js Гибкость

Архитектурные особенности

Driver.js:

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

Практические кейсы

Онбординг

  • регистрация
  • первое использование

Обновления интерфейса

  • новые функции
  • изменения UI

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

  • подсказки
  • обучение

Управление состоянием тура

const isTourActive = driver.isActivated;

Глубокая кастомизация

Можно:

  • полностью переопределить стили
  • управлять DOM popover
  • изменять поведение кнопок

Безопасность

Driver.js:

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

Ограничения

  • не работает без DOM
  • ограничен браузером
  • требует корректной вёрстки

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

Поддерживаются:

  • Chrome
  • Firefox
  • Edge
  • Safari

Внутренний принцип работы

  1. Создаётся overlay
  2. Вычисляются координаты элемента
  3. Формируется маска
  4. Отрисовывается popover
  5. Управляется переход между шагами

Расширение функциональности

Driver.js можно комбинировать с:

  • системами аналитики
  • state management
  • UI-фреймворками

Итеративное построение тура

Разделение шагов:

const baseSteps = [...];
const extraSteps = [...];

driver.defineSteps([...baseSteps, ...extraSteps]);

Контроль пользовательского поведения

Ограничение закрытия:

allowClose: false

Взаимодействие с backend

Сценарии:

  • хранение статуса прохождения
  • A/B тестирование туров

Масштабирование

Driver.js подходит для:

  • лендингов
  • SaaS-платформ
  • административных панелей
  • корпоративных систем
Оглавление