onDeselected

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

Синтаксис

driver.defineSteps([
  {
    element: '#myElement',
    popover: {
      title: 'Заголовок',
      description: 'Описание шага'
    },
    onDeselected: (element) => {
      // Логика при отмене выделения
    }
  }
]);
  • element — селектор или DOM-узел, к которому применяется шаг.
  • popover — объект с заголовком и описанием шага.
  • onDeselected — функция, вызываемая при снятии выделения с элемента. Аргумент element содержит DOM-узел текущего шага.

Практическое использование

  1. Сброс состояния элементов После того как элемент теряет выделение, может потребоваться вернуть его в исходное состояние. Например:
onDeselected: (element) => {
  element.style.border = '';
  element.classList.remove('highlighted');
}
  1. Анимации при уходе с шага Можно запускать плавные анимации или эффекты при отмене выделения:
onDeselected: (element) => {
  element.style.transition = 'opacity 0.5s';
  element.style.opacity = '0.5';
}
  1. Синхронизация с внешними компонентами Для интерфейсов с динамическим контентом можно уведомлять другие части приложения о том, что элемент больше не активен:
onDeselected: (element) => {
  dispatchEvent(new CustomEvent('tourStepDeselected', { detail: element.id }));
}

Отличия от onNext и onPrevious

Метод onDeselected отличается от onNext и onPrevious тем, что срабатывает именно при снятии фокуса с элемента, а не при переходе к следующему шагу тура. Это позволяет выполнять операции локально для конкретного элемента, не привязываясь к последовательности шагов.

Особенности работы с динамическими DOM

Если элемент может исчезать или изменяться в DOM во время тура, использование onDeselected позволяет безопасно обрабатывать снятие выделения:

onDeselected: (element) => {
  if (document.body.contains(element)) {
    element.style.backgroundColor = '';
  }
}

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

Примеры сочетаний с другими коллбеками

Часто onDeselected комбинируют с onHighlighted и onReset для полного контроля над элементами тура:

driver.defineSteps([
  {
    element: '#inputField',
    popover: { title: 'Поле ввода', description: 'Введите текст здесь' },
    onHighlighted: (el) => el.classList.add('highlighted'),
    onDeselected: (el) => el.classList.remove('highlighted'),
    onReset: (el) => el.value = ''
  }
]);

В этом примере onHighlighted добавляет визуальное выделение, onDeselected убирает его при уходе с элемента, а onReset очищает данные при полном завершении тура.

Оглавление