Таймер с визуализацией

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

Основы работы с таймером

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

Визуализация прогресса с использованием timerProgressBar

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

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

Swal.fire({
  title: 'Процесс завершится через 3 секунды',
  text: 'Этот процесс завершится автоматически.',
  timer: 3000, // Таймер на 3 секунды
  timerProgressBar: true, // Включение прогресс-бара
  didOpen: () => {
    Swal.showLoading();
  },
});

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

Обработка завершения таймера

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

Пример:

Swal.fire({
  title: 'Завершение процесса',
  text: 'Ожидайте завершения операции.',
  timer: 5000,
  timerProgressBar: true,
  didOpen: () => {
    Swal.showLoading();
  },
  didClose: () => {
    console.log('Таймер завершён. Можно выполнить дополнительные действия.');
    // Здесь можно вызвать дополнительные функции, например, перезагрузку страницы или переход на новый экран
  },
});

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

Таймер с анимацией и пользовательский стиль

SweetAlert также позволяет настроить внешний вид прогресс-бара и добавить анимацию. Можно изменить стиль баров, их цвет или добавить кастомную анимацию с помощью CSS. Для этого используется комбинация встроенных классов и стилизованных элементов.

Пример с кастомным стилем:

Swal.fire({
  title: 'Ожидайте...',
  text: 'Таймер завершится через 5 секунд',
  timer: 5000,
  timerProgressBar: true,
  customClass: {
    popup: 'custom-popup', // Применяем кастомные стили к попапу
    title: 'custom-title',
    icon: 'custom-icon',
    closeButton: 'custom-close-button',
  },
  didOpen: () => {
    Swal.showLoading();
  },
});

Для кастомизации стилей можно использовать следующие CSS-правила:

.custom-popup {
  border-radius: 15px;
  background-color: #f0f0f0;
}

.custom-title {
  font-size: 20px;
  color: #333;
}

.custom-icon {
  color: #ff6347;
}

.custom-close-button {
  background-color: #ff6347;
  border-radius: 50%;
}

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

Динамический таймер

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

Пример динамического таймера:

let remainingTime = 10000; // Изначальное время 10 секунд
const interval = setInterval(() => {
  remainingTime -= 1000; // Уменьшаем на 1 секунду каждую итерацию
  Swal.update({
    title: `Ожидайте... Осталось ${remainingTime / 1000} секунд`,
    timer: remainingTime,
  });
  if (remainingTime <= 0) {
    clearInterval(interval);
  }
}, 1000);

Swal.fire({
  title: `Ожидайте... Осталось ${remainingTime / 1000} секунд`,
  timer: remainingTime,
  timerProgressBar: true,
  didOpen: () => {
    Swal.showLoading();
  },
});

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

Ручное завершение таймера

В некоторых случаях необходимо вручную остановить таймер и закрыть уведомление. Это можно сделать, используя метод Swal.close(). Для этого достаточно запустить таймер и в любой момент вызвать Swal.close().

Пример:

let timerInstance = Swal.fire({
  title: 'Процесс в процессе...',
  text: 'Таймер будет завершен вручную.',
  timer: 10000,
  timerProgressBar: true,
  didOpen: () => {
    Swal.showLoading();
  },
});

setTimeout(() => {
  Swal.close(); // Закрытие уведомления через 5 секунд
}, 5000);

Здесь уведомление будет закрыто вручную через 5 секунд, несмотря на то, что таймер установлен на 10 секунд.

Заключение

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

Оглавление