src/client/ui/components/Modals/ModalManager.js - master - Gabryelf/Pixel-Orb

src/client/ui/components/Modals/ModalManager.js
160 строк6 KB
Valeev Serj
restruct_v0.0.1
07 авг 2026, 22:50
07 авг 2026, 22:5041f78a4
class ModalManager {
    constructor(eventBus) {
        this.eventBus = eventBus;
        this.modal = null;
        this.overlay = null;
    }

    show(title, content, options = {}) {
        this.close();

        // Создаем оверлей
        this.overlay = document.createElement('div');
        this.overlay.className = 'modal-overlay';

        // Создаем модальное окно
        this.modal = document.createElement('div');
        this.modal.className = 'modal';
        this.modal.innerHTML = `
        <div class="modal-header">
          <h2 class="modal-title">${title}</h2>
          <button class="modal-close">&times;</button>
        </div>
        <div class="modal-body">
          ${content}
        </div>
        ${options.buttons ? `
          <div class="modal-footer">
            ${options.buttons.map(btn => `
              <button class="btn ${btn.class || ''}" data-action="${btn.action}">
                ${btn.label}
              </button>
            `).join('')}
          </div>
        ` : ''}
      `;

        this.overlay.appendChild(this.modal);
        document.body.appendChild(this.overlay);

        // Обработчики
        const closeBtn = this.modal.querySelector('.modal-close');
        if (closeBtn) {
            closeBtn.addEventListener('click', () => this.close());
        }

        this.overlay.addEventListener('click', (e) => {
            if (e.target === this.overlay) this.close();
        });

        // Кнопки действий
        if (options.buttons) {
            this.modal.querySelectorAll('[data-action]').forEach(btn => {
                btn.addEventListener('click', () => {
                    const action = btn.dataset.action;
                    if (options.onAction) {
                        options.onAction(action);
                    }
                    if (options.closeOnAction !== false) {
                        this.close();
                    }
                });
            });
        }

        document.addEventListener('keydown', this.handleKeydown);
    }

    close() {
        if (this.overlay) {
            this.overlay.remove();
            this.overlay = null;
            this.modal = null;
        }
        document.removeEventListener('keydown', this.handleKeydown);
    }

    handleKeydown = (e) => {
        if (e.key === 'Escape') {
            this.close();
        }
    }

    showLogin() {
        this.show('Login', `
        <form id="login-form">
          <div class="form-group">
            <label for="login-email">Email</label>
            <input type="email" id="login-email" class="form-control" required>
          </div>
          <div class="form-group">
            <label for="login-password">Password</label>
            <input type="password" id="login-password" class="form-control" required>
          </div>
        </form>
      `, {
            buttons: [
                { label: 'Login', action: 'login', class: 'btn-primary' },
                { label: 'Register', action: 'register', class: 'btn-secondary' },
                { label: 'Cancel', action: 'cancel', class: 'btn-danger' }
            ],
            onAction: async (action) => {
                if (action === 'login') {
                    const email = document.getElementById('login-email').value;
                    const password = document.getElementById('login-password').value;
                    try {
                        await AuthService.login(email, password);
                        this.eventBus.emit('user:changed', AuthService.currentUser);
                        this.close();
                        window.location.reload();
                    } catch (error) {
                        alert(error.message);
                    }
                } else if (action === 'register') {
                    this.showRegister();
                }
            }
        });
    }

    showRegister() {
        this.show('Register', `
        <form id="register-form">
          <div class="form-group">
            <label for="reg-username">Username</label>
            <input type="text" id="reg-username" class="form-control" required>
          </div>
          <div class="form-group">
            <label for="reg-email">Email</label>
            <input type="email" id="reg-email" class="form-control" required>
          </div>
          <div class="form-group">
            <label for="reg-password">Password (min 6 characters)</label>
            <input type="password" id="reg-password" class="form-control" required minlength="6">
          </div>
        </form>
      `, {
            buttons: [
                { label: 'Register', action: 'register', class: 'btn-primary' },
                { label: 'Cancel', action: 'cancel', class: 'btn-danger' }
            ],
            onAction: async (action) => {
                if (action === 'register') {
                    const username = document.getElementById('reg-username').value;
                    const email = document.getElementById('reg-email').value;
                    const password = document.getElementById('reg-password').value;
                    try {
                        await AuthService.register(username, email, password);
                        this.eventBus.emit('user:changed', AuthService.currentUser);
                        this.close();
                        window.location.reload();
                    } catch (error) {
                        alert(error.message);
                    }
                }
            }
        });
    }
}

export default ModalManager;