Методы запуска и остановки

Для работы с Driver.js необходимо создать экземпляр класса Driver. Конструктор позволяет задать глобальные настройки, которые будут применяться ко всем шагам тура:

import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';

const driver = new Driver({
    animate: true,        // плавная анимация при переходе между шагами
    opacity: 0.75,        // затемнение фона вокруг выделенного элемента
    padding: 10,          // отступ вокруг элемента
    allowClose: false,    // запрет закрытия тура кликом на затемненную область
    overlayClickNext: true // клик по оверлею ведет к следующему шагу
});

Ключевые свойства конструктора:

  • animate — отвечает за анимацию появления подсказки и подсветки элемента.
  • opacity — уровень затемнения фона (0 — полностью прозрачный, 1 — полностью непрозрачный).
  • padding — пространство между элементом и подсветкой.
  • allowClose — возможность закрытия тура по клику вне элемента или на крестик.
  • overlayClickNext — позволяет перейти к следующему шагу, кликая на затемненный фон.

Экземпляр driver становится основным объектом управления турами.

Добавление шагов

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

driver.defineSteps([
    {
        element: '#submit-button',
        popover: {
            title: 'Кнопка отправки',
            description: 'Нажмите здесь, чтобы отправить форму.',
            position: 'bottom'
        }
    },
    {
        element: '#username',
        popover: {
            title: 'Поле имени пользователя',
            description: 'Введите ваш логин.',
            position: 'right'
        }
    }
]);

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

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

Можно задавать дополнительные свойства для кастомизации: padding, className, onNext, onPrevious, onShow.

Запуск тура

Для запуска тура используется метод start():

driver.start();

Опционально можно указать первый шаг для запуска:

driver.start(1); // запуск с шага с индексом 1 (второй шаг)

Особенности метода start():

  • Автоматически активирует затемнение и подсветку элементов.
  • Если шаг с указанным индексом не найден, начинается с первого шага.
  • При повторном вызове запуска после закрытия тура, все шаги будут показаны заново.

Переход между шагами

Driver.js предоставляет методы для ручного управления навигацией:

driver.moveNext();     // перейти к следующему шагу
driver.movePrevious(); // перейти к предыдущему шагу
driver.reset();        // сбросить текущий тур, скрыть все подсветки

Методы moveNext и movePrevious учитывают настройки колбеков на шагах:

{
    onNext: function() { console.log('Следующий шаг'); },
    onPrevious: function() { console.log('Предыдущий шаг'); }
}

reset() полностью очищает текущий тур и возвращает DOM к исходному состоянию.

Закрытие тура

Для закрытия тура предусмотрен метод stop():

driver.stop();

Особенности stop():

  • Убирает подсветку элементов и затемнение фона.
  • Сбрасывает внутренний индекс текущего шага.
  • После вызова stop() можно повторно вызвать start() для нового показа тура.

Дополнительно можно назначить callback при закрытии:

driver.defineSteps([
    {
        element: '#menu',
        popover: { title: 'Меню', description: 'Главное меню сайта', position: 'bottom' },
        onNext: function() { console.log('Шаг пройден'); },
        onStop: function() { console.log('Тур завершен'); }
    }
]);

Автоматический запуск и остановка

Можно интегрировать Driver.js с событиями страницы:

window.addEventListener('load', () => {
    driver.start(); // автоматический запуск после полной загрузки страницы
});

document.querySelector('#close-tour').addEventListener('click', () => {
    driver.stop();  // остановка тура по кнопке
});

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

Примеры сложного управления шагами

Пропуск шагов на основе условий:

driver.defineSteps([
    { element: '#step1', popover: { title: 'Шаг 1', description: 'Описание 1', position: 'top' } },
    { element: '#step2', popover: { title: 'Шаг 2', description: 'Описание 2', position: 'right' }, onShow: () => {
        if (!document.querySelector('#step2').offsetParent) {
            driver.moveNext(); // пропуск шага, если элемент скрыт
        }
    }}
]);
driver.start();

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

const tour1 = new Driver({ animate: true });
const tour2 = new Driver({ animate: false });

tour1.defineSteps([...]);
tour2.defineSteps([...]);

tour1.start();
tour1.on('complete', () => tour2.start());

Важные моменты

  • Экземпляр Driver можно переиспользовать для разных туров на одной странице.
  • Методы start(), stop(), moveNext(), movePrevious() обеспечивают полный контроль над показом шагов.
  • Колбеки onNext, onPrevious, onShow, onStop позволяют создавать динамическую и интерактивную навигацию.
  • Сочетание автоматических запусков с ручным управлением повышает удобство использования библиотечного интерфейса.
Оглавление