Изменения в API

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

Новый способ инициализации

Ранее создание экземпляра драйвера выглядело так:

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

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

const driver = new Driver({
    allowClose: false,       // запрет закрытия тура кликом вне шага
    opacity: 0.8,            // затемнение фона
    padding: 10,             // отступ вокруг подсвечиваемого элемента
    stageBackground: '#fff', // фон подсветки шага
});

Ключевые изменения:

  • allowClose заменяет старый closeOnClickOutside и объединяет логику закрытия.
  • stageBackground позволяет явно задавать фон подсветки шага без дополнительных CSS.
  • Настройки по умолчанию теперь применяются ко всем шагам, но могут быть переопределены на уровне отдельного шага.

Обновлённая структура шагов

Шаги теперь создаются через метод defineSteps или передаются напрямую в метод start. Структура шага стала более детализированной:

driver.defineSteps([
    {
        element: '#btnSubmit',
        popover: {
            title: 'Отправка формы',
            description: 'Нажмите, чтобы отправить форму.',
            position: 'bottom'
        },
        onNext: () => console.log('Следующий шаг'),
        onPrevious: () => console.log('Предыдущий шаг'),
        onShow: () => console.log('Шаг показан')
    },
    {
        element: '#inputName',
        popover: {
            title: 'Имя пользователя',
            description: 'Введите ваше имя здесь.',
            position: 'top'
        },
        stageBackground: '#f0f0f0'  // переопределение глобального параметра
    }
]);
driver.start();

Изменения по сравнению с предыдущей версией:

  • В popover теперь можно задавать position и дополнительные стили.
  • Callback-функции onNext, onPrevious и onShow интегрированы в шаг напрямую, что упрощает обработку событий.
  • Появилась возможность переопределять глобальные параметры (stageBackground, padding) на уровне отдельного шага.

Гибкое управление событиями

В новой версии Driver.js добавлен механизм глобальных событий тура:

driver.on('start', () => console.log('Тур запущен'));
driver.on('complete', () => console.log('Тур завершен'));
driver.on('reset', () => console.log('Тур сброшен'));

Особенности:

  • Поддержка событий start, complete, reset, next, previous, show.
  • Позволяет централизованно обрабатывать действия пользователя, не привязываясь к каждому шагу отдельно.
  • Упрощает интеграцию с аналитикой и логированием пользовательских действий.

Улучшенные методы управления туром

API получил новые методы и улучшения старых:

  • start(stepIndex) — запуск тура с конкретного шага.
  • moveNext() и movePrevious() — переход между шагами без прямого доступа к шагу.
  • reset() — полная очистка состояния тура, полезно при динамическом контенте.
  • highlight(element) — подсветка элемента вне контекста шага, используется для кастомных эффектов.

Пример динамического изменения шага:

driver.highlight('#dynamicElement');
driver.moveNext();

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

Теперь можно явно управлять адаптивным поведением подсветки:

const driver = new Driver({
    allowClose: true,
    opacity: 0.7,
    padding: 15,
    stageBackground: '#fafafa',
    responsive: true,         // новая опция для адаптивного позиционирования
    scrollIntoViewOptions: { beh * avior: 'smooth', block: 'center' }
});

Изменения:

  • responsive автоматически корректирует позицию поповера при изменении размеров окна.
  • scrollIntoViewOptions позволяет точно управлять прокруткой к элементу, заменяя старый метод scrollToElement.

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

В новой версии Driver.js появилась возможность обновлять шаги на лету, что особенно важно для SPA и динамических интерфейсов:

driver.defineSteps([
    { element: '#step1', popover: { title: 'Шаг 1', description: 'Описание' } }
]);

// Добавление нового шага после загрузки данных
driver.addStep({
    element: '#step2',
    popover: { title: 'Шаг 2', description: 'Динамический контент' }
});

Ключевые моменты:

  • addStep и removeStep позволяют управлять шагами без перезапуска тура.
  • Динамические шаги могут наследовать глобальные настройки или иметь собственные параметры.

Итог изменений в API

Новый API Driver.js делает создание интерактивных туров более модульным и управляемым. Он объединяет глобальные настройки, локальные параметры шагов и события в единую структуру, позволяя создавать адаптивные и динамичные пользовательские экскурсии.

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

Оглавление