html/lab5/task1/script.js - main - RoditelevVV/web-static-labs

html/lab5/task1/script.js
163 строки5 KB
karpov
finish lab3, lab4
12 мар 2026, 08:19
12 мар 2026, 08:1974cd197
class SubscriptionModal {
    constructor() {
        this.modal = document.getElementById('subscriptionModal');
        this.modalContent = document.getElementById('modalContent');
        this.subscriptionResult = document.getElementById('subscriptionResult');
        this.closeTimeout = null;
        
        this.init();
    }
    
    init() {
        
        setTimeout(() => {
            this.openModal();
        }, 7000);
        
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && this.modal.style.display === 'block') {
                this.closeModal();
            }
        });
        
        this.modal.addEventListener('click', (e) => {
            if (e.target === this.modal) {
                this.closeModal();
            }
        });
    }
    
    openModal() {

        const minWidth = 300;
        const minHeight = 200;
        const width = Math.max(window.innerWidth * 0.5, minWidth);
        const height = Math.max(window.innerHeight * 0.3, minHeight);
        
        this.modalContent.style.width = `${width}px`;
        this.modalContent.style.minHeight = `${height}px`;
        
        this.renderSubscriptionForm();
        
        this.modal.style.display = 'block';
        
        setTimeout(() => {
            const emailInput = document.getElementById('emailInput');
            if (emailInput) {
                emailInput.focus();
            }
        }, 100);
    }
    
    closeModal() {
        this.modal.style.display = 'none';
        if (this.closeTimeout) {
            clearTimeout(this.closeTimeout);
            this.closeTimeout = null;
        }
    }
    
    renderSubscriptionForm() {
        this.modalContent.innerHTML = `
            <div class="modal-header">
                <h2>Подпишитесь на новости сайта</h2>
            </div>
            <div class="modal-body">
                <form class="subscription-form" id="subscriptionForm">
                    <div class="form-group">
                        <label for="emailInput">Введите ваш e-mail:</label>
                        <input type="email" id="emailInput" placeholder="example@mail.com" required>
                        <div class="error-message" id="emailError"></div>
                    </div>
                    <div class="modal-buttons">
                        <button type="submit" class="btn btn-primary">Подписаться</button>
                        <button type="button" class="btn btn-close" id="closeBtn">Закрыть</button>
                    </div>
                </form>
            </div>
        `;
        
        document.getElementById('subscriptionForm').addEventListener('submit', (e) => {
            e.preventDefault();
            this.handleSubscription();
        });
        
        document.getElementById('closeBtn').addEventListener('click', () => {
            this.closeModal();
            this.showSubscriptionResult(false);
        });
    }
    
    renderSuccessMessage(email) {
        this.modalContent.innerHTML = `
            <div class="modal-body">
                <div class="success-message">
                    <h3>Спасибо за подписку!</h3>
                    <p>На Ваш адрес <strong>${email}</strong> будет направлено письмо</p>
                </div>
            </div>
        `;
        
        this.closeTimeout = setTimeout(() => {
            this.closeModal();
        }, 10000);
        
        this.modalContent.addEventListener('click', () => {
            this.closeModal();
        });
    }
    
    handleSubscription() {
        const emailInput = document.getElementById('emailInput');
        const emailError = document.getElementById('emailError');
        const email = emailInput.value.trim();
        
        emailInput.classList.remove('error');
        emailError.textContent = '';
        
        if (!email) {
            this.showError(emailInput, emailError, 'Пожалуйста, введите e-mail');
            return;
        }
        
        if (!this.isValidEmail(email)) {
            this.showError(emailInput, emailError, 'Пожалуйста, введите корректный e-mail');
            return;
        }
        
        this.renderSuccessMessage(email);
        this.showSubscriptionResult(true, email);
    }
    
    showError(input, errorElement, message) {
        input.classList.add('error');
        errorElement.textContent = message;
        input.focus();
        this.showSubscriptionResult(false);
    }
    
    isValidEmail(email) {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    }
    
    showSubscriptionResult(success, email = '') {
        this.subscriptionResult.className = 'subscription-result';
        
        if (success) {
            this.subscriptionResult.classList.add('success');
            this.subscriptionResult.innerHTML = `
                <span>✅ Подписка выполнена на <strong>${email}</strong></span>
            `;
        } else {
            this.subscriptionResult.classList.add('error');
            this.subscriptionResult.innerHTML = `
                <span>❌ Подписка не выполнена</span>
            `;
        }
    }
}

document.addEventListener('DOMContentLoaded', () => {
    new SubscriptionModal();
});