https://uwupad.me/static/js/popup_.js

1// static/js/popup.js
2
3document.addEventListener('DOMContentLoaded', () => {
4    // Создаем глобальный контейнер для всех уведомлений при загрузке страницы
5    if (!document.getElementById('popup-container')) {
6        const container = document.createElement('div');
7        container.id = 'popup-container';
8        document.body.appendChild(container);
9    }
10});
11
12/**
13 * Показывает всплывающее уведомление в правом верхнем углу.
14 * @param {string} message - Текст сообщения.
15 * @param {boolean} isError - Уведомление об ошибке?
16 * @param {object} [options={}] - Опции.
17 * @param {boolean} [options.isError=false] - Уведомление об ошибке?
18 * @param {number} [options.duration=4000] - Длительность в миллисекундах.
19 */
20function showPopupRight(message, isError = false, options = {}) {
21    const { duration = 4000 } = options;
22
23    const container = document.getElementById('popup-container');
24    if (!container) {
25        console.error('Popup container not found!');
26        return;
27    }
28
29    // 1. Создаем элемент уведомления
30    const popupElement = document.createElement('div');
31    popupElement.className = `popup-notification ${isError ? 'is-error' : 'is-success'}`;
32
33    // Иконка в зависимости от типа
34    const iconType = isError
35        ? `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>`
36        : `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>`;
37
38    popupElement.innerHTML = `
39        <div class="popup-icon">${iconType}</div>
40        <div class="popup-content">
41            <p class="popup-message">${message}</p>
42        </div>
43        <button class="popup-close">
44            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
45        </button>
46        <div class="popup-progress" style="animation-duration: ${duration}ms;"></div>
47    `;
48
49    // 2. Добавляем уведомление в контейнер (новые сверху)
50    container.prepend(popupElement);
51
52    // 3. Функция для скрытия и удаления
53    const hidePopup = () => {
54        popupElement.classList.add('popup-exit');
55        // Очищаем таймер, если он был
56        clearTimeout(popupElement.timerId);
57        // Удаляем элемент из DOM после завершения анимации
58        popupElement.addEventListener('animationend', () => {
59            popupElement.remove();
60        }, { once: true });
61    };
62
63    // 4. Запускаем анимацию появления
64    requestAnimationFrame(() => {

65        popupElement.classList.add('popup-enter');
66    });
67
68    // 5. Устанавливаем таймер на авто-скрытие
69    popupElement.timerId = setTimeout(hidePopup, duration);
70
71    // 6. Добавляем обработчик на кнопку закрытия
72    popupElement.querySelector('.popup-close').addEventListener('click', hidePopup);
73}