before-hide

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

Основы работы с before-hide

Каждый шаг Shepherd.js поддерживает возможность подписки на события через объект конфигурации или метод .on(). before-hide срабатывает до того, как шаг будет скрыт, и предоставляет контекст шага, что позволяет получить доступ к его свойствам, элементам DOM и методам.

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

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

tour.addStep({
  id: 'example-step',
  text: 'Это пример шага.',
  attachTo: {
    element: '#example-element',
    on: 'bottom'
  },
  buttons: [
    {
      text: 'Закрыть',
      action() {
        tour.next();
      }
    }
  ],
  beforeHide() {
    console.log('Шаг готов к скрытию');
  }
});

В этом примере функция beforeHide вызывается перед тем, как шаг будет скрыт. Это удобное место для выполнения:

  • Валидации пользовательских данных: проверка введённой информации или выбора опций.
  • Записи аналитики: фиксация факта, что пользователь дошёл до этого шага.
  • Условного предотвращения закрытия шага: при необходимости шаг может не скрываться, если условие не выполнено.

Использование before-hide с методом .on()

Событие также можно подписывать через метод .on(), что полезно, если требуется динамическое управление шагом после его создания:

const step = tour.addStep({
  id: 'dynamic-step',
  text: 'Динамический шаг',
  attachTo: { element: '#dynamic', on: 'top' },
});

step.on('before-hide', () => {
  console.log('Перед скрытием динамического шага');
});

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

Контроль предотвращения скрытия шага

Функция before-hide может вернуть false, чтобы остановить скрытие шага. Это особенно полезно для проверки условий:

tour.addStep({
  id: 'validation-step',
  text: 'Введите корректные данные для продолжения.',
  buttons: [
    {
      text: 'Далее',
      action() {
        tour.next();
      }
    }
  ],
  beforeHide() {
    const input = document.querySelector('#user-input');
    if (!input.value.trim()) {
      alert('Поле не должно быть пустым!');
      return false; // шаг не скрывается
    }
    return true; // шаг скрывается
  }
});

В данном примере шаг не будет скрыт, пока пользователь не введёт данные. Возврат false предотвращает вызов метода скрытия шага и последующих шагов тура.

Взаимодействие с другими событиями Shepherd.js

before-hide тесно интегрируется с другими событиями шагов:

  • show – вызывается при отображении шага.
  • hide – вызывается после фактического скрытия шага.
  • cancel – срабатывает при отмене шага или тура.

Использование before-hide позволяет поместить логику проверки и подготовки прямо перед скрытием, оставляя hide для выполнения последующих действий, например анимации или записи состояния шага.

Практические сценарии применения

  1. Валидация форм: предотвращение закрытия шага до ввода данных.
  2. Аналитика и трекинг: фиксация прогресса пользователя в туре.
  3. Анимации и переходы: подготовка DOM перед исчезновением шага.
  4. Условная навигация: выбор следующего шага в зависимости от состояния приложения.

Рекомендации по использованию

  • Использовать before-hide для логики, требующей синхронного выполнения.
  • Для асинхронной проверки применять промисы с обработкой внутри действия кнопок, так как возвращение false не работает с асинхронными функциями.
  • Сохранять чистоту конфигурации шага, отделяя обработку событий от визуальных и текстовых параметров.
  • Проверять корректность работы с DOM: элемент может быть удалён или скрыт к моменту срабатывания before-hide.

Заключение по использованию

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

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

Оглавление