Инспектирование состояния

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

Работа с шагами и их состояниями

Каждый шаг тура в Shepherd.js представлен объектом с набором свойств, таких как id, text, attachTo, buttons и when. Для инспектирования состояния важно понимать несколько ключевых свойств:

  • enabled — определяет, активен ли шаг.
  • hidden — контролирует видимость шага.
  • beforeShowPromise — позволяет выполнять асинхронные действия перед отображением шага.

Пример динамического изменения шага в зависимости от состояния:

const tour = new Shepherd.Tour({
  useModalOverlay: true
});

tour.addStep({
  id: 'step-1',
  text: 'Это первый шаг',
  attachTo: { element: '#button1', on: 'bottom' },
  when: {
    show: () => console.log('Шаг отображен'),
    hide: () => console.log('Шаг скрыт')
  },
  beforeShowPromise: () => {
    return new Promise((resolve) => {
      if (document.querySelector('#button1').disabled) {
        resolve(); // Шаг будет показан даже если кнопка disabled
      } else {
        resolve();
      }
    });
  }
});

Здесь beforeShowPromise обеспечивает проверку состояния элемента перед отображением шага.

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

Shepherd.js предоставляет обширный набор событий, которые позволяют отслеживать состояние как всего тура, так и отдельных шагов:

  • start — запуск тура.
  • complete — завершение тура.
  • cancel — отмена тура пользователем.
  • show — отображение шага.
  • hide — скрытие шага.
  • active — шаг становится активным.
  • inactive — шаг теряет активность.

Пример логирования состояния шагов:

tour.on('show', (event) => {
  console.log(`Показан шаг: ${event.step.id}`);
});

tour.on('hide', (event) => {
  console.log(`Скрыт шаг: ${event.step.id}`);
});

Использование этих событий позволяет инспектировать состояние тура в реальном времени и принимать решения о следующем шаге.

Получение текущего состояния тура

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

const currentStep = tour.getCurrentStep();
console.log('Текущий шаг:', currentStep ? currentStep.id : 'нет активного шага');

tour.steps.forEach(step => {
  console.log(`Шаг: ${step.id}, видим: ${step.isOpen()}, активен: ${step.isActive()}`);
});

Методы isOpen() и isActive() позволяют определить, отображается ли шаг на экране и является ли он активным в данный момент.

Динамическое управление состоянием шагов

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

const step2 = tour.addStep({
  id: 'step-2',
  text: 'Второй шаг',
  attachTo: { element: '#input1', on: 'right' },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

// Отключение шага при определенном условии
if (!document.querySelector('#input1').value) {
  step2.disable();
} else {
  step2.enable();
}

Методы enable(), disable(), show(), hide() позволяют контролировать состояние шага динамически.

Использование условий для перехода между шагами

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

tour.addStep({
  id: 'step-3',
  text: 'Шаг с условием',
  attachTo: { element: '#checkbox1', on: 'left' },
  buttons: [
    {
      text: 'Следующий',
      action: function() {
        const checked = document.querySelector('#checkbox1').checked;
        if (checked) {
          tour.show('step-4');
        } else {
          tour.show('step-5');
        }
      }
    }
  ]
});

Это позволяет создавать адаптивные туры, реагирующие на действия пользователя.

Проверка состояния всех шагов

Для комплексной инспекции можно собрать состояние всех шагов и использовать для аналитики или динамического построения интерфейса:

const stepsState = tour.steps.map(step => ({
  id: step.id,
  open: step.isOpen(),
  active: step.isActive(),
  disabled: step.disabled
}));

console.table(stepsState);

Вывод в таблицу дает наглядное представление о состоянии всех шагов тура.

Итоговое использование инспекции состояния

Комбинация методов isOpen(), isActive(), enable(), disable(), событий show и hide, а также beforeShowPromise позволяет:

  • Отслеживать состояние каждого шага и всего тура.
  • Управлять динамическим поведением шагов.
  • Реализовать условные переходы и адаптивные руководства.
  • Интегрировать тур с логикой интерфейса и данными пользователя.

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

Оглавление