Определение шага

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

Основные свойства шага

  • element Указывает на DOM-элемент, который будет подсвечен. Значение может быть передано в виде CSS-селектора строки или напрямую как объект DOM.

    element: '#submitButton'

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

  • popover Объект, описывающий всплывающее окно с информацией. Внутри него можно задать:

    • title – заголовок всплывающего окна.
    • description – основной текст подсказки.
    • position – расположение всплывающего окна относительно элемента (top, bottom, left, right, auto).
    popover: {
    title: 'Кнопка отправки',
    description: 'Нажмите здесь, чтобы отправить форму',
    position: 'bottom'
}

  • onNext, onPrevious, onBeforeShow, onAfterShow Колбэк-функции, которые выполняются при переходе между шагами или перед показом/после показа шага. Позволяют динамически изменять контент, управлять состоянием элементов или запускать сторонние функции.

    onNext: function() {
    console.log('Пользователь перешёл к следующему шагу');
}

  • padding Отступ вокруг подсвечиваемого элемента. Позволяет визуально отделить элемент от фона и сделать подсветку более заметной.

    padding: 10

  • animation Определяет анимацию появления подсветки. Возможные значения: true или false. Включение анимации делает переходы более плавными.

Дополнительные настройки шага

  • clickThrough Позволяет пользователю взаимодействовать с элементом, находящимся под подсветкой. Если значение true, клики на элемент будут проходить сквозь подсветку.

  • highlightPadding Отдельная настройка от padding, задающая пространство исключительно для подсветки без влияния на положение всплывающего окна.

  • isFixed Если установлено в true, всплывающее окно фиксируется на экране и не перемещается при прокрутке.

  • overlayOpacity Прозрачность затемнённого фона вокруг подсвечиваемого элемента. Значения от 0 до 1.

Пример полного определения шага

const step = {
    element: '#menuItem1',
    popover: {
        title: 'Меню',
        description: 'Здесь можно выбрать различные разделы сайта',
        position: 'right'
    },
    padding: 15,
    animation: true,
    clickThrough: false,
    onNext: function() {
        console.log('Следующий шаг активирован');
    },
    onBeforeShow: function() {
        console.log('Шаг готов к отображению');
    }
};

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

Динамическое формирование шага

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

const menuItem = document.querySelector('#menuItem2');
if(menuItem) {
    driver.defineSteps([{
        element: menuItem,
        popover: {
            title: 'Второе меню',
            description: 'Этот пункт доступен только авторизованным пользователям',
            position: 'bottom'
        }
    }]);
}

Взаимодействие с другими шагами

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

onAfterShow: function() {
    driver.defineSteps([{
        element: '#nextFeature',
        popover: {
            title: 'Новая функция',
            description: 'Теперь эта кнопка активна',
            position: 'top'
        }
    }]);
}

Практические рекомендации

  • Всегда указывать position для всплывающего окна, чтобы избежать непредсказуемого расположения.
  • Для сложных интерфейсов использовать onBeforeShow для проверки состояния элемента перед показом шага.
  • clickThrough использовать только если подсветка не должна блокировать взаимодействие.
  • Для визуального комфорта применять padding и highlightPadding совместно.

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

Оглавление