570 lines
19 KiB
JavaScript
570 lines
19 KiB
JavaScript
// UX Manager - Gestionnaire d'expérience utilisateur modulaire
|
|
class UXManager {
|
|
constructor() {
|
|
this.navigation = new NavigationManager();
|
|
this.contextPanel = new ContextPanelManager();
|
|
this.notifications = new NotificationManager();
|
|
this.accessibility = new AccessibilityManager();
|
|
this.performance = new PerformanceManager();
|
|
this.language = new LanguageManager();
|
|
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
console.log('[UX Manager] Initialisation...');
|
|
this.navigation.init();
|
|
this.contextPanel.init();
|
|
this.notifications.init();
|
|
this.accessibility.init();
|
|
this.performance.init();
|
|
this.language.init();
|
|
|
|
// Vérifier la session
|
|
this.checkSession();
|
|
|
|
// Initialiser le Service Worker
|
|
this.initServiceWorker();
|
|
}
|
|
|
|
toggleContextPanel() {
|
|
this.contextPanel.toggle();
|
|
}
|
|
|
|
toggleSidebar() {
|
|
const sidebar = document.getElementById('sidebar');
|
|
sidebar.classList.toggle('show');
|
|
}
|
|
|
|
checkSession() {
|
|
const dureeSession = parseInt(document.getElementById('dureeSession').value) || 30;
|
|
const dureeMinutes = dureeSession * 60 * 1000;
|
|
|
|
setInterval(() => {
|
|
const derniereAction = sessionStorage.getItem('derniere_action');
|
|
const maintenant = Date.now();
|
|
|
|
if (derniereAction && (maintenant - derniereAction > dureeMinutes)) {
|
|
this.showSessionWarning();
|
|
}
|
|
}, 60000); // Vérifier toutes les minutes
|
|
}
|
|
|
|
showSessionWarning() {
|
|
const isAnglophone = window.appConfig.isAnglophone;
|
|
const message = isAnglophone
|
|
? 'Your session will expire soon. Do you want to extend it?'
|
|
: 'Votre session va bientôt expirer. Souhaitez-vous la prolonger?';
|
|
|
|
Swal.fire({
|
|
title: isAnglophone ? 'Session Warning' : 'Avertissement de session',
|
|
text: message,
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonText: isAnglophone ? 'Extend' : 'Prolonger',
|
|
cancelButtonText: isAnglophone ? 'Logout' : 'Déconnexion'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
sessionStorage.setItem('derniere_action', Date.now());
|
|
} else {
|
|
window.location.href = window.appConfig.racineWeb + 'Connexion/deconnecter';
|
|
}
|
|
});
|
|
}
|
|
|
|
initServiceWorker() {
|
|
if ('serviceWorker' in navigator) {
|
|
navigator.serviceWorker.ready.then(registration => {
|
|
console.log('[UX Manager] Service Worker prêt:', registration.scope);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// Navigation Manager - Gestion des menus (VERSION CORRIGÉE)
|
|
class NavigationManager {
|
|
constructor() {
|
|
this.currentOpenMenu = null;
|
|
this.activeMenuId = null; // Menu actif basé sur la page courante
|
|
}
|
|
|
|
init() {
|
|
this.setupActiveMenu();
|
|
this.setupMenuBehavior();
|
|
this.setupKeyboardNavigation();
|
|
}
|
|
|
|
setupActiveMenu() {
|
|
// Déterminer le menu actif basé sur la page courante
|
|
const activeParentId = window.appConfig?.activeParentId;
|
|
const activeLink = window.appConfig?.activeLink;
|
|
|
|
console.log('[Navigation] Page active:', activeLink, 'Parent ID:', activeParentId);
|
|
|
|
if (activeParentId !== null && activeParentId !== '') {
|
|
this.activeMenuId = `submenu${activeParentId}`;
|
|
console.log('[Navigation] Menu actif détecté:', this.activeMenuId);
|
|
|
|
// Ouvrir seulement le menu actif
|
|
setTimeout(() => {
|
|
this.openMenu(this.activeMenuId);
|
|
this.currentOpenMenu = this.activeMenuId;
|
|
}, 100);
|
|
} else {
|
|
console.log('[Navigation] Aucun menu actif détecté');
|
|
// Fermer tous les menus par défaut
|
|
this.closeAllMenus();
|
|
}
|
|
}
|
|
|
|
setupMenuBehavior() {
|
|
// Pour chaque lien de menu avec sous-menu
|
|
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);
|
|
console.log('[Navigation] Clic sur menu:', targetId);
|
|
|
|
// Si on clique sur le menu déjà ouvert, on le ferme
|
|
if (this.currentOpenMenu === targetId) {
|
|
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 ailleurs
|
|
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 du menu actif
|
|
document.querySelectorAll('.nav-submenu').forEach(menu => {
|
|
menu.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
});
|
|
});
|
|
}
|
|
|
|
openMenu(menuId) {
|
|
const menu = document.getElementById(menuId);
|
|
const link = document.querySelector(`[href="#${menuId}"]`);
|
|
|
|
if (menu && link) {
|
|
// Retirer 'show' de 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)';
|
|
}
|
|
}
|
|
});
|
|
|
|
// Ouvrir le menu sélectionné
|
|
menu.classList.add('show');
|
|
link.setAttribute('aria-expanded', 'true');
|
|
link.classList.add('active');
|
|
|
|
const arrow = link.querySelector('.nav-arrow');
|
|
if (arrow) arrow.style.transform = 'rotate(90deg)';
|
|
|
|
console.log('[Navigation] Menu ouvert:', menuId);
|
|
}
|
|
}
|
|
|
|
closeMenu(menuId) {
|
|
const menu = document.getElementById(menuId);
|
|
const link = document.querySelector(`[href="#${menuId}"]`);
|
|
|
|
if (menu && link) {
|
|
// Ne pas fermer le menu actif si c'est celui de la page courante
|
|
if (menuId === this.activeMenuId) {
|
|
console.log('[Navigation] Menu actif, ne pas fermer:', menuId);
|
|
return;
|
|
}
|
|
|
|
menu.classList.remove('show');
|
|
link.setAttribute('aria-expanded', 'false');
|
|
link.classList.remove('active');
|
|
|
|
const arrow = link.querySelector('.nav-arrow');
|
|
if (arrow) arrow.style.transform = 'rotate(0deg)';
|
|
|
|
console.log('[Navigation] Menu fermé:', menuId);
|
|
}
|
|
}
|
|
|
|
closeAllMenus() {
|
|
// Ne fermer que les menus qui ne sont pas actifs
|
|
document.querySelectorAll('.nav-submenu.show').forEach(menu => {
|
|
if (menu.id !== this.activeMenuId) {
|
|
this.closeMenu(menu.id);
|
|
}
|
|
});
|
|
|
|
// Si aucun menu actif, réinitialiser
|
|
if (!this.activeMenuId) {
|
|
this.currentOpenMenu = null;
|
|
}
|
|
}
|
|
|
|
setupKeyboardNavigation() {
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') {
|
|
this.closeAllMenus();
|
|
}
|
|
|
|
// Navigation par flèches
|
|
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
|
const focused = document.activeElement;
|
|
if (focused.classList.contains('nav-link')) {
|
|
e.preventDefault();
|
|
this.navigateMenu(focused, e.key);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
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();
|
|
}
|
|
}
|
|
|
|
// Méthode publique pour forcer l'ouverture d'un menu
|
|
openMenuById(menuId) {
|
|
this.openMenu(menuId);
|
|
this.currentOpenMenu = menuId;
|
|
}
|
|
|
|
// Méthode publique pour forcer la fermeture
|
|
closeAllExceptActive() {
|
|
this.closeAllMenus();
|
|
}
|
|
}
|
|
|
|
// Context Panel Manager - Gestion du panneau de contexte
|
|
class ContextPanelManager {
|
|
constructor() {
|
|
this.panel = document.getElementById('contextPanel');
|
|
this.toggleButton = document.querySelector('.context-toggle');
|
|
this.proximityArea = document.querySelector('.proximity-hover-area');
|
|
this.isOpen = false;
|
|
}
|
|
|
|
init() {
|
|
this.setupProximityDetection();
|
|
this.setupKeyboardControls();
|
|
}
|
|
|
|
setupProximityDetection() {
|
|
if (!this.proximityArea) return;
|
|
|
|
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)';
|
|
}
|
|
});
|
|
|
|
// Initial opacity
|
|
this.toggleButton.style.opacity = '0.2';
|
|
}
|
|
|
|
setupKeyboardControls() {
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.ctrlKey && e.shiftKey && e.key === 'C') {
|
|
e.preventDefault();
|
|
this.toggle();
|
|
}
|
|
|
|
if (e.key === 'Escape' && this.isOpen) {
|
|
this.close();
|
|
}
|
|
});
|
|
}
|
|
|
|
toggle() {
|
|
if (this.isOpen) {
|
|
this.close();
|
|
} else {
|
|
this.open();
|
|
}
|
|
}
|
|
|
|
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
|
|
setTimeout(() => {
|
|
this.panel.querySelector('.context-close').focus();
|
|
}, 300);
|
|
}
|
|
|
|
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();
|
|
}
|
|
}
|
|
|
|
// Notification Manager
|
|
class NotificationManager {
|
|
constructor() {
|
|
this.countElement = document.getElementById('notificationCount');
|
|
this.unreadCount = 0;
|
|
}
|
|
|
|
init() {
|
|
this.loadNotifications();
|
|
this.setupPolling();
|
|
}
|
|
|
|
loadNotifications() {
|
|
// Simuler le chargement des notifications
|
|
this.updateCount(3); // Exemple: 3 notifications non lues
|
|
}
|
|
|
|
updateCount(count) {
|
|
this.unreadCount = count;
|
|
if (this.countElement) {
|
|
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;
|
|
}
|
|
}
|
|
|
|
setupPolling() {
|
|
// Vérifier les nouvelles notifications toutes les 30 secondes
|
|
setInterval(() => {
|
|
// À implémenter: appel AJAX pour vérifier les nouvelles notifications
|
|
// this.checkNewNotifications();
|
|
}, 30000);
|
|
}
|
|
|
|
showMessagesModal() {
|
|
const modal = new bootstrap.Modal(document.getElementById('messagesModal'));
|
|
modal.show();
|
|
|
|
// Charger les messages
|
|
this.loadMessages();
|
|
}
|
|
|
|
loadMessages() {
|
|
const container = document.getElementById('div_messagerie');
|
|
if (!container) return;
|
|
|
|
// Simuler le chargement des messages
|
|
container.innerHTML = `
|
|
<div class="list-group">
|
|
<div class="list-group-item">
|
|
<div class="d-flex w-100 justify-content-between">
|
|
<h6 class="mb-1">Nouvelle prescription</h6>
|
|
<small>Il y a 5 minutes</small>
|
|
</div>
|
|
<p class="mb-1">Une nouvelle prescription a été créée pour le bénéficiaire.</p>
|
|
</div>
|
|
<div class="list-group-item">
|
|
<div class="d-flex w-100 justify-content-between">
|
|
<h6 class="mb-1">Dérogation approuvée</h6>
|
|
<small>Il y a 2 heures</small>
|
|
</div>
|
|
<p class="mb-1">Votre demande de dérogation a été approuvée.</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// Accessibility Manager
|
|
class AccessibilityManager {
|
|
init() {
|
|
this.setupFocusManagement();
|
|
this.setupAriaLiveRegions();
|
|
this.detectReducedMotion();
|
|
}
|
|
|
|
setupFocusManagement() {
|
|
// Gérer le focus pour les modales
|
|
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();
|
|
});
|
|
}
|
|
|
|
setupAriaLiveRegions() {
|
|
// Créer une région ARIA live pour les notifications
|
|
const liveRegion = document.createElement('div');
|
|
liveRegion.setAttribute('aria-live', 'polite');
|
|
liveRegion.setAttribute('aria-atomic', 'true');
|
|
liveRegion.className = 'visually-hidden';
|
|
document.body.appendChild(liveRegion);
|
|
}
|
|
|
|
detectReducedMotion() {
|
|
const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
|
|
if (mediaQuery.matches) {
|
|
document.documentElement.classList.add('reduced-motion');
|
|
}
|
|
}
|
|
}
|
|
|
|
// Performance Manager
|
|
class PerformanceManager {
|
|
init() {
|
|
this.monitorPerformance();
|
|
this.setupLazyLoading();
|
|
this.setupIntersectionObserver();
|
|
}
|
|
|
|
monitorPerformance() {
|
|
if ('PerformanceObserver' in window) {
|
|
const observer = new PerformanceObserver((list) => {
|
|
for (const entry of list.getEntries()) {
|
|
if (entry.entryType === 'largest-contentful-paint') {
|
|
console.log('[Performance] LCP:', entry.startTime);
|
|
}
|
|
}
|
|
});
|
|
|
|
observer.observe({ entryTypes: ['largest-contentful-paint', 'first-input'] });
|
|
}
|
|
}
|
|
|
|
setupLazyLoading() {
|
|
// Lazy loading pour les images
|
|
if ('loading' in HTMLImageElement.prototype) {
|
|
document.querySelectorAll('img[loading="lazy"]').forEach(img => {
|
|
img.addEventListener('load', () => {
|
|
img.classList.add('loaded');
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
setupIntersectionObserver() {
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('in-view');
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.1
|
|
});
|
|
|
|
document.querySelectorAll('.content-card').forEach(card => {
|
|
observer.observe(card);
|
|
});
|
|
}
|
|
}
|
|
|
|
// Language Manager
|
|
class LanguageManager {
|
|
changeLanguage() {
|
|
const currentLang = window.appConfig.isAnglophone ? 'en_US' : 'fr_FR';
|
|
const newLang = currentLang === 'en_US' ? 'fr_FR' : 'en_US';
|
|
|
|
// Demander confirmation
|
|
const message = window.appConfig.isAnglophone
|
|
? 'Switch to French?'
|
|
: 'Passer en Anglais?';
|
|
|
|
Swal.fire({
|
|
title: window.appConfig.isAnglophone ? 'Change Language' : 'Changer de langue',
|
|
text: message,
|
|
icon: 'question',
|
|
showCancelButton: true,
|
|
confirmButtonText: window.appConfig.isAnglophone ? 'Switch' : 'Changer',
|
|
cancelButtonText: window.appConfig.isAnglophone ? 'Cancel' : 'Annuler'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
// Rediriger vers la page de connexion avec le nouveau paramètre de langue
|
|
window.location.href = window.appConfig.racineWeb +
|
|
'Connexion/index?langue=' + newLang;
|
|
}
|
|
});
|
|
}
|
|
|
|
init() {
|
|
// Initialiser les textes selon la langue
|
|
this.updateLanguageTexts();
|
|
}
|
|
|
|
updateLanguageTexts() {
|
|
// À implémenter: mise à jour des textes dynamiques
|
|
}
|
|
}
|
|
|
|
// Initialisation de l'application
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
window.appUX = new UXManager();
|
|
console.log('[App] Portail RH Inter Santé initialisé');
|
|
|
|
// Déclencher les animations après le chargement
|
|
setTimeout(() => {
|
|
document.body.classList.add('loaded');
|
|
}, 100);
|
|
});
|
|
|
|
// Fonctions globales
|
|
function appNotifications() {
|
|
return window.appUX?.notifications;
|
|
}
|
|
|
|
function appNavigation() {
|
|
return window.appUX?.navigation;
|
|
}
|
|
|
|
function appLanguage() {
|
|
return window.appUX?.language;
|
|
}
|
|
|
|
// Export pour les scripts externes
|
|
window.uxManager = {
|
|
toggleContextPanel: () => window.appUX?.toggleContextPanel(),
|
|
toggleSidebar: () => window.appUX?.toggleSidebar(),
|
|
showNotifications: () => window.appUX?.notifications.showMessagesModal()
|
|
}; |