isActive

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

Синтаксис

const active = tour.getCurrentStep().isActive();
  • tour — объект Shepherd.Tour.
  • getCurrentStep() — метод, возвращающий текущий шаг тура.
  • isActive() — метод шага, возвращающий true, если шаг активен, и false, если неактивен.

Применение

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

Часто требуется условно выполнять действия только для активного шага:

const step = tour.getCurrentStep();
if (step.isActive()) {
    console.log("Шаг активен");
} else {
    console.log("Шаг неактивен");
}

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

Управление поведением шагов

isActive позволяет условно запускать анимации или взаимодействия с элементами DOM только тогда, когда шаг активен:

const step = tour.getCurrentStep();

if (step.isActive()) {
    step.show(); // показываем шаг, если он активен
    document.querySelector("#highlight").classList.add("active-highlight");
} else {
    document.querySelector("#highlight").classList.remove("active-highlight");
}

Таким образом обеспечивается синхронизация визуальных эффектов с реальным состоянием тура.

Взаимодействие с событиями

Методы on, once и off для событий Shepherd.js можно комбинировать с проверкой isActive:

tour.on('show', () => {
    const step = tour.getCurrentStep();
    if (step.isActive()) {
        console.log("Активный шаг появился на экране");
    }
});

tour.on('complete', () => {
    const step = tour.getCurrentStep();
    if (!step.isActive()) {
        console.log("Шаг завершён и больше не активен");
    }
});

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

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

  1. Динамическая подсветка элементов isActive позволяет подсвечивать элементы только когда соответствующий шаг виден, предотвращая конфликты с другими элементами страницы.

  2. Условная навигация Можно блокировать переход к следующему шагу, если текущий шаг не активен:

const step = tour.getCurrentStep();
if (!step.isActive()) {
    tour.back(); // возвращаемся к предыдущему шагу
}
  1. Отложенная инициализация контента При работе с ленивой загрузкой данных можно инициализировать компоненты только для активного шага, экономя ресурсы:
const step = tour.getCurrentStep();
if (step.isActive()) {
    initializeChart("#chart-container");
}

Особенности поведения

  • isActive возвращает true только для шага, который отображается в данный момент.
  • Для шагов, созданных, но ещё не показанных, значение будет false.
  • После закрытия шага или завершения тура метод также возвращает false.
  • Использование isActive в комбинации с событиями show и hide позволяет отслеживать переходы между шагами и управлять динамическим содержимым.

Пример полного сценария

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-arrows',
    scrollTo: true
  }
});

tour.addStep({
  id: 'intro',
  text: 'Добро пожаловать в тур!',
  attachTo: { element: '#start', on: 'bottom' },
  buttons: [
    { text: 'Далее', action: tour.next }
  ]
});

tour.on('show', () => {
  const step = tour.getCurrentStep();
  if (step.isActive()) {
    console.log(`Показываем шаг: ${step.id}`);
    document.querySelector('#start').classList.add('highlight');
  }
});

tour.on('hide', () => {
  const step = tour.getCurrentStep();
  if (!step.isActive()) {
    document.querySelector('#start').classList.remove('highlight');
  }
});

tour.start();

В этом примере проверка isActive гарантирует, что подсветка элемента будет включена только для реально отображаемого шага, а при скрытии — отключена.

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

Оглавление