Статические методы

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

Основные статические методы

Driver.highlight(selector, options)

Метод highlight используется для выделения конкретного элемента на странице без запуска полноценного интерактивного тура.

Параметры:

  • selector — строка CSS-селектора или DOM-элемент, который требуется подсветить.

  • options — объект с настройками подсветки:

    • padding — отступ вокруг элемента (по умолчанию 10px).
    • overlayClickNext — позволяет переходить к следующему шагу при клике на затемнённую область (true/false).
    • animate — включение анимации появления подсветки (true/false).

Пример использования:

Driver.highlight('#login-button', {
  padding: 15,
  overlayClickNext: false,
  animate: true
});

Данный метод создает временную подсветку, которая автоматически исчезает через стандартное время, если не задано иное.

Driver.reset()

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

Пример:

Driver.reset();

После вызова reset все активные подсветки удаляются, а класс driver-disabled снимается со страницы.

Driver.startTour(steps, options)

Статический метод для запуска нового тура без предварительного создания экземпляра Driver.

Параметры:

  • steps — массив объектов шагов, каждый из которых имеет свойства:

    • element — селектор или DOM-элемент.

    • popover — объект с настройками подсказки:

      • title — заголовок подсказки.
      • description — текст подсказки.
      • position — позиция относительно элемента (top, bottom, left, right).

  • options — глобальные настройки тура, например:

    • animate — включение анимации для всех шагов.
    • allowClose — возможность закрытия тура пользователем.

Пример:

Driver.startTour([
  {
    element: '#search-input',
    popover: {
      title: 'Поле поиска',
      description: 'Введите здесь текст для поиска',
      position: 'bottom'
    }
  },
  {
    element: '#submit-button',
    popover: {
      title: 'Кнопка отправки',
      description: 'Нажмите для выполнения поиска',
      position: 'right'
    }
  }
], {
  animate: true,
  allowClose: true
});

Этот метод объединяет создание, настройку и запуск тура в одном вызове, что удобно для быстрого внедрения интерактивного обучения.

Driver.isActive()

Возвращает логическое значение, показывающее, активен ли в данный момент какой-либо тур или подсветка.

Пример:

if (!Driver.isActive()) {
  Driver.highlight('#profile-avatar');
}

Метод полезен для предотвращения конфликтов между несколькими одновременно запущенными подсветками или турами.

Driver.moveNext() и Driver.movePrevious()

Позволяют управлять шагами активного тура глобально, без создания экземпляра:

  • Driver.moveNext() — переход к следующему шагу.
  • Driver.movePrevious() — переход к предыдущему шагу.

Пример:

document.querySelector('#next-step').addEventListener('click', () => {
  Driver.moveNext();
});

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

Особенности использования статических методов

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

Настройка глобальных параметров

Статические методы поддерживают передачу опций по умолчанию через Driver.defaults:

Driver.defaults = {
  animate: true,
  allowClose: false,
  padding: 20
};

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

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

Оглавление