Блокировка навигации

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

Опция canClickTarget

Ключевой инструмент для контроля навигации — свойство canClickTarget. Оно задаётся на уровне шага и определяет, может ли пользователь перейти к следующему шагу, кликая на элемент на странице. Тип значения — булевый (true/false) или функция, возвращающая булево значение.

Пример использования:

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

tour.addStep({
  id: 'step1',
  text: 'Нажмите кнопку для продолжения',
  attachTo: {
    element: '#myButton',
    on: 'bottom'
  },
  canClickTarget: false, // блокируем переход по клику на элемент
  buttons: [
    {
      text: 'Продолжить',
      action: tour.next
    }
  ]
});

tour.start();

В данном примере пользователь не сможет перейти к следующему шагу, кликая по кнопке, пока не нажмёт кнопку Продолжить.

Динамическая блокировка с функцией

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

tour.addStep({
  id: 'step2',
  text: 'Введите текст в поле',
  attachTo: {
    element: '#inputField',
    on: 'top'
  },
  canClickTarget: () => {
    const input = document.querySelector('#inputField');
    return input.value.trim() !== ''; // блокируем, пока поле пустое
  },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

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

Контроль кнопок навигации

Кроме клика по элементу, навигацию можно ограничивать через кастомные кнопки с помощью функции enabled или программной проверки:

tour.addStep({
  id: 'step3',
  text: 'Согласитесь с условиями',
  attachTo: {
    element: '#termsCheckbox',
    on: 'right'
  },
  buttons: [
    {
      text: 'Далее',
      action: tour.next,
      enabled: false
    }
  ]
});

const checkbox = document.querySelector('#termsCheckbox');
checkbox.addEventListener('change', () => {
  const button = document.querySelector('.shepherd-button');
  button.disabled = !checkbox.checked; // динамически включаем кнопку
});

Таким образом, пользователь не сможет нажать кнопку Далее, пока не выполнит условие.

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

Shepherd.js позволяет подписываться на события шага, что позволяет блокировать навигацию программно:

tour.on('before-show', (event) => {
  const step = event.step;
  if (step.id === 'step4') {
    const conditionMet = checkSomeCondition();
    if (!conditionMet) {
      event.preventDefault(); // предотвращает показ шага
    }
  }
});

Метод event.preventDefault() полностью останавливает переход к шагу, пока условие не будет выполнено.

Управление шагами через advanceOn

Иногда блокировка должна зависеть не только от клика или кнопки, а от определённого события DOM. В этом случае используется параметр advanceOn:

tour.addStep({
  id: 'step5',
  text: 'Нажмите любую кнопку для продолжения',
  attachTo: {
    element: '#actionButton',
    on: 'bottom'
  },
  advanceOn: {
    selector: '#actionButton',
    event: 'click'
  }
});

Здесь шаг автоматически продвигается только при срабатывании события click на элементе #actionButton, исключая любую другую навигацию.

Практические рекомендации

  • Минимизировать автоматическое продвижение. Блокировка навигации повышает контроль над пользовательским опытом и предотвращает случайное пропускание шагов.
  • Использовать динамические функции. Вместо статических значений предпочтительно использовать функции, проверяющие актуальное состояние интерфейса.
  • Комбинировать с before-show и before-hide. Это позволяет гибко управлять шагами и предотвращать ошибки при сложных взаимодействиях.
  • Визуально сигнализировать блокировку. Если элемент заблокирован, полезно изменять стиль кнопки или добавлять подсказку, чтобы пользователь понимал причину.

Вывод

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

Оглавление