Обработка пользовательских действий

SweetAlert предоставляет гибкие механизмы для обработки действий пользователя, которые происходят в рамках модальных окон. Пользовательские действия могут быть разнообразными: нажатие кнопок, закрытие окна или выбор других элементов интерфейса. Эти действия можно отслеживать и использовать для выполнения различных задач в приложении. Работа с такими событиями является важной частью интеграции SweetAlert в проекты, где требуется динамичное взаимодействие с пользователем.

Обработка кликов на кнопки

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

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

Пример:

Swal.fire({
  title: 'Вы уверены?',
  text: 'Это действие нельзя будет отменить!',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Да',
  cancelButtonText: 'Отмена'
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Пользователь подтвердил действие');
    // Выполнение действия, если пользователь нажал "Да"
  } else if (result.dismiss === Swal.DismissReason.cancel) {
    console.log('Пользователь отменил действие');
    // Действие при нажатии "Отмена"
  }
});

В данном примере определены две кнопки: подтверждения и отмены. Свойство result.isConfirmed позволяет узнать, была ли нажата кнопка подтверждения, а свойство result.dismiss — если окно было закрыто без подтверждения, например, при нажатии кнопки отмены.

Отслеживание закрытия модального окна

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

SweetAlert поддерживает несколько типов закрытия окна. Важно правильно настроить обработчик событий для каждого из них.

Пример:

Swal.fire({
  title: 'Информация',
  text: 'Это уведомление закроется автоматически через 3 секунды.',
  timer: 3000,
}).then((result) => {
  if (result.dismiss === Swal.DismissReason.timer) {
    console.log('Окно закрылось автоматически по таймеру');
  }
});

Здесь окно закрывается автоматически через 3 секунды благодаря параметру timer. Когда окно закрывается, результатом становится Swal.DismissReason.timer, что позволяет обработать такие случаи.

Другие способы закрытия окна могут включать клик вне окна или нажатие клавиши Esc. В этих случаях будет возвращён Swal.DismissReason.backdrop или Swal.DismissReason.esc, соответственно.

Использование кастомных кнопок

Иногда возникает необходимость создать кастомные кнопки с уникальным поведением. Для этого можно использовать параметры confirmButtonText и cancelButtonText, которые позволяют задать собственный текст для кнопок. Также можно добавлять дополнительные кнопки с помощью параметра buttons в конфигурации.

Пример:

Swal.fire({
  title: 'Вы хотите продолжить?',
  text: 'Вы не сможете отменить это действие.',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Да, продолжить',
  cancelButtonText: 'Отмена',
  buttons: [
    {
      text: 'Другой вариант',
      onClick: () => console.log('Вы выбрали альтернативу')
    }
  ]
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Пользователь подтвердил');
  } else if (result.isDismissed) {
    console.log('Пользователь отменил');
  }
});

Работа с асинхронными действиями

В некоторых случаях обработка пользовательских действий требует выполнения асинхронных операций, таких как запросы к серверу или задержки перед выполнением определённых действий. Для таких случаев SweetAlert имеет встроенную поддержку промисов, что позволяет легко интегрировать асинхронные операции в логику обработки событий.

Используя async/await вместе с SweetAlert, можно построить более сложные цепочки действий, в которых пользовательская реакция на модальное окно будет влиять на дальнейшее выполнение программы.

Пример:

async function showAlert() {
  const result = await Swal.fire({
    title: 'Загрузка...',
    text: 'Ожидайте, пока мы получим данные.',
    showConfirmButton: false,
    didOpen: () => {
      Swal.showLoading();
    }
  });

  // Асинхронный запрос или операция
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();

  Swal.update({
    title: 'Данные получены',
    text: `Загружено ${data.length} элементов.`,
    showConfirmButton: true
  });
}

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

Отслеживание других действий пользователя

Кроме нажатия кнопок и закрытия окна, SweetAlert также позволяет отслеживать другие действия, например, ввод текста в форму. Для этого можно использовать модальное окно с полем ввода, которое автоматически отправляет данные, если пользователь нажал на кнопку “Ок” или нажал клавишу Enter.

Пример:

Swal.fire({
  title: 'Введите ваше имя',
  input: 'text',
  inputPlaceholder: 'Ваше имя',
  showCancelButton: true
}).then((result) => {
  if (result.isConfirmed) {
    console.log(`Пользователь ввёл: ${result.value}`);
  }
});

В данном случае результатом будет строка, введённая пользователем. Свойство result.value содержит введённое значение, которое можно использовать в дальнейшем в логике приложения.

Кастомизация кнопок и обработка событий

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

Можно программно изменять текст кнопок, их стиль или полностью скрывать/показывать их в процессе работы с модальным окном.

Пример:

Swal.fire({
  title: 'Вы хотите сохранить изменения?',
  text: 'Это действие можно отменить.',
  showCancelButton: true,
  confirmButtonText: 'Сохранить',
  cancelButtonText: 'Отмена',
  didOpen: () => {
    Swal.getConfirmButton().style.backgroundColor = '#28a745';
    Swal.getCancelButton().style.backgroundColor = '#dc3545';
  }
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Изменения сохранены');
  } else {
    console.log('Действие отменено');
  }
});

Здесь на этапе didOpen настраиваются стили кнопок, чтобы визуально выделить кнопки для подтверждения и отмены.

Заключение

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