Lectures/assets/js/dialog.js

class ConfirmDialog {
    constructor() {
        this.createDialog();
    }

    createDialog() {
        // Création du conteneur principal
        this.dialog = document.createElement('div');
        this.dialog.className = 'confirm-dialog';
        this.dialog.style.display = 'none';

        // Création du contenu
        const content = document.createElement('div');
        content.className = 'confirm-dialog-content';

        // En-tête avec titre
        this.title = document.createElement('h3');
        content.appendChild(this.title);

        // Message
        this.message = document.createElement('p');
        content.appendChild(this.message);

        // Conteneur des boutons
        const buttons = document.createElement('div');
        buttons.className = 'confirm-dialog-buttons';

        // Bouton Confirmer
        this.confirmButton = document.createElement('button');
        this.confirmButton.className = 'button confirm';
        buttons.appendChild(this.confirmButton);

        // Bouton Annuler
        this.cancelButton = document.createElement('button');
        this.cancelButton.className = 'button cancel';
        this.cancelButton.textContent = 'Annuler';
        buttons.appendChild(this.cancelButton);

        content.appendChild(buttons);
        this.dialog.appendChild(content);
        document.body.appendChild(this.dialog);

        // Fermeture au clic en dehors
        this.dialog.addEventListener('click', (e) => {
            if (e.target === this.dialog) {
                this.hide();
            }
        });

        // Fermeture avec Echap
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && this.dialog.style.display === 'block') {
                this.hide();
            }
        });
    }

    show(options) {
        const defaults = {
            title: 'Confirmation',
            message: 'Êtes-vous sûr ?',
            confirmText: 'Confirmer',
            confirmClass: 'confirm',
            cancelText: 'Annuler',
            onConfirm: () => {},
            onCancel: () => {}
        };

        const settings = { ...defaults, ...options };

        this.title.textContent = settings.title;
        this.message.textContent = settings.message;
        this.confirmButton.textContent = settings.confirmText;
        this.confirmButton.className = `button ${settings.confirmClass}`;

        // Réinitialisation des événements
        const newConfirmBtn = this.confirmButton.cloneNode(true);
        const newCancelBtn = this.cancelButton.cloneNode(true);
        this.confirmButton.parentNode.replaceChild(newConfirmBtn, this.confirmButton);
        this.cancelButton.parentNode.replaceChild(newCancelBtn, this.cancelButton);
        this.confirmButton = newConfirmBtn;
        this.cancelButton = newCancelBtn;

        // Nouveaux gestionnaires d'événements
        this.confirmButton.addEventListener('click', () => {
            settings.onConfirm();
            this.hide();
        });

        this.cancelButton.addEventListener('click', () => {
            settings.onCancel();
            this.hide();
        });

        // Affichage avec animation
        this.dialog.style.display = 'block';
        requestAnimationFrame(() => {
            this.dialog.classList.add('show');
        });
    }

    hide() {
        this.dialog.classList.remove('show');
        setTimeout(() => {
            this.dialog.style.display = 'none';
        }, 200);
    }
}

// Création d'une instance globale
const confirmDialog = new ConfirmDialog();

// Exemple d'utilisation pour la suppression d'un chapitre
document.querySelectorAll('.delete-chapter').forEach(button => {
    button.addEventListener('click', (e) => {
        const chapterTitle = e.target.closest('.chapter-item').querySelector('.chapter-title').textContent;
        
        confirmDialog.show({
            title: 'Supprimer le chapitre',
            message: `Voulez-vous vraiment supprimer le chapitre "${chapterTitle}" ? Cette action est irréversible.`,
            confirmText: 'Supprimer',
            confirmClass: 'danger',
            onConfirm: () => {
                // Code de suppression existant
            }
        });
    });
});

// Exemple d'utilisation pour la suppression d'un roman
document.querySelectorAll('.delete-story').forEach(button => {
    button.addEventListener('click', (e) => {
        const storyTitle = e.target.closest('.story-item').querySelector('h2').textContent;
        
        confirmDialog.show({
            title: 'Supprimer le roman',
            message: `Voulez-vous vraiment supprimer le roman "${storyTitle}" ? Cette action est irréversible.`,
            confirmText: 'Supprimer',
            confirmClass: 'danger',
            onConfirm: () => {
                // Code de suppression existant
            }
        });
    });
});