onHighlighted

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

Синтаксис и назначение

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

const driver = new Driver({
  onHighlighted: function(element) {
    console.log('Элемент подсвечен:', element);
    // дополнительные действия
  }
});

driver.defineSteps([
  {
    element: '#button1',
    popover: {
      title: 'Кнопка запуска',
      description: 'Нажмите эту кнопку, чтобы начать процесс',
      position: 'bottom'
    }
  },
  {
    element: '#input1',
    popover: {
      title: 'Поле ввода',
      description: 'Введите здесь ваши данные',
      position: 'top'
    }
  }
]);

driver.start();
  • element — DOM-элемент, который в данный момент подсвечен.
  • Функция может содержать произвольную логику: изменение стилей, запуск анимаций, обновление состояния интерфейса.

Особенности работы

  1. Срабатывает синхронно с подсветкой элемента onHighlighted вызывается сразу после того, как элемент становится активным. Это гарантирует, что все визуальные эффекты, связанные с подсветкой, уже применены.

  2. Используется для динамических элементов Если элементы страницы создаются или изменяются динамически, можно использовать onHighlighted для проверки существования элемента или обновления его контента перед отображением подсказки.

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

Примеры практического применения

Изменение стилей подсвеченного элемента

onHighlighted: function(element) {
  element.style.border = '2px solid red';
  element.style.transition = 'border 0.3s ease-in-out';
}

Такой подход позволяет временно выделять элемент визуально, не нарушая основной темы интерфейса.

Активация дополнительных анимаций

onHighlighted: function(element) {
  const tooltip = element.querySelector('.tooltip');
  if (tooltip) {
    tooltip.classList.add('fade-in');
  }
}

Можно создавать эффекты плавного появления элементов, связанных с подсвечиваемым объектом.

Взаимодействие с внешними библиотеками

onHighlighted: function(element) {
  myChart.updateData(element.dataset.chartId);
}

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

Рекомендации по использованию

  • Не использовать тяжелые синхронные операции внутри обработчика, чтобы не замедлять анимацию подсветки.
  • Проверять существование элемента, особенно если DOM динамический.
  • Комбинировать с другими событиями Driver.js (onNext, onReset, onDestroy) для создания полноценного интерактивного руководства.

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

Оглавление