Переопределение глобальных параметров

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

Основные глобальные параметры

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

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

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

  • animate — включает или отключает анимацию при переходе между шагами.
  • opacity — задает уровень прозрачности затемнения фона вокруг выделяемого элемента.
  • padding — внутренний отступ вокруг элемента, выделяемого рамкой.
  • stageBackground — цвет фона всплывающей подсказки.
  • nextBtnText, prevBtnText, closeBtnText — подписи кнопок навигации.
  • allowClose — разрешает закрытие подсказки кликом вне элемента или кнопкой «Закрыть».
  • keyboardControl — управление шагами через клавиши стрелок и Escape.

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

Локальное переопределение параметров шага

Каждый шаг может иметь собственные настройки, которые перекрывают глобальные:

driver.defineSteps([
    {
        element: '#menu',
        popover: {
            title: 'Меню',
            description: 'Содержит основные разделы сайта',
            position: 'bottom',
            nextBtnText: 'Вперёд',
            stageBackground: '#f0f0f0'
        }
    },
    {
        element: '#search',
        popover: {
            title: 'Поиск',
            description: 'Введите ключевое слово для поиска',
            position: 'top'
        }
    }
]);

Особенности локального переопределения:

  • Параметры, указанные внутри popover, заменяют глобальные настройки только для конкретного шага.
  • Неуказанные локально параметры наследуют значения из глобального объекта конфигурации.
  • Переопределение может касаться как визуальных свойств (stageBackground, padding), так и текстов кнопок (nextBtnText).

Динамическое обновление глобальных параметров

Driver.js позволяет менять глобальные параметры на лету после создания экземпляра. Для этого используется метод setOptions:

driver.setOptions({
    opacity: 0.85,
    animate: false,
    stageBackground: '#222222'
});

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

Использование функций для вычисляемых параметров

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

const driver = new Driver({
    padding: () => window.innerWidth < 768 ? 5 : 15,
    stageBackground: () => {
        return document.body.classList.contains('dark-mode') ? '#333' : '#fff';
    }
});

Преимущества такого подхода:

  • Поддержка адаптивного дизайна без изменения кода шагов.
  • Динамическая настройка цвета и отступов в зависимости от состояния страницы.
  • Возможность интеграции с внешними настройками интерфейса, такими как темы или пользовательские предпочтения.

Советы по организации глобальных параметров

  1. Минимизировать локальные переопределения — это упрощает поддержку кода.
  2. Использовать функции для динамических значений — повышает гибкость адаптации интерфейса.
  3. Группировать визуальные параметры (opacity, padding, stageBackground) отдельно от поведенческих (animate, keyboardControl, allowClose) — улучшает читаемость и понимание конфигурации.
  4. Следить за согласованностью текстов кнопок — глобальные подписи должны соответствовать языку интерфейса.

Комбинация глобальных и локальных настроек

Driver.js поддерживает иерархию параметров:

  1. Локальные значения в popover шага.
  2. Параметры, заданные через setOptions.
  3. Глобальные параметры, переданные при создании экземпляра.

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

Пример комплексного применения

const driver = new Driver({
    animate: true,
    opacity: 0.7,
    padding: 10,
    stageBackground: '#ffffff',
    nextBtnText: 'Далее',
    prevBtnText: 'Назад',
    closeBtnText: 'Закрыть',
});

driver.defineSteps([
    {
        element: '#header',
        popover: {
            title: 'Заголовок',
            description: 'Основная навигация сайта',
            position: 'bottom',
        }
    },
    {
        element: '#profile',
        popover: {
            title: 'Профиль',
            description: 'Настройки и информация о пользователе',
            position: 'left',
            nextBtnText: 'Следующий шаг',
            stageBackground: '#e0f7fa'
        }
    }
]);

driver.start();

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

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

Оглавление