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

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

Хранение состояния туров

Чтобы реализовать повторный показ туров, необходимо отслеживать состояние посещения каждого тура. Обычно это делается с помощью:

  • LocalStorage – сохраняет информацию в браузере на стороне клиента.
  • SessionStorage – сохраняет данные на текущую сессию.
  • Cookies – альтернативный способ хранения небольших данных.
  • Серверная база данных – для синхронизации состояния между устройствами.

Пример хранения состояния в LocalStorage:

function markTourAsCompleted(tourId) {
    localStorage.setItem(`tour_${tourId}_completed`, 'true');
}

function isTourCompleted(tourId) {
    return localStorage.getItem(`tour_${tourId}_completed`) === 'true';
}

Используя эти функции, можно условно запускать тур только если он ещё не был завершён, либо принудительно позволять повторный показ.

Принудительный повторный показ

Driver.js по умолчанию не запрещает повторный показ. Для того чтобы в любой момент вызвать тур заново, достаточно создать новый экземпляр Driver и вызвать метод start():

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

const driver = new Driver({
    allowClose: true,
    keyboardControl: true,
    overlayClickNext: false
});

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

function startTour(force = false) {
    const tourId = 'mainTour';
    if (force || !isTourCompleted(tourId)) {
        driver.start();
        driver.on('complete', () => markTourAsCompleted(tourId));
        driver.on('reset', () => markTourAsCompleted(tourId));
    }
}

Параметр force позволяет игнорировать состояние предыдущего показа и запускать тур повторно в любой момент.

Сброс состояния туров

Для обеспечения повторного показа можно реализовать сброс состояния тура:

function resetTour(tourId) {
    localStorage.removeItem(`tour_${tourId}_completed`);
}

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

Адаптация туров под повторный показ

При повторном показе важно учитывать:

  • Состояние интерфейса – элементы, на которые ссылается тур, должны быть видимы и активны.
  • Изменения DOM – если элементы динамически создаются, необходимо запускать тур только после их появления.
  • Пользовательский опыт – повторный показ должен быть контролируемым, чтобы не раздражать пользователя.

Пример: динамический повторный тур

function showTourAfterElementReady(selector) {
    const interval = setInterval(() => {
        const el = document.querySelector(selector);
        if (el) {
            clearInterval(interval);
            startTour(true); // принудительный повторный запуск
        }
    }, 300);
}

showTourAfterElementReady('#dynamicStep');

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

Использование пользовательских триггеров

Можно привязать повторный показ к кнопке или событию:

document.querySelector('#repeatTourButton').addEventListener('click', () => {
    resetTour('mainTour');
    startTour(true);
});

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

Особенности повторного показа в мобильных и SPA-приложениях

  • В SPA (Single Page Applications) необходимо учитывать маршрутизацию, чтобы тур запускался только на нужной странице.
  • На мобильных устройствах нужно убедиться, что все элементы, на которые указывает тур, корректно отображаются при изменении ориентации экрана.
  • В случаях с динамическим контентом важно отложить старт тура до полной загрузки элементов.

Повторный показ туров в Driver.js требует сочетания контроля состояния, синхронизации с DOM и удобных пользовательских триггеров. Систематическое использование LocalStorage и методов start, reset, on('complete') позволяет создавать гибкие и надёжные решения для интерактивных обучающих туров.

Оглавление