Обновление с версии 0.x

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

Совместимость с 0.x: Несмотря на переработку, сохранена обратная совместимость на базовом уровне. Методы drive() и highlight() сохраняют прежние сигнатуры, однако часть опций была переименована или изменена для лучшего соответствия стандартам ES6.

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

Ранее конфигурация создавалась через объект, передаваемый в конструктор:

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

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

const driver = new Driver({
    overlayOpacity: 0.7,
    allowClose: true,
    keyboardControl: true
});

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

Работа с шагами и позиционированием

В версии 0.x использовалась простая привязка к селектору и позиция указывалась через ключ placement. В обновлении применяется структура popover, которая позволяет:

  • Указывать title, description, position;
  • Определять индивидуальные стили для каждого шага;
  • Управлять динамическим позиционированием относительно видимой области.
popover: {
    title: 'Название шага',
    description: 'Текст подсказки',
    position: 'left',
    padding: 15,
    closeBtnText: 'Закрыть'
}

Параметр position поддерживает значения: top, bottom, left, right, auto. Значение auto обеспечивает автоматическое определение оптимальной позиции в зависимости от видимой области.

Методы управления процессом

Старт и остановка:

driver.start();   // Запуск туров
driver.stop();    // Принудительная остановка
driver.reset();   // Сброс состояния

Навигация по шагам:

  • driver.next() — переход к следующему шагу;
  • driver.prev() — возврат к предыдущему шагу;
  • driver.moveTo(index) — переход к шагу с конкретным индексом.

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

Обновление версии позволило более гибко работать с шагами в рантайме:

driver.addStep({
    element: '#newStep',
    popover: {
        title: 'Новый шаг',
        description: 'Описание нового шага',
        position: 'top'
    }
});

driver.removeStep('#oldStep');

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

Настройка глобальных опций

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

  • overlayOpacity — прозрачность затемнения фона;
  • allowClose — возможность закрытия кликом по оверлею;
  • keyboardControl — поддержка навигации с клавиатуры;
  • stageBackground — цвет фона подсветки;
  • animation — включение анимации появления/исчезновения подсказок.
const driver = new Driver({
    overlayOpacity: 0.8,
    allowClose: false,
    keyboardControl: true,
    animation: true
});

Обработка событий

Driver.js теперь поддерживает событийную модель для отслеживания состояния тура:

  • driver.on('start', callback) — запуск тура;
  • driver.on('stop', callback) — остановка тура;
  • driver.on('next', callback) — переход к следующему шагу;
  • driver.on('prev', callback) — переход к предыдущему шагу;
  • driver.on('complete', callback) — завершение всех шагов.
driver.on('complete', () => {
    console.log('Тур завершен');
});

Поддержка асинхронного контента

В версии 0.x загрузка контента была статической, что ограничивало использование в SPA. В обновлении реализована поддержка асинхронных шагов через element в виде функции:

driver.defineSteps([
    {
        element: () => document.querySelector('#dynamicElement'),
        popover: {
            title: 'Динамический шаг',
            description: 'Элемент появляется после AJAX запроса',
            position: 'bottom'
        }
    }
]);

Это гарантирует корректное отображение подсказок даже при динамически создаваемых элементах.

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

Новая версия расширяет возможности стилизации:

  • Можно задавать CSS классы для каждого поповера;
  • Определять собственные стили оверлея;
  • Контролировать анимацию и размеры подсказок.
driver.defineSteps([
    {
        element: '#step1',
        popover: {
            className: 'custom-popover',
            style: {
                maxWidth: '400px',
                fontSize: '14px'
            },
            position: 'right'
        }
    }
]);

Резюме изменений

Основные отличия от версии 0.x:

  • Разделение глобальных настроек и шагов;
  • Поддержка асинхронных и динамических элементов;
  • Расширенные возможности стилизации и кастомизации;
  • Полная событийная модель для управления турами;
  • Улучшенное позиционирование и автоматический выбор позиции.

Эти изменения делают Driver.js более гибким инструментом для создания интерактивных туров и подсказок на современных веб-приложениях.

Оглавление