Уведомления с таймерами обратного отсчета

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

Инициализация уведомления

Для начала необходимо подключить библиотеку. Используется либо CDN, либо установка через npm/yarn:

<!-- CDN подключение -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

Или через npm:

npm install toastify-js

Подключение через модульный импорт:

import Toastify from "toastify-js";
import "toastify-js/src/toastify.css";

После подключения можно создавать уведомления.

Создание базового уведомления с таймером

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

Пример базовой структуры:

let countdown = 10; // секунды обратного отсчета

const toast = Toastify({
    text: `До завершения: ${countdown} секунд`,
    duration: countdown * 1000, // длительность отображения
    close: true,
    gravity: "top",
    position: "right",
    stopOnFocus: true, // пауза таймера при наведении
}).showToast();

Для полноценного обратного отсчета необходимо обновлять текст уведомления каждую секунду:

let countdown = 10;

const interval = setInterval(() => {
    if (countdown <= 0) {
        clearInterval(interval);
    } else {
        Toastify({
            text: `До завершения: ${countdown} секунд`,
            duration: 1000,
            gravity: "top",
            position: "right",
            close: false,
            stopOnFocus: true,
        }).showToast();
        countdown--;
    }
}, 1000);

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

Оптимизация через кастомный контейнер

Более элегантное решение — использовать один контейнер и обновлять текст существующего уведомления:

let countdown = 10;

const toast = Toastify({
    text: `До завершения: ${countdown} секунд`,
    duration: -1, // отключаем автоматическое исчезновение
    gravity: "top",
    position: "right",
    close: true,
}).showToast();

const interval = setInterval(() => {
    countdown--;
    if (countdown <= 0) {
        toast.hideToast(); // скрываем уведомление
        clearInterval(interval);
    } else {
        toast.toastElement.textContent = `До завершения: ${countdown} секунд`;
    }
}, 1000);

Здесь используется свойство toastElement для прямого доступа к DOM-элементу уведомления, что позволяет менять текст без создания новых тостов.

Настройка внешнего вида и поведения

Toastify поддерживает гибкую кастомизацию:

  • backgroundColor — цвет фона уведомления.
  • className — добавление CSS-классов.
  • stopOnFocus — пауза таймера при наведении.
  • close — отображение кнопки закрытия.
  • gravity и position — положение на экране.

Пример уведомления с обратным отсчетом и кастомным стилем:

let countdown = 15;

const toast = Toastify({
    text: `До окончания сессии: ${countdown} секунд`,
    duration: -1,
    close: true,
    gravity: "top",
    position: "right",
    backgroundColor: "#ff6b6b",
    className: "countdown-toast",
}).showToast();

const interval = setInterval(() => {
    countdown--;
    if (countdown <= 0) {
        toast.hideToast();
        clearInterval(interval);
    } else {
        toast.toastElement.textContent = `До окончания сессии: ${countdown} секунд`;
    }
}, 1000);

Интеграция с пользовательскими событиями

Обратный отсчет может быть привязан к событиям, таким как:

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

Пример интеграции с кнопкой:

document.getElementById("startCountdown").addEventListener("click", () => {
    let countdown = 20;
    const toast = Toastify({
        text: `Осталось: ${countdown} секунд`,
        duration: -1,
        close: true,
        gravity: "bottom",
        position: "left",
        backgroundColor: "#1dd1a1",
    }).showToast();

    const interval = setInterval(() => {
        countdown--;
        if (countdown <= 0) {
            toast.hideToast();
            clearInterval(interval);
        } else {
            toast.toastElement.textContent = `Осталось: ${countdown} секунд`;
        }
    }, 1000);
});

Выводы по таймерам обратного отсчета

Использование Toastify для уведомлений с обратным отсчетом требует понимания двух ключевых моментов:

  1. Управление длительностью: duration можно задавать динамически или полностью отключать для ручного контроля.
  2. Обновление текста уведомления: прямое редактирование DOM через toastElement позволяет показывать актуальное время без создания множества тостов.

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

Оглавление