Глобальные настройки

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

const driver = new Driver({
    animate: true,
    opacity: 0.75,
    padding: 10,
    allowClose: false,
    overlayClickNext: true,
    keyboardControl: true,
    stageBackground: '#ffffff',
    nextBtnText: 'Далее',
    prevBtnText: 'Назад',
    closeBtnText: 'Закрыть',
    doneBtnText: 'Готово',
});

Ключевые параметры и их смысл:

  • animate — отвечает за плавную анимацию подсветки выбранных элементов. true включает анимацию, false делает переключение мгновенным.
  • opacity — задает прозрачность оверлея, который затемняет фон. Значение находится в диапазоне 0.0–1.0.
  • padding — внутренний отступ вокруг подсвечиваемого элемента. Позволяет создать визуальный «воздушный» эффект и отделить элемент от затемненного фона.
  • allowClose — блокирует или разрешает пользователю закрывать тур по клику на крестик.
  • overlayClickNext — если true, клик по затемненному фону продвигает тур к следующему шагу.
  • keyboardControl — включает управление с клавиатуры: стрелки «влево/вправо» для перехода между шагами, Esc для выхода.
  • stageBackground — цвет фона подсветки элемента. Позволяет выделить элемент не только рамкой, но и цветом.
  • nextBtnText, prevBtnText, closeBtnText, doneBtnText — настраиваемые тексты для кнопок навигации. Это особенно полезно для локализации интерфейса.

Настройка оверлея и подсветки элементов

Driver.js предоставляет возможность гибко управлять визуальной частью тура через глобальные настройки. Примеры параметров:

  • overlayClickNext: true — упрощает навигацию, позволяя пользователю кликать по затемнённой области.
  • opacity: 0.5 — снижает нагрузку на глаза при длительном взаимодействии, делая фон полупрозрачным.
  • stageBackground: ‘#f0f0f0’ — позволяет визуально отделить элемент от остальной страницы, что улучшает фокусировку.
  • padding: 20 — создаёт отступ вокруг элемента, чтобы пользователь мог видеть контекст вокруг него, не теряя подсветку.

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

Настройка навигации и управления туром

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

  • allowClose и closeBtnText — контролируют возможность завершения тура в любой момент. Если allowClose: false, кнопка закрытия будет недоступна.
  • nextBtnText / prevBtnText / doneBtnText — задают единый стиль текста на всех шагах, облегчая локализацию и поддержание единообразия.
  • keyboardControl: true — обеспечивает удобство для пользователей, предпочитающих клавиатурное управление.
  • overlayClickNext — позволяет пользователю переходить к следующему шагу без необходимости поиска кнопки «Далее», повышая интерактивность.

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

Анимация и визуальные эффекты

Параметр animate управляет плавностью появления и перемещения подсветки. Настройка true создаёт эффект «перетекания» между шагами, что визуально более приятно для пользователя. При значении false подсветка мгновенно перемещается к новому элементу, что может быть полезно для динамичных интерфейсов или тестирования.

Глобальные настройки также позволяют определить единый стиль всех подсветок, например:

const driver = new Driver({
    animate: true,
    opacity: 0.8,
    stageBackground: '#fffae6',
    padding: 15,
});

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

Локализация и адаптация интерфейса

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

const driver = new Driver({
    nextBtnText: 'Следующий',
    prevBtnText: 'Предыдущий',
    closeBtnText: 'Закрыть',
    doneBtnText: 'Завершить',
});

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

Влияние глобальных настроек на шаги тура

Глобальные настройки задают стандартное поведение всех шагов тура. Если для отдельного шага необходимо изменить параметры, это делается через объект шага:

driver.defineSteps([
    {
        element: '#button1',
        popover: {
            title: 'Кнопка 1',
            description: 'Это пример кнопки с переопределением padding.',
        },
        padding: 30  // переопределяет глобальный padding
    },
    {
        element: '#input1',
        popover: {
            title: 'Поле ввода',
            description: 'Используется глобальный padding и stageBackground',
        }
    }
]);

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

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

Оглавление