Files
fuzip/assets/js/PreviewManager.js
Charles bd6d321ed7 Initial commit: FuZip - Application de fusion interactive de fichiers ZIP
- Backend PHP: architecture MVC avec API REST (upload, merge, preview, extract)
  - Frontend JavaScript: composants modulaires (arborescence, upload, themes, i18n)
  - Fonctionnalités: drag&drop, sélection exclusive, détection conflits, persistance état
  - Sécurité: validation stricte, isolation sessions, sanitization chemins
  - UI/UX: responsive, thèmes clair/sombre, multi-langue (FR/EN)
  - Documentation: README complet avec installation et utilisation
2026-01-12 03:29:01 +01:00

140 lines
4.3 KiB
JavaScript

/**
* FuZip - Gestionnaire de preview et extraction
* Options A et D : Preview de fichiers et download individuel
*/
class PreviewManager {
constructor() {
this.apiBase = window.FUZIP_CONFIG?.apiBase || '/api/';
// Éléments DOM de la modal
this.modal = document.getElementById('preview-modal');
this.modalTitle = document.getElementById('preview-title');
this.modalContent = document.getElementById('preview-content');
this.modalClose = document.getElementById('preview-close');
this.init();
}
/**
* Initialise les événements
*/
init() {
// Fermeture de la modal
if (this.modalClose) {
this.modalClose.addEventListener('click', () => this.closeModal());
}
// Fermeture en cliquant à l'extérieur
if (this.modal) {
this.modal.addEventListener('click', (e) => {
if (e.target === this.modal) {
this.closeModal();
}
});
}
// Fermeture avec Escape
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && this.modal && !this.modal.classList.contains('hidden')) {
this.closeModal();
}
});
console.log('[PreviewManager] Initialized');
}
/**
* Prévisualise un fichier (Option A)
* @param {string} side - 'left' ou 'right'
* @param {string} path - Chemin du fichier
* @param {string} fileName - Nom du fichier pour affichage
*/
async preview(side, path, fileName) {
try {
this.openModal(fileName, 'Chargement...');
const url = `${this.apiBase}preview.php?side=${side}&path=${encodeURIComponent(path)}&max_length=50000`;
const response = await fetch(url);
const data = await response.json();
if (data.success) {
let content = data.content || '';
// Si tronqué
if (data.truncated) {
content += `\n\n... (fichier tronqué à ${data.size_shown} octets sur ${data.total_size})`;
}
// Si fichier binaire
if (data.is_binary) {
content = `[Fichier binaire - ${data.total_size} octets]\n\nAperçu non disponible pour ce type de fichier.`;
}
this.modalContent.textContent = content;
} else {
this.modalContent.textContent = `Erreur : ${data.error || 'Impossible de charger le fichier'}`;
}
} catch (error) {
console.error('[PreviewManager] Preview error:', error);
this.modalContent.textContent = `Erreur réseau : ${error.message}`;
}
}
/**
* Télécharge un fichier individuel (Option D)
* @param {string} side - 'left' ou 'right'
* @param {string} path - Chemin du fichier
* @param {string} fileName - Nom du fichier
*/
async extract(side, path, fileName) {
try {
const url = `${this.apiBase}extract.php?side=${side}&path=${encodeURIComponent(path)}`;
// Créer un lien de téléchargement temporaire
const a = document.createElement('a');
a.href = url;
a.download = fileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
console.log(`[PreviewManager] Extracted: ${fileName} from ${side}`);
} catch (error) {
console.error('[PreviewManager] Extract error:', error);
alert(`Erreur lors du téléchargement : ${error.message}`);
}
}
/**
* Ouvre la modal de preview
* @param {string} title - Titre (nom du fichier)
* @param {string} content - Contenu initial
*/
openModal(title, content = '') {
if (this.modalTitle) {
this.modalTitle.textContent = title;
}
if (this.modalContent) {
this.modalContent.textContent = content;
}
if (this.modal) {
this.modal.classList.remove('hidden');
}
}
/**
* Ferme la modal de preview
*/
closeModal() {
if (this.modal) {
this.modal.classList.add('hidden');
}
}
}
// Export pour utilisation dans app.js
window.PreviewManager = PreviewManager;