События отдельных шагов

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

Настройка событий шага

Каждый шаг описывается объектом с набором свойств, включая onNext, onPrevious, onShow, onClose и другие. Эти функции вызываются только для конкретного шага, что позволяет отдельно обрабатывать действия пользователя на каждом элементе интерфейса.

Пример конфигурации шага с событиями:

const steps = [
  {
    element: '#menuButton',
    popover: {
      title: 'Меню',
      description: 'Кнопка открытия главного меню',
      position: 'bottom'
    },
    onShow: function() {
      console.log('Шаг с меню показан');
    },
    onNext: function() {
      console.log('Пользователь нажал "Далее" на шаге меню');
    },
    onClose: function() {
      console.log('Шаг меню закрыт');
    }
  },
  {
    element: '#searchInput',
    popover: {
      title: 'Поиск',
      description: 'Поле поиска по сайту',
      position: 'right'
    },
    onShow: function() {
      console.log('Шаг поиска показан');
    }
  }
];

onShow – вызывается в момент появления шага. Используется для динамической подгрузки контента, подсветки элемента или запуска анимации.
onNext – срабатывает при переходе к следующему шагу через кнопку «Далее». Можно использовать для валидации действий пользователя.
onPrevious – вызывается при возврате к предыдущему шагу. Часто используется для восстановления состояния интерфейса.
onClose – срабатывает при закрытии текущего шага или всего драйвера. Применяется для очистки временных изменений.

Асинхронные события

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

{
  element: '#loadButton',
  popover: { title: 'Загрузка', description: 'Нажмите для загрузки данных' },
  onNext: async function() {
    await fetchDataFromServer();
    console.log('Данные загружены, можно переходить к следующему шагу');
  }
}

При использовании async/await переход к следующему шагу будет ожидать завершения асинхронной функции.

События для управления состоянием интерфейса

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

{
  element: '#profileAvatar',
  popover: { title: 'Аватар', description: 'Ваш профиль' },
  onShow: function() {
    this.highlightElement(true);
  },
  onClose: function() {
    this.highlightElement(false);
  }
}

Метод highlightElement можно реализовать самостоятельно, изменяя CSS класса элемента для визуального эффекта.

Прерывание шага через событие

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

{
  element: '#submitButton',
  popover: { title: 'Отправка формы', description: 'Нажмите для отправки' },
  onNext: function() {
    if (!isFormValid()) {
      alert('Форма не заполнена');
      return false; // Переход к следующему шагу блокируется
    }
  }
}

Возврат false в onNext останавливает движение Driver.js до выполнения необходимого условия.

События с доступом к объекту Driver

Внутри функций событий можно обращаться к текущему экземпляру Driver через контекст this, что позволяет:

запускать следующий или предыдущий шаг вручную (this.moveNext(), this.movePrevious()),
закрывать руководство (this.stop()),
получать текущий индекс шага (this.getCurrentStep()).

Пример управления из события:

{
  element: '#notification',
  popover: { title: 'Уведомления', description: 'Все уведомления здесь' },
  onShow: function() {
    if (!userHasNotifications()) {
      this.moveNext(); // пропустить шаг при отсутствии уведомлений
    }
  }
}

События и пользовательские кнопки

Driver.js позволяет добавлять свои кнопки в поповер шага и привязывать к ним события через объект buttons. Это расширяет возможности реакций на действия пользователя:

{
  element: '#settingsIcon',
  popover: {
    title: 'Настройки',
    description: 'Настройте параметры',
    buttons: [
      {
        text: 'Открыть',
        action: function() {
          openSettingsPanel();
          this.moveNext();
        }
      },
      {
        text: 'Пропустить',
        action: function() {
          this.moveNext();
        }
      }
    ]
  }
}

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