1420 lines
48 KiB
JavaScript
Executable File
1420 lines
48 KiB
JavaScript
Executable File
/**
|
|
* UX Manager - Gestionnaire d'expérience utilisateur modulaire
|
|
* Version: 3.0.0 - Corrigée et Optimisée
|
|
* Description: Gère tous les aspects de l'UX : navigation, panels contextuels, notifications, accessibilité
|
|
* Auteur: Portail RH Inter Santé
|
|
* Date: 2025.12.22 - Version finale
|
|
*/
|
|
|
|
// ============================================================================
|
|
// CLASSE PRINCIPALE - UXManager
|
|
// ============================================================================
|
|
|
|
/**
|
|
* Classe principale qui orchestre tous les gestionnaires d'expérience utilisateur
|
|
* Elle initialise et coordonne les différents sous-managers
|
|
*/
|
|
class UXManager {
|
|
/**
|
|
* Constructeur principal - Initialise tous les sous-managers
|
|
*/
|
|
constructor() {
|
|
// Initialisation des sous-managers
|
|
this.navigation = new NavigationManager();
|
|
this.contextPanel = new ContextPanelManager();
|
|
this.notifications = new NotificationManager();
|
|
this.accessibility = new AccessibilityManager();
|
|
this.performance = new PerformanceManager();
|
|
this.language = new LanguageManager();
|
|
|
|
// Lancement de l'initialisation
|
|
this.init();
|
|
}
|
|
|
|
/**
|
|
* Méthode d'initialisation principale
|
|
* Appelée automatiquement par le constructeur
|
|
*/
|
|
init() {
|
|
//console.log('[UX Manager] Initialisation du système d\'expérience utilisateur...');
|
|
|
|
// Initialisation séquentielle des sous-managers
|
|
this.navigation.init();
|
|
this.contextPanel.init();
|
|
this.notifications.init();
|
|
this.accessibility.init();
|
|
this.performance.init();
|
|
this.language.init();
|
|
|
|
// Gestion de session utilisateur
|
|
this.checkSession();
|
|
|
|
// Initialisation du Service Worker
|
|
this.initServiceWorker();
|
|
|
|
//console.log('[UX Manager] Initialisation terminée avec succès');
|
|
}
|
|
|
|
/**
|
|
* Basculer l'état du panneau contextuel
|
|
* @public - Méthode accessible globalement
|
|
*/
|
|
toggleContextPanel() {
|
|
this.contextPanel.toggle();
|
|
}
|
|
|
|
|
|
/**
|
|
* Vérifier et gérer l'expiration de session utilisateur
|
|
* @private - Méthode interne de gestion de session
|
|
*/
|
|
checkSession() {
|
|
// Récupérer la durée de session depuis le DOM
|
|
const dureeSession = parseInt(document.getElementById('dureeSession')?.value) || 30;
|
|
const dureeMinutes = dureeSession * 60 * 1000; // Conversion en millisecondes
|
|
|
|
// Vérifier régulièrement l'activité de l'utilisateur
|
|
setInterval(() => {
|
|
const derniereAction = sessionStorage.getItem('derniere_action');
|
|
const maintenant = Date.now();
|
|
|
|
// Si inactivité dépassant la durée autorisée
|
|
if (derniereAction && (maintenant - derniereAction > dureeMinutes)) {
|
|
this.showSessionWarning();
|
|
}
|
|
}, 60000); // Vérification toutes les minutes
|
|
}
|
|
|
|
/**
|
|
* Afficher un avertissement d'expiration de session
|
|
* @private - Méthode d'affichage de notification
|
|
*/
|
|
showSessionWarning() {
|
|
const isAnglophone = window.appConfig?.isAnglophone || false;
|
|
const messages = {
|
|
title: isAnglophone ? 'Session Warning' : 'Avertissement de session',
|
|
text: isAnglophone
|
|
? 'Your session will expire soon. Do you want to extend it?'
|
|
: 'Votre session va bientôt expirer. Souhaitez-vous la prolonger?',
|
|
confirm: isAnglophone ? 'Extend' : 'Prolonger',
|
|
cancel: isAnglophone ? 'Logout' : 'Déconnexion'
|
|
};
|
|
|
|
// Utiliser SweetAlert pour une notification élégante
|
|
Swal.fire({
|
|
title: messages.title,
|
|
text: messages.text,
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonText: messages.confirm,
|
|
cancelButtonText: messages.cancel,
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
// Prolonger la session
|
|
sessionStorage.setItem('derniere_action', Date.now());
|
|
this.accessibility.announce(
|
|
isAnglophone ? 'Session extended' : 'Session prolongée'
|
|
);
|
|
} else {
|
|
// Déconnexion
|
|
window.location.href = window.appConfig?.racineWeb + 'Connexion/deconnecter';
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Initialiser le Service Worker pour le mode hors-ligne
|
|
* @private - Méthode d'initialisation PWA
|
|
*/
|
|
initServiceWorker() {
|
|
if ('serviceWorker' in navigator) {
|
|
navigator.serviceWorker.ready.then(registration => {
|
|
//console.log('[UX Manager] Service Worker actif:', registration.scope);
|
|
}).catch(error => {
|
|
//console.warn('[UX Manager] Service Worker non disponible:', error);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// ============================================================================
|
|
// SOUS-CLASSE - NavigationManager (GESTION DES MENUS)
|
|
// ============================================================================
|
|
|
|
/**
|
|
* Gestionnaire spécialisé pour la navigation et les menus
|
|
* Contrôle l'ouverture/fermeture des menus dépliables
|
|
*/
|
|
class NavigationManager {
|
|
/**
|
|
* Constructeur - Initialise l'état de navigation
|
|
*/
|
|
constructor() {
|
|
this.currentOpenMenu = null; // Menu actuellement ouvert
|
|
this.activeMenuId = null; // Menu actif basé sur la page courante
|
|
this.isInitialized = false; // État d'initialisation
|
|
}
|
|
|
|
/**
|
|
* Initialiser le système de navigation
|
|
* @public - Méthode appelée par UXManager
|
|
*/
|
|
init() {
|
|
if (this.isInitialized) return;
|
|
|
|
// console.log('[Navigation] Initialisation du système de menus...');
|
|
|
|
// Appliquer le correctif d'urgence pour les menus multiples ouverts
|
|
this.applyEmergencyFix();
|
|
|
|
// Configuration des comportements
|
|
this.setupActiveMenu();
|
|
this.setupMenuBehavior();
|
|
this.setupKeyboardNavigation();
|
|
|
|
// Vérification finale après initialisation
|
|
setTimeout(() => {
|
|
this.validateMenuConsistency();
|
|
}, 300);
|
|
|
|
this.isInitialized = true;
|
|
//console.log('[Navigation] Système de menus initialisé');
|
|
}
|
|
|
|
/**
|
|
* Correctif d'urgence - Force un seul menu ouvert au chargement
|
|
* @private - Méthode de correction initiale
|
|
*/
|
|
applyEmergencyFix() {
|
|
// Détecter le menu actif depuis la configuration
|
|
const activeParentId = window.appConfig?.activeParentId;
|
|
|
|
if (activeParentId !== null && activeParentId !== '') {
|
|
this.activeMenuId = `submenu${activeParentId}`;
|
|
//console.log('[Navigation] Correctif: Menu actif détecté:', this.activeMenuId);
|
|
|
|
// Forcer la fermeture de tous les autres menus
|
|
this.forceSingleMenu();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Forcer l'ouverture d'un seul menu (celui actif)
|
|
* @private - Méthode de correction forcée
|
|
*/
|
|
forceSingleMenu() {
|
|
if (!this.activeMenuId) return;
|
|
|
|
//console.log('[Navigation] Forçage: Un seul menu ouvert ->', this.activeMenuId);
|
|
|
|
// Étape 1: Fermer TOUS les menus
|
|
document.querySelectorAll('.nav-submenu').forEach(menu => {
|
|
if (menu.id !== this.activeMenuId) {
|
|
this.closeMenu(menu.id, true); // true = force close
|
|
}
|
|
});
|
|
|
|
// Étape 2: Ouvrir le menu actif
|
|
setTimeout(() => {
|
|
this.openMenu(this.activeMenuId);
|
|
this.currentOpenMenu = this.activeMenuId;
|
|
}, 50);
|
|
}
|
|
|
|
/**
|
|
* Configurer le menu actif basé sur la page courante
|
|
* @private - Méthode de configuration initiale
|
|
*/
|
|
setupActiveMenu() {
|
|
const activeParentId = window.appConfig?.activeParentId;
|
|
const activeLink = window.appConfig?.activeLink;
|
|
|
|
//console.log('[Navigation] Configuration:', { activeParentId, activeLink });
|
|
|
|
// CORRECTION : Si "Accueil" mais activeParentId != 0, corriger
|
|
if (activeLink === 'Accueil' && activeParentId !== '0') {
|
|
//console.warn('[Navigation] Correction: Accueil devrait être menu 0, pas', activeParentId);
|
|
this.activeMenuId = 'submenu0';
|
|
|
|
// Mettre à jour la config
|
|
if (window.appConfig) {
|
|
window.appConfig.activeParentId = '0';
|
|
}
|
|
}
|
|
// Cas normal
|
|
else if (activeParentId !== null && activeParentId !== '') {
|
|
this.activeMenuId = `submenu${activeParentId}`;
|
|
} else {
|
|
this.activeMenuId = null;
|
|
}
|
|
|
|
//console.log('[Navigation] Menu actif final:', this.activeMenuId);
|
|
|
|
// Appliquer
|
|
if (this.activeMenuId) {
|
|
setTimeout(() => {
|
|
this.openMenu(this.activeMenuId);
|
|
this.currentOpenMenu = this.activeMenuId;
|
|
}, 100);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Configurer les comportements interactifs des menus
|
|
* @private - Méthode d'attachement des événements
|
|
*/
|
|
setupMenuBehavior() {
|
|
// Pour chaque lien de menu avec sous-menu (dépliable)
|
|
document.querySelectorAll('.nav-link[data-bs-toggle="collapse"]').forEach(link => {
|
|
link.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
const targetId = link.getAttribute('href').substring(1); // Enlever le #
|
|
//console.log('[Navigation] Clic détecté sur menu:', targetId);
|
|
|
|
// Logique de basculement intelligent
|
|
if (this.currentOpenMenu === targetId) {
|
|
// Si on clique sur le menu déjà ouvert, on le ferme
|
|
this.closeMenu(targetId);
|
|
this.currentOpenMenu = null;
|
|
} else {
|
|
// Fermer le menu précédent si différent
|
|
if (this.currentOpenMenu && this.currentOpenMenu !== targetId) {
|
|
this.closeMenu(this.currentOpenMenu);
|
|
}
|
|
|
|
// Ouvrir le nouveau menu
|
|
this.openMenu(targetId);
|
|
this.currentOpenMenu = targetId;
|
|
}
|
|
});
|
|
});
|
|
|
|
// Fermer les menus en cliquant en dehors de la sidebar
|
|
document.addEventListener('click', (e) => {
|
|
if (!e.target.closest('.app-sidebar')) {
|
|
// Ne pas fermer le menu actif s'il correspond à la page courante
|
|
if (this.currentOpenMenu !== this.activeMenuId) {
|
|
this.closeAllMenus();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Empêcher la fermeture accidentelle en cliquant dans le sous-menu
|
|
document.querySelectorAll('.nav-submenu').forEach(menu => {
|
|
menu.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Ouvrir un menu spécifique
|
|
* @param {string} menuId - ID du menu à ouvrir
|
|
* @private - Méthode d'ouverture de menu
|
|
*/
|
|
openMenu(menuId) {
|
|
const menu = document.getElementById(menuId);
|
|
const link = document.querySelector(`[href="#${menuId}"]`);
|
|
|
|
if (menu && link) {
|
|
// Vérifier si le menu est déjà ouvert
|
|
if (menu.classList.contains('show')) {
|
|
//console.log('[Navigation] Menu déjà ouvert:', menuId);
|
|
return;
|
|
}
|
|
|
|
//console.log('[Navigation] Ouverture du menu:', menuId);
|
|
|
|
// 1. Fermer tous les autres menus
|
|
document.querySelectorAll('.nav-submenu.show').forEach(otherMenu => {
|
|
if (otherMenu.id !== menuId) {
|
|
otherMenu.classList.remove('show');
|
|
const otherLink = document.querySelector(`[href="#${otherMenu.id}"]`);
|
|
if (otherLink) {
|
|
otherLink.setAttribute('aria-expanded', 'false');
|
|
otherLink.classList.remove('active');
|
|
const arrow = otherLink.querySelector('.nav-arrow');
|
|
if (arrow) arrow.style.transform = 'rotate(0deg)';
|
|
}
|
|
}
|
|
});
|
|
|
|
// 2. Ouvrir le menu sélectionné avec animations
|
|
menu.classList.add('show');
|
|
link.setAttribute('aria-expanded', 'true');
|
|
link.classList.add('active');
|
|
|
|
// 3. Animer la flèche
|
|
const arrow = link.querySelector('.nav-arrow');
|
|
if (arrow) arrow.style.transform = 'rotate(90deg)';
|
|
|
|
// 4. Annoncer pour l'accessibilité
|
|
const menuName = link.querySelector('.nav-text')?.textContent || 'Menu';
|
|
window.appUX?.accessibility.announce(`${menuName} ouvert`);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Fermer un menu spécifique
|
|
* @param {string} menuId - ID du menu à fermer
|
|
* @param {boolean} force - Forcer la fermeture même pour le menu actif
|
|
* @private - Méthode de fermeture de menu
|
|
*/
|
|
closeMenu(menuId, force = false) {
|
|
const menu = document.getElementById(menuId);
|
|
const link = document.querySelector(`[href="#${menuId}"]`);
|
|
|
|
if (menu && link) {
|
|
// Ne pas fermer le menu actif s'il correspond à la page courante (sauf si forcé)
|
|
if (!force && menuId === this.activeMenuId) {
|
|
//console.log('[Navigation] Menu actif, fermeture bloquée:', menuId);
|
|
return;
|
|
}
|
|
|
|
//console.log('[Navigation] Fermeture du menu:', menuId);
|
|
|
|
// Appliquer les changements visuels
|
|
menu.classList.remove('show');
|
|
link.setAttribute('aria-expanded', 'false');
|
|
link.classList.remove('active');
|
|
|
|
// Réinitialiser la flèche
|
|
const arrow = link.querySelector('.nav-arrow');
|
|
if (arrow) arrow.style.transform = 'rotate(0deg)';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Fermer tous les menus (sauf le menu actif)
|
|
* @public - Méthode accessible globalement
|
|
*/
|
|
closeAllMenus() {
|
|
//console.log('[Navigation] Fermeture de tous les menus (sauf actif)');
|
|
|
|
document.querySelectorAll('.nav-submenu.show').forEach(menu => {
|
|
if (menu.id !== this.activeMenuId) {
|
|
this.closeMenu(menu.id);
|
|
}
|
|
});
|
|
|
|
// Réinitialiser l'état si aucun menu actif
|
|
if (!this.activeMenuId) {
|
|
this.currentOpenMenu = null;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Fermer tous les menus sauf celui actif
|
|
* @public - Alias pour closeAllMenus avec nom plus explicite
|
|
*/
|
|
closeAllExceptActive() {
|
|
this.closeAllMenus();
|
|
}
|
|
|
|
/**
|
|
* Configurer la navigation au clavier
|
|
* @private - Méthode d'accessibilité clavier
|
|
*/
|
|
setupKeyboardNavigation() {
|
|
document.addEventListener('keydown', (e) => {
|
|
// Échap: fermer tous les menus
|
|
if (e.key === 'Escape') {
|
|
this.closeAllMenus();
|
|
}
|
|
|
|
// Flèches: navigation dans les menus
|
|
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
|
const focused = document.activeElement;
|
|
if (focused.classList.contains('nav-link')) {
|
|
e.preventDefault();
|
|
this.navigateMenu(focused, e.key);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Naviguer dans les menus avec les flèches
|
|
* @param {HTMLElement} currentElement - Élément actuellement focus
|
|
* @param {string} direction - Direction de navigation ('ArrowDown' ou 'ArrowUp')
|
|
* @private - Méthode de navigation clavier
|
|
*/
|
|
navigateMenu(currentElement, direction) {
|
|
const allLinks = Array.from(document.querySelectorAll('.nav-link'));
|
|
const currentIndex = allLinks.indexOf(currentElement);
|
|
|
|
if (direction === 'ArrowDown' && currentIndex < allLinks.length - 1) {
|
|
allLinks[currentIndex + 1].focus();
|
|
} else if (direction === 'ArrowUp' && currentIndex > 0) {
|
|
allLinks[currentIndex - 1].focus();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Vérifier la cohérence des menus
|
|
* @private - Méthode de validation
|
|
*/
|
|
validateMenuConsistency() {
|
|
//console.log('[Navigation] Vérification de cohérence...');
|
|
|
|
// 1. Vérifier que le menu actif est ouvert
|
|
if (this.activeMenuId) {
|
|
const activeMenu = document.getElementById(this.activeMenuId);
|
|
if (activeMenu && !activeMenu.classList.contains('show')) {
|
|
//console.warn('[Navigation] Menu actif non ouvert, correction...');
|
|
this.openMenu(this.activeMenuId);
|
|
}
|
|
}
|
|
|
|
// 2. Vérifier qu'un seul menu est ouvert
|
|
const openMenus = document.querySelectorAll('.nav-submenu.show');
|
|
if (openMenus.length > 1) {
|
|
//console.warn(`[Navigation] ${openMenus.length} menus ouverts, correction...`);
|
|
this.forceSingleMenu();
|
|
}
|
|
|
|
// 3. Vérifier la correspondance page/menu
|
|
this.validatePageMenuMatch();
|
|
}
|
|
|
|
/**
|
|
* Valider la correspondance entre la page et le menu ouvert
|
|
* @private - Méthode de validation avancée
|
|
*/
|
|
validatePageMenuMatch() {
|
|
const activeLink = window.appConfig?.activeLink;
|
|
if (!activeLink) return;
|
|
|
|
// Chercher si la page active est dans le menu ouvert
|
|
const openMenu = document.querySelector('.nav-submenu.show');
|
|
if (openMenu) {
|
|
const hasActiveLink = openMenu.querySelector(`a[href*="${activeLink}"]`);
|
|
if (!hasActiveLink) {
|
|
//console.warn(`[Navigation] Page "${activeLink}" non trouvée dans le menu ouvert ${openMenu.id}`);
|
|
|
|
// Essayer de trouver le bon menu
|
|
this.autoDetectCorrectMenu();
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Détecter automatiquement le menu correct
|
|
* @private - Méthode d'auto-détection
|
|
*/
|
|
autoDetectCorrectMenu() {
|
|
const activeLink = window.appConfig?.activeLink;
|
|
if (!activeLink) return;
|
|
|
|
//console.log(`[Navigation] Auto-détection du menu pour "${activeLink}"...`);
|
|
|
|
// Chercher dans tous les menus
|
|
document.querySelectorAll('.nav-submenu').forEach(menu => {
|
|
const link = menu.querySelector(`a[href*="${activeLink}"]`);
|
|
if (link) {
|
|
const correctMenuId = menu.id;
|
|
//console.log(`[Navigation] Trouvé dans ${correctMenuId}`);
|
|
|
|
// Mettre à jour
|
|
this.activeMenuId = correctMenuId;
|
|
if (window.appConfig) {
|
|
const menuNum = correctMenuId.replace('submenu', '');
|
|
window.appConfig.activeParentId = menuNum;
|
|
}
|
|
|
|
// Ouvrir le bon menu
|
|
setTimeout(() => {
|
|
this.openMenu(correctMenuId);
|
|
this.currentOpenMenu = correctMenuId;
|
|
}, 100);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Ouvrir un menu par son ID (méthode publique)
|
|
* @param {string} menuId - ID du menu à ouvrir
|
|
* @public - Méthode accessible globalement
|
|
*/
|
|
openMenuById(menuId) {
|
|
this.openMenu(menuId);
|
|
this.currentOpenMenu = menuId;
|
|
}
|
|
}
|
|
|
|
// ============================================================================
|
|
// SOUS-CLASSE - ContextPanelManager (PANEL CONTEXTUEL)
|
|
// ============================================================================
|
|
|
|
/**
|
|
* Gestionnaire du panneau contextuel latéral
|
|
* Contrôle l'affichage et les interactions du panel d'outils
|
|
*/
|
|
class ContextPanelManager {
|
|
/**
|
|
* Constructeur - Initialise les références DOM
|
|
*/
|
|
constructor() {
|
|
this.panel = document.getElementById('contextPanel');
|
|
this.toggleButton = document.querySelector('.context-toggle');
|
|
this.proximityArea = document.querySelector('.proximity-hover-area');
|
|
this.isOpen = false;
|
|
this.isInitialized = false;
|
|
}
|
|
|
|
/**
|
|
* Initialiser le panel contextuel
|
|
* @public - Méthode appelée par UXManager
|
|
*/
|
|
init() {
|
|
if (this.isInitialized || !this.panel) return;
|
|
|
|
//console.log('[Context Panel] Initialisation...');
|
|
|
|
this.setupProximityDetection();
|
|
this.setupKeyboardControls();
|
|
|
|
this.isInitialized = true;
|
|
}
|
|
|
|
/**
|
|
* Configurer la détection de proximité (hover)
|
|
* @private - Méthode d'interaction au survol
|
|
*/
|
|
setupProximityDetection() {
|
|
if (!this.proximityArea || !this.toggleButton) return;
|
|
|
|
// Animation au survol de la zone de proximité
|
|
this.proximityArea.addEventListener('mouseenter', () => {
|
|
this.toggleButton.style.opacity = '1';
|
|
this.toggleButton.style.transform = 'scale(1.1)';
|
|
});
|
|
|
|
this.proximityArea.addEventListener('mouseleave', () => {
|
|
if (!this.isOpen) {
|
|
this.toggleButton.style.opacity = '0.2';
|
|
this.toggleButton.style.transform = 'scale(1)';
|
|
}
|
|
});
|
|
|
|
// Opacité initiale
|
|
this.toggleButton.style.opacity = '0.2';
|
|
this.toggleButton.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
|
|
}
|
|
|
|
/**
|
|
* Configurer les contrôles clavier
|
|
* @private - Méthode d'accessibilité clavier
|
|
*/
|
|
setupKeyboardControls() {
|
|
document.addEventListener('keydown', (e) => {
|
|
// Ctrl+Shift+C : basculer le panel
|
|
if (e.ctrlKey && e.shiftKey && e.key === 'C') {
|
|
e.preventDefault();
|
|
this.toggle();
|
|
}
|
|
|
|
// Échap : fermer le panel si ouvert
|
|
if (e.key === 'Escape' && this.isOpen) {
|
|
this.close();
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Basculer l'état du panel (ouvrir/fermer)
|
|
* @public - Méthode accessible globalement
|
|
*/
|
|
toggle() {
|
|
if (this.isOpen) {
|
|
this.close();
|
|
} else {
|
|
this.open();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Ouvrir le panel contextuel
|
|
* @private - Méthode d'ouverture
|
|
*/
|
|
open() {
|
|
this.panel.classList.add('open');
|
|
this.toggleButton.setAttribute('aria-expanded', 'true');
|
|
this.toggleButton.style.opacity = '1';
|
|
this.isOpen = true;
|
|
|
|
// Focus sur le bouton de fermeture pour l'accessibilité
|
|
setTimeout(() => {
|
|
const closeBtn = this.panel.querySelector('.context-close');
|
|
if (closeBtn) closeBtn.focus();
|
|
}, 300);
|
|
|
|
//console.log('[Context Panel] Ouvert');
|
|
window.appUX?.accessibility.announce('Panneau contextuel ouvert');
|
|
}
|
|
|
|
/**
|
|
* Fermer le panel contextuel
|
|
* @private - Méthode de fermeture
|
|
*/
|
|
close() {
|
|
this.panel.classList.remove('open');
|
|
this.toggleButton.setAttribute('aria-expanded', 'false');
|
|
this.toggleButton.style.opacity = '0.2';
|
|
this.isOpen = false;
|
|
|
|
// Retourner le focus au bouton toggle
|
|
this.toggleButton.focus();
|
|
|
|
//console.log('[Context Panel] Fermé');
|
|
window.appUX?.accessibility.announce('Panneau contextuel fermé');
|
|
}
|
|
}
|
|
|
|
// ============================================================================
|
|
// SOUS-CLASSE - NotificationManager (GESTION DES NOTIFICATIONS)
|
|
// ============================================================================
|
|
|
|
/**
|
|
* Gestionnaire des notifications et messages système
|
|
*/
|
|
class NotificationManager {
|
|
/**
|
|
* Constructeur - Initialise le compteur de notifications
|
|
*/
|
|
constructor() {
|
|
this.countElement = document.getElementById('notificationCount');
|
|
this.unreadCount = 0;
|
|
this.pollingInterval = null;
|
|
}
|
|
|
|
/**
|
|
* Initialiser le système de notifications
|
|
* @public - Méthode appelée par UXManager
|
|
*/
|
|
init() {
|
|
//console.log('[Notifications] Initialisation...');
|
|
|
|
this.loadNotifications();
|
|
this.setupPolling();
|
|
}
|
|
|
|
/**
|
|
* Charger les notifications depuis le serveur
|
|
* @private - Méthode de chargement initial
|
|
*/
|
|
loadNotifications() {
|
|
// Simulation - À remplacer par un appel API réel
|
|
const mockCount = 3; // Exemple : 3 notifications non lues
|
|
this.updateCount(mockCount);
|
|
|
|
//console.log('[Notifications] Chargement simulé:', mockCount, 'notification(s)');
|
|
}
|
|
|
|
/**
|
|
* Mettre à jour le compteur de notifications
|
|
* @param {number} count - Nouveau nombre de notifications
|
|
* @private - Méthode de mise à jour d'affichage
|
|
*/
|
|
updateCount(count) {
|
|
this.unreadCount = count;
|
|
|
|
if (this.countElement) {
|
|
// Mettre à jour l'élément visuel
|
|
this.countElement.textContent = count;
|
|
this.countElement.style.display = count > 0 ? 'flex' : 'none';
|
|
|
|
// Mettre à jour le titre de la page
|
|
const baseTitle = document.title.replace(/^\(\d+\)\s*/, '');
|
|
document.title = count > 0 ? `(${count}) ${baseTitle}` : baseTitle;
|
|
|
|
// Annoncer pour l'accessibilité si nouveau message
|
|
if (count > 0) {
|
|
const message = window.appConfig?.isAnglophone
|
|
? `${count} new notification${count > 1 ? 's' : ''}`
|
|
: `${count} nouvelle${count > 1 ? 's' : ''} notification${count > 1 ? 's' : ''}`;
|
|
window.appUX?.accessibility.announce(message);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Configurer le polling pour les nouvelles notifications
|
|
* @private - Méthode de vérification périodique
|
|
*/
|
|
setupPolling() {
|
|
// Vérifier les nouvelles notifications toutes les 30 secondes
|
|
this.pollingInterval = setInterval(() => {
|
|
this.checkNewNotifications();
|
|
}, 30000);
|
|
}
|
|
|
|
/**
|
|
* Vérifier les nouvelles notifications (méthode à implémenter)
|
|
* @private - Méthode d'appel API
|
|
*/
|
|
checkNewNotifications() {
|
|
// À implémenter : appel AJAX pour vérifier les nouvelles notifications
|
|
// console.log('[Notifications] Vérification des nouvelles notifications...');
|
|
}
|
|
|
|
/**
|
|
* Afficher la modale des messages
|
|
* @public - Méthode accessible globalement
|
|
*/
|
|
showMessagesModal() {
|
|
const modalElement = document.getElementById('messagesModal');
|
|
if (!modalElement) {
|
|
//console.error('[Notifications] Modale des messages non trouvée');
|
|
return;
|
|
}
|
|
|
|
const modal = new bootstrap.Modal(modalElement);
|
|
modal.show();
|
|
|
|
// Charger les messages
|
|
this.loadMessages();
|
|
|
|
//console.log('[Notifications] Affichage de la modale des messages');
|
|
}
|
|
|
|
/**
|
|
* Charger les messages dans la modale
|
|
* @private - Méthode de chargement de contenu
|
|
*/
|
|
loadMessages() {
|
|
const container = document.getElementById('div_messagerie');
|
|
if (!container) return;
|
|
|
|
// Simulation de chargement - À remplacer par un appel API réel
|
|
const messages = window.appConfig?.isAnglophone
|
|
? [
|
|
{ title: 'New prescription', time: '5 minutes ago', content: 'A new prescription has been created for the beneficiary.' },
|
|
{ title: 'Exemption approved', time: '2 hours ago', content: 'Your exemption request has been approved.' }
|
|
]
|
|
: [
|
|
{ title: 'Nouvelle prescription', time: 'Il y a 5 minutes', content: 'Une nouvelle prescription a été créée pour le bénéficiaire.' },
|
|
{ title: 'Dérogation approuvée', time: 'Il y a 2 heures', content: 'Votre demande de dérogation a été approuvée.' }
|
|
];
|
|
|
|
// Générer le HTML des messages
|
|
let messagesHTML = '<div class="list-group">';
|
|
messages.forEach(msg => {
|
|
messagesHTML += `
|
|
<div class="list-group-item">
|
|
<div class="d-flex w-100 justify-content-between">
|
|
<h6 class="mb-1">${msg.title}</h6>
|
|
<small>${msg.time}</small>
|
|
</div>
|
|
<p class="mb-1">${msg.content}</p>
|
|
</div>
|
|
`;
|
|
});
|
|
messagesHTML += '</div>';
|
|
|
|
container.innerHTML = messagesHTML;
|
|
}
|
|
}
|
|
|
|
// ============================================================================
|
|
// SOUS-CLASSE - AccessibilityManager (ACCESSIBILITÉ)
|
|
// ============================================================================
|
|
|
|
/**
|
|
* Gestionnaire d'accessibilité (WCAG, ARIA, etc.)
|
|
*/
|
|
class AccessibilityManager {
|
|
/**
|
|
* Constructeur - Initialise les fonctionnalités d'accessibilité
|
|
*/
|
|
constructor() {
|
|
this.liveRegion = null;
|
|
this.reducedMotion = false;
|
|
}
|
|
|
|
/**
|
|
* Initialiser les fonctionnalités d'accessibilité
|
|
* @public - Méthode appelée par UXManager
|
|
*/
|
|
init() {
|
|
//console.log('[Accessibility] Initialisation des fonctionnalités d\'accessibilités...');
|
|
|
|
this.setupFocusManagement();
|
|
this.setupAriaLiveRegions();
|
|
this.detectReducedMotion();
|
|
this.setupSkipLinks();
|
|
|
|
//console.log('[Accessibility] Fonctionnalités d\'accessibilité activées');
|
|
}
|
|
|
|
/**
|
|
* Configurer la gestion du focus (modales, etc.)
|
|
* @private - Méthode de gestion du focus
|
|
*/
|
|
setupFocusManagement() {
|
|
// Gérer le focus pour les modales Bootstrap
|
|
document.addEventListener('shown.bs.modal', (e) => {
|
|
const modal = e.target;
|
|
const focusable = modal.querySelector(
|
|
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
|
);
|
|
if (focusable) focusable.focus();
|
|
});
|
|
|
|
// Piéger le focus dans les modales
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Tab' && document.querySelector('.modal.show')) {
|
|
this.trapFocusInModal(e);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Piéger le focus dans une modale
|
|
* @param {KeyboardEvent} e - Événement clavier
|
|
* @private - Méthode de piégeage de focus
|
|
*/
|
|
trapFocusInModal(e) {
|
|
const modal = document.querySelector('.modal.show');
|
|
if (!modal) return;
|
|
|
|
const focusable = modal.querySelectorAll(
|
|
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
|
);
|
|
const firstFocusable = focusable[0];
|
|
const lastFocusable = focusable[focusable.length - 1];
|
|
|
|
if (e.shiftKey) {
|
|
// Shift + Tab
|
|
if (document.activeElement === firstFocusable) {
|
|
e.preventDefault();
|
|
lastFocusable.focus();
|
|
}
|
|
} else {
|
|
// Tab seul
|
|
if (document.activeElement === lastFocusable) {
|
|
e.preventDefault();
|
|
firstFocusable.focus();
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Configurer les régions ARIA live (annonces)
|
|
* @private - Méthode de création de régions ARIA
|
|
*/
|
|
setupAriaLiveRegions() {
|
|
// Créer une région ARIA live pour les annonces
|
|
this.liveRegion = document.createElement('div');
|
|
this.liveRegion.setAttribute('aria-live', 'polite');
|
|
this.liveRegion.setAttribute('aria-atomic', 'true');
|
|
this.liveRegion.className = 'visually-hidden';
|
|
this.liveRegion.setAttribute('role', 'status');
|
|
document.body.appendChild(this.liveRegion);
|
|
|
|
//console.log('[Accessibility] Région ARIA live créée');
|
|
}
|
|
|
|
/**
|
|
* Annoncer un message pour les lecteurs d'écran
|
|
* @param {string} message - Message à annoncer
|
|
* @public - Méthode accessible globalement
|
|
*/
|
|
announce(message) {
|
|
if (!this.liveRegion || !message) return;
|
|
|
|
// Effacer l'ancien message
|
|
this.liveRegion.textContent = '';
|
|
|
|
// Ajouter le nouveau message après un délai
|
|
setTimeout(() => {
|
|
this.liveRegion.textContent = message;
|
|
//console.log('[Accessibility] Annonce:', message);
|
|
}, 100);
|
|
}
|
|
|
|
/**
|
|
* Détecter la préférence de réduction des animations
|
|
* @private - Méthode de détection de préférence utilisateur
|
|
*/
|
|
detectReducedMotion() {
|
|
const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
|
|
this.reducedMotion = mediaQuery.matches;
|
|
|
|
if (this.reducedMotion) {
|
|
document.documentElement.classList.add('reduced-motion');
|
|
//console.log('[Accessibility] Réduction des mouvements activée');
|
|
}
|
|
|
|
// Écouter les changements de préférence
|
|
mediaQuery.addEventListener('change', (e) => {
|
|
this.reducedMotion = e.matches;
|
|
if (this.reducedMotion) {
|
|
document.documentElement.classList.add('reduced-motion');
|
|
} else {
|
|
document.documentElement.classList.remove('reduced-motion');
|
|
}
|
|
//console.log('[Accessibility] Préférence de mouvement mise à jour:', this.reducedMotion);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Configurer les liens d'évitement (skip links)
|
|
* @private - Méthode d'accessibilité navigation
|
|
*/
|
|
setupSkipLinks() {
|
|
// Vérifier si les skip links existent déjà
|
|
const existingSkipLinks = document.querySelector('.skip-links');
|
|
if (existingSkipLinks) return;
|
|
|
|
// Créer les skip links
|
|
const skipLinks = document.createElement('nav');
|
|
skipLinks.className = 'skip-links';
|
|
skipLinks.setAttribute('aria-label', 'Liens d\'évitement');
|
|
skipLinks.innerHTML = `
|
|
<a href="#main-content" class="skip-link">Aller au contenu principal</a>
|
|
<a href="#navigation" class="skip-link">Aller à la navigation</a>
|
|
<a href="#footer" class="skip-link">Aller au pied de page</a>
|
|
`;
|
|
|
|
// Insérer au début du body
|
|
document.body.insertBefore(skipLinks, document.body.firstChild);
|
|
|
|
//console.log('[Accessibility] Liens d\'évitement créés');
|
|
}
|
|
}
|
|
|
|
// ============================================================================
|
|
// SOUS-CLASSE - PerformanceManager (PERFORMANCES)
|
|
// ============================================================================
|
|
|
|
/**
|
|
* Gestionnaire des performances et optimisation
|
|
*/
|
|
class PerformanceManager {
|
|
/**
|
|
* Constructeur - Initialise le monitoring de performance
|
|
*/
|
|
constructor() {
|
|
this.observers = [];
|
|
this.metrics = {};
|
|
}
|
|
|
|
/**
|
|
* Initialiser le monitoring de performance
|
|
* @public - Méthode appelée par UXManager
|
|
*/
|
|
init() {
|
|
//console.log('[Performance] Initialisation du monitoring...');
|
|
|
|
this.monitorPerformance();
|
|
this.setupLazyLoading();
|
|
this.setupIntersectionObserver();
|
|
this.setupIdleCallback();
|
|
|
|
//console.log('[Performance] Monitoring activé');
|
|
}
|
|
|
|
/**
|
|
* Monitorer les métriques de performance web vitales
|
|
* @private - Méthode de monitoring Core Web Vitals
|
|
*/
|
|
monitorPerformance() {
|
|
// Monitoring LCP (Largest Contentful Paint)
|
|
if ('PerformanceObserver' in window) {
|
|
const observer = new PerformanceObserver((list) => {
|
|
for (const entry of list.getEntries()) {
|
|
switch (entry.entryType) {
|
|
case 'largest-contentful-paint':
|
|
this.metrics.lcp = entry.startTime;
|
|
//console.log('[Performance] LCP:', entry.startTime.toFixed(2), 'ms');
|
|
break;
|
|
case 'first-input':
|
|
this.metrics.fid = entry.processingStart - entry.startTime;
|
|
//console.log('[Performance] FID:', this.metrics.fid.toFixed(2), 'ms');
|
|
break;
|
|
case 'layout-shift':
|
|
if (!entry.hadRecentInput) {
|
|
this.metrics.cls = (this.metrics.cls || 0) + entry.value;
|
|
//console.log('[Performance] CLS cumulé:', this.metrics.cls.toFixed(4));
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
|
|
observer.observe({
|
|
entryTypes: ['largest-contentful-paint', 'first-input', 'layout-shift']
|
|
});
|
|
|
|
this.observers.push(observer);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Configurer le lazy loading pour les images
|
|
* @private - Méthode d'optimisation de chargement
|
|
*/
|
|
setupLazyLoading() {
|
|
// Utiliser le lazy loading natif si disponible
|
|
if ('loading' in HTMLImageElement.prototype) {
|
|
document.querySelectorAll('img[loading="lazy"]').forEach(img => {
|
|
img.addEventListener('load', () => {
|
|
img.classList.add('loaded');
|
|
//console.log('[Performance] Image chargée:', img.src);
|
|
});
|
|
|
|
img.addEventListener('error', () => {
|
|
//console.warn('[Performance] Erreur de chargement image:', img.src);
|
|
});
|
|
});
|
|
} else {
|
|
// Fallback pour les navigateurs plus anciens
|
|
this.setupIntersectionObserverForImages();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Configurer l'Intersection Observer pour les images (fallback)
|
|
* @private - Méthode de lazy loading alternatif
|
|
*/
|
|
setupIntersectionObserverForImages() {
|
|
const lazyImages = document.querySelectorAll('img[data-src]');
|
|
|
|
const imageObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const img = entry.target;
|
|
img.src = img.dataset.src;
|
|
img.classList.add('loaded');
|
|
imageObserver.unobserve(img);
|
|
}
|
|
});
|
|
});
|
|
|
|
lazyImages.forEach(img => imageObserver.observe(img));
|
|
this.observers.push(imageObserver);
|
|
}
|
|
|
|
/**
|
|
* Configurer l'Intersection Observer pour les éléments
|
|
* @private - Méthode d'animation au défilement
|
|
*/
|
|
setupIntersectionObserver() {
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('in-view');
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.1,
|
|
rootMargin: '50px'
|
|
});
|
|
|
|
// Observer les cartes de contenu
|
|
document.querySelectorAll('.content-card').forEach(card => {
|
|
observer.observe(card);
|
|
});
|
|
|
|
this.observers.push(observer);
|
|
}
|
|
|
|
/**
|
|
* Configurer les callbacks idle (traitements en arrière-plan)
|
|
* @private - Méthode d'optimisation des ressources
|
|
*/
|
|
setupIdleCallback() {
|
|
if ('requestIdleCallback' in window) {
|
|
requestIdleCallback(() => {
|
|
// Tâches de basse priorité à exécuter pendant les périodes d'inactivité
|
|
this.cleanupOldData();
|
|
this.prefetchImportantLinks();
|
|
}, { timeout: 2000 });
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Nettoyer les données anciennes
|
|
* @private - Méthode de nettoyage
|
|
*/
|
|
cleanupOldData() {
|
|
// Exemple : nettoyer le cache local si trop volumineux
|
|
// À implémenter selon les besoins
|
|
}
|
|
|
|
/**
|
|
* Précharger les liens importants
|
|
* @private - Méthode de préchargement
|
|
*/
|
|
prefetchImportantLinks() {
|
|
// Exemple : précharger les pages fréquemment visitées
|
|
// À implémenter selon l'analyse d'usage
|
|
}
|
|
|
|
/**
|
|
* Nettoyer les observers (pour la mémoire)
|
|
* @public - Méthode de nettoyage
|
|
*/
|
|
cleanup() {
|
|
this.observers.forEach(observer => {
|
|
if (observer && typeof observer.disconnect === 'function') {
|
|
observer.disconnect();
|
|
}
|
|
});
|
|
this.observers = [];
|
|
}
|
|
}
|
|
|
|
// ============================================================================
|
|
// SOUS-CLASSE - LanguageManager (GESTION DES LANGUES)
|
|
// ============================================================================
|
|
|
|
/**
|
|
* Gestionnaire du changement de langue
|
|
*/
|
|
class LanguageManager {
|
|
/**
|
|
* Constructeur - Initialise les textes selon la langue
|
|
*/
|
|
constructor() {
|
|
this.currentLang = null;
|
|
}
|
|
|
|
/**
|
|
* Initialiser la gestion des langues
|
|
* @public - Méthode appelée par UXManager
|
|
*/
|
|
init() {
|
|
this.detectCurrentLanguage();
|
|
this.updateLanguageTexts();
|
|
|
|
//console.log('[Language] Gestionnaire de langue initialisé:', this.currentLang);
|
|
}
|
|
|
|
/**
|
|
* Détecter la langue actuelle depuis la configuration
|
|
* @private - Méthode de détection
|
|
*/
|
|
detectCurrentLanguage() {
|
|
this.currentLang = window.appConfig?.isAnglophone ? 'en_US' : 'fr_FR';
|
|
}
|
|
|
|
/**
|
|
* Changer la langue de l'interface
|
|
* @public - Méthode accessible globalement
|
|
*/
|
|
changeLanguage() {
|
|
const newLang = this.currentLang === 'en_US' ? 'fr_FR' : 'en_US';
|
|
const messages = window.appConfig?.isAnglophone
|
|
? {
|
|
title: 'Change Language',
|
|
text: 'Switch to French?',
|
|
confirm: 'Switch',
|
|
cancel: 'Cancel'
|
|
}
|
|
: {
|
|
title: 'Changer de langue',
|
|
text: 'Passer en Anglais?',
|
|
confirm: 'Changer',
|
|
cancel: 'Annuler'
|
|
};
|
|
|
|
// Demander confirmation à l'utilisateur
|
|
Swal.fire({
|
|
title: messages.title,
|
|
text: messages.text,
|
|
icon: 'question',
|
|
showCancelButton: true,
|
|
confirmButtonText: messages.confirm,
|
|
cancelButtonText: messages.cancel,
|
|
allowOutsideClick: true,
|
|
allowEscapeKey: true
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
// Rediriger vers la page de connexion avec le nouveau paramètre de langue
|
|
const redirectUrl = window.appConfig?.racineWeb +
|
|
'Connexion/index?langue=' + newLang;
|
|
//console.log('[Language] Changement de langue vers:', newLang);
|
|
window.location.href = redirectUrl;
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Mettre à jour les textes dynamiques selon la langue
|
|
* @private - Méthode de mise à jour des textes
|
|
*/
|
|
updateLanguageTexts() {
|
|
// À implémenter: mise à jour des textes dynamiques non gérés par le serveur
|
|
// Cette méthode peut être étendue pour gérer les textes côté client
|
|
|
|
// Exemple: Mettre à jour le titre de la page en fonction de la langue
|
|
const pageTitle = document.title;
|
|
if (this.currentLang === 'en_US' && !pageTitle.includes('RH Portal')) {
|
|
// Traduire vers l'anglais si nécessaire
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Obtenir la langue courante
|
|
* @returns {string} Code de langue (fr_FR ou en_US)
|
|
* @public - Méthode d'accès à la langue
|
|
*/
|
|
getCurrentLanguage() {
|
|
return this.currentLang;
|
|
}
|
|
}
|
|
|
|
// ============================================================================
|
|
// INITIALISATION ET EXPOSITION GLOBALE
|
|
// ============================================================================
|
|
|
|
/**
|
|
* Initialiser l'application après le chargement du DOM
|
|
* Point d'entrée principal de l'application
|
|
*/
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
//console.log('[App] DOM chargé, initialisation de l\'application...');
|
|
|
|
// Vérifier que la configuration est disponible
|
|
if (!window.appConfig) {
|
|
//console.warn('[App] Configuration non trouvée, création par défaut...');
|
|
window.appConfig = {
|
|
activeParentId: '',
|
|
activeChildId: '',
|
|
activeLink: '',
|
|
racineWeb: '/',
|
|
baseUrl: '/',
|
|
isAnglophone: false,
|
|
debugMode: false
|
|
};
|
|
}
|
|
|
|
// Créer l'instance principale
|
|
window.appUX = new UXManager();
|
|
|
|
// Marquer le chargement comme terminé
|
|
setTimeout(() => {
|
|
document.body.classList.add('loaded');
|
|
//console.log('[App] Portail RH Inter Santé initialisé avec succès');
|
|
|
|
// Émettre un événement personnalisé
|
|
document.dispatchEvent(new CustomEvent('app:initialized'));
|
|
}, 100);
|
|
});
|
|
|
|
// ============================================================================
|
|
// FONCTIONS GLOBALES D'ACCÈS RAPIDE
|
|
// ============================================================================
|
|
|
|
/**
|
|
* Obtenir le gestionnaire de notifications
|
|
* @returns {NotificationManager} Instance du gestionnaire de notifications
|
|
*/
|
|
function appNotifications() {
|
|
return window.appUX?.notifications;
|
|
}
|
|
|
|
/**
|
|
* Obtenir le gestionnaire de navigation
|
|
* @returns {NavigationManager} Instance du gestionnaire de navigation
|
|
*/
|
|
function appNavigation() {
|
|
return window.appUX?.navigation;
|
|
}
|
|
|
|
/**
|
|
* Obtenir le gestionnaire de langues
|
|
* @returns {LanguageManager} Instance du gestionnaire de langues
|
|
*/
|
|
function appLanguage() {
|
|
return window.appUX?.language;
|
|
}
|
|
|
|
/**
|
|
* Obtenir le gestionnaire d'accessibilité
|
|
* @returns {AccessibilityManager} Instance du gestionnaire d'accessibilité
|
|
*/
|
|
function appAccessibility() {
|
|
return window.appUX?.accessibility;
|
|
}
|
|
|
|
// ============================================================================
|
|
// API PUBLIQUE GLOBALE
|
|
// ============================================================================
|
|
|
|
/**
|
|
* API publique globale pour l'interaction avec le UX Manager
|
|
* Permet un accès simple aux fonctionnalités principales
|
|
*/
|
|
window.uxManager = {
|
|
/**
|
|
* Basculer le panneau contextuel
|
|
*/
|
|
toggleContextPanel: () => window.appUX?.toggleContextPanel(),
|
|
|
|
/**
|
|
* Afficher les notifications
|
|
*/
|
|
showNotifications: () => window.appUX?.notifications?.showMessagesModal(),
|
|
|
|
/**
|
|
* Changer la langue
|
|
*/
|
|
changeLanguage: () => window.appUX?.language?.changeLanguage(),
|
|
|
|
/**
|
|
* Annoncer un message pour l'accessibilité
|
|
* @param {string} message - Message à annoncer
|
|
*/
|
|
announce: (message) => window.appUX?.accessibility?.announce(message),
|
|
|
|
/**
|
|
* Ouvrir un menu spécifique
|
|
* @param {string} menuId - ID du menu à ouvrir
|
|
*/
|
|
openMenu: (menuId) => window.appUX?.navigation?.openMenuById(menuId),
|
|
|
|
/**
|
|
* Fermer tous les menus
|
|
*/
|
|
closeAllMenus: () => window.appUX?.navigation?.closeAllMenus(),
|
|
|
|
/**
|
|
* Tester le système (mode debug)
|
|
*/
|
|
testSystem: () => {
|
|
if (window.appConfig?.debugMode) {
|
|
/*console.group('[UX Manager] Test du système');
|
|
console.log('App UX:', window.appUX);
|
|
console.log('Navigation:', window.appUX?.navigation);
|
|
console.log('Config:', window.appConfig);
|
|
console.groupEnd();*/
|
|
}
|
|
}
|
|
};
|
|
|
|
// ============================================================================
|
|
// EXPORT POUR LES MODULES ES6 (si utilisé avec bundler)
|
|
// ============================================================================
|
|
|
|
// Note: Décommentez si vous utilisez un bundler moderne
|
|
/*
|
|
export {
|
|
UXManager,
|
|
NavigationManager,
|
|
ContextPanelManager,
|
|
NotificationManager,
|
|
AccessibilityManager,
|
|
PerformanceManager,
|
|
LanguageManager
|
|
};
|
|
*/
|
|
|
|
//console.log('[UX Manager] Module chargé et prêt à l\'emploi');
|