# Utils - Fonctions réutilisables

Ce dossier contient des fonctions utilitaires réutilisables pour toute l'application.

## 📁 Structure

```
utils/
├── constants.js      # Constantes partagées (types d'activités, sélecteurs, etc.)
├── dom.js           # Utilitaires DOM (escapeHtml, preventDefaults, etc.)
├── modals.js        # Gestion des modals et panels
├── notifications.js # Système de notifications
├── formatters.js    # Formatage de données (fileSize, dates, etc.)
├── drag-drop.js     # Utilitaires pour drag & drop
└── stats.js         # Statistiques du cours (sections, activités)
```

## 🚀 Utilisation

### constants.js

Constantes partagées dans toute l'application.

```javascript
import { ACTIVITY_TYPE_LABELS, ACTIVITY_TYPE_ICONS, SELECTORS } from './constants.js';

// Obtenir le label d'un type d'activité
const label = ACTIVITY_TYPE_LABELS['quiz']; // "Quiz"

// Obtenir l'emoji d'un type
const icon = ACTIVITY_TYPE_ICONS['quiz']; // "❓"

// Utiliser les sélecteurs
document.querySelectorAll(SELECTORS.ACTIVITY_MODERN);
```

### dom.js

Fonctions utilitaires pour manipuler le DOM de manière sécurisée.

```javascript
import { escapeHtml, preventDefaults, toggleBodyOverflow, onClickOutside } from './dom.js';

// Échapper du HTML (protection XSS)
const safe = escapeHtml('<script>alert("XSS")</script>');

// Empêcher le comportement par défaut
element.addEventListener('dragover', preventDefaults);

// Gérer le scroll du body (pour les modals)
toggleBodyOverflow(true);  // Verrouille le scroll
toggleBodyOverflow(false); // Déverrouille le scroll

// Détecter les clics à l'extérieur
const cleanup = onClickOutside(myElement, () => {
    console.log('Clicked outside!');
});
// Plus tard : cleanup() pour nettoyer
```

### modals.js

Gestion des modals et side panels avec animations.

```javascript
import { openModal, closeModal, openPanel, closePanel } from './modals.js';

// Ouvrir une modal
openModal('#myModal');
openModal(modalElement);

// Fermer une modal avec callback
closeModal('#myModal', () => {
    console.log('Modal fermée !');
});

// Gérer un side panel
openPanel('#settingsPanel');
closePanel('#settingsPanel');
```

### notifications.js

Système de notifications simplifié.

```javascript
import { showSuccess, showError, showWarning, showInfo } from './notifications.js';

// Afficher différents types de notifications
showSuccess('Succès !', 'Votre action a été effectuée');
showError('Erreur', 'Une erreur est survenue');
showWarning('Attention', 'Vérifiez vos données');
showInfo('Information', 'Nouvelle mise à jour disponible');
```

### formatters.js

Fonctions de formatage de données.

```javascript
import { formatFileSize, formatNumber, formatDate } from './formatters.js';

// Formater la taille d'un fichier
formatFileSize(1024);        // "1 KB"
formatFileSize(1048576);     // "1 MB"
formatFileSize(1073741824);  // "1 GB"

// Formater un nombre
formatNumber(1234567); // "1 234 567"

// Formater une date
formatDate(new Date()); // "20/11/2025"
```

### drag-drop.js

Utilitaires pour gérer le drag & drop.

```javascript
import { setupDragAndDrop, validateFile, setFileToInput } from './drag-drop.js';

// Configurer le drag & drop sur une zone
setupDragAndDrop(uploadZone, {
    onDrop: (files) => {
        console.log('Files dropped:', files);
    },
    activeClass: 'drag-active'
});

// Valider un fichier
const validation = validateFile(file, {
    allowedTypes: ['application/pdf'],
    maxSize: 20 * 1024 * 1024 // 20 MB
});

if (validation.valid) {
    // Fichier valide
} else {
    console.error(validation.error);
}

// Ajouter un fichier à un input
setFileToInput(inputElement, file);
```

### stats.js

Gestion des statistiques du cours.

```javascript
import { updateCourseStats, countSections, countActivities } from './stats.js';

// Mettre à jour les compteurs dans l'interface
updateCourseStats();

// Compter les sections
const totalSections = countSections(); // 5

// Compter les activités
const totalActivities = countActivities(); // 23
```

## 📝 Bonnes pratiques

1. **Toujours importer depuis `../utils/`** dans les controllers Stimulus
2. **Utiliser les constantes** au lieu de hardcoder les valeurs
3. **Préférer les utilitaires** aux fonctions dupliquées
4. **Documenter** les nouvelles fonctions ajoutées

## ✨ Avantages

- ✅ **DRY** : Évite la duplication de code
- ✅ **Maintenabilité** : Modifications centralisées
- ✅ **Testabilité** : Fonctions isolées faciles à tester
- ✅ **Lisibilité** : Code plus propre et organisé
- ✅ **Évolutivité** : Ajout facile de nouvelles fonctionnalités