Жизненный цикл тура

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

const driver = new Driver({
    allowClose: true,          // Можно ли закрыть тур пользователю
    overlayClickNext: true,    // Переход к следующему шагу при клике на затемнённый фон
    showProgress: true,        // Показывать индикатор прогресса
    keyboardControl: true      // Управление туром с клавиатуры
});

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

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

Шаги тура создаются с помощью метода defineSteps(), который принимает массив объектов. Каждый объект описывает целевой элемент и поведение подсказки:

driver.defineSteps([
    {
        element: '#buttonSubmit',
        popover: {
            title: 'Отправка формы',
            description: 'Нажмите на эту кнопку, чтобы отправить данные.',
            position: 'bottom'
        }
    },
    {
        element: '#menuSettings',
        popover: {
            title: 'Настройки',
            description: 'Здесь можно изменить параметры приложения.',
            position: 'right'
        }
    }
]);

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

  • element – CSS-селектор или DOM-элемент, к которому привязывается подсказка.
  • popover.title – заголовок подсказки.
  • popover.description – текст подсказки.
  • popover.position – расположение подсказки относительно элемента (top, bottom, left, right, auto).
  • onNext, onPrevious, onShow, onHide – локальные события шага для управления логикой или анимациями.

Запуск тура

После определения шагов тур запускается методом start():

driver.start();

Метод start() инициирует жизненный цикл тура: подсветка элементов, отображение всплывающих подсказок и обработка навигации пользователя.

Если необходимо начать тур с конкретного шага, используется опция startAt:

driver.startAt(1); // Начать с шага с индексом 1

Управление жизненным циклом тура

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

  • next() – переход к следующему шагу.
  • previous() – возврат к предыдущему шагу.
  • reset() – сброс текущего прогресса и возврат к первому шагу.
  • stop() – полное завершение тура с очисткой всех подсветок и оверлея.

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

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

Жизненный цикл тура можно расширять через глобальные события:

driver.on('start', () => console.log('Тур начался'));
driver.on('complete', () => console.log('Тур завершён'));
driver.on('reset', () => console.log('Тур сброшен'));
driver.on('next', (step) => console.log(`Переход к шагу ${step}`));
driver.on('previous', (step) => console.log(`Возврат к шагу ${step}`));
driver.on('close', () => console.log('Тур закрыт пользователем'));

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

Настройка поведения подсказок

Подсказки в Driver.js можно детально настраивать:

  • showButtons – отображать или скрывать кнопки навигации.
  • closeBtnText – текст кнопки закрытия.
  • nextBtnText, prevBtnText – кастомизация текста кнопок.
  • animation – тип анимации появления подсказки (fade, slide, none).
  • padding – отступ между подсветкой элемента и оверлеем.
  • stageBackground – цвет оверлея.

Например:

driver.defineSteps([
    {
        element: '#profilePic',
        popover: {
            title: 'Ваш профиль',
            description: 'Здесь отображается ваша аватарка.',
            position: 'top',
            showButtons: true,
            closeBtnText: 'Закрыть',
            nextBtnText: 'Дальше',
            prevBtnText: 'Назад'
        }
    }
]);

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

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

driver.defineSteps([
    {
        element: '#step1',
        popover: { title: 'Шаг 1', description: 'Первый шаг', position: 'bottom' }
    }
]);

// Добавление шага после запуска тура
driver.defineSteps([
    {
        element: '#step2',
        popover: { title: 'Шаг 2', description: 'Второй шаг', position: 'right' }
    }
], true); // Второй аргумент true объединяет с уже существующими шагами

Состояние и хранение прогресса

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

driver.on('next', (step) => {
    localStorage.setItem('currentTourStep', step);
});

driver.startAt(Number(localStorage.getItem('currentTourStep')) || 0);

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

Автоматическое завершение

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

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

Оглавление