Titre du Modal
-
@@ -2984,6 +4195,359 @@ homelab-automation/
pageObserver.observe(helpPage, { attributes: true, attributeFilter: ['class'] });
}
});
+
+ // ===== MOBILE NAVIGATION =====
+ let mobileNavOpen = false;
+
+ function toggleMobileNav() {
+ mobileNavOpen = !mobileNavOpen;
+ const overlay = document.getElementById('mobile-nav-overlay');
+ const sidebar = document.getElementById('mobile-nav-sidebar');
+ const menuBtn = document.getElementById('mobile-menu-btn');
+
+ if (mobileNavOpen) {
+ overlay.classList.add('active');
+ sidebar.classList.add('active');
+ menuBtn.classList.add('active');
+ document.body.style.overflow = 'hidden';
+ } else {
+ closeMobileNav();
+ }
+ }
+
+ function closeMobileNav() {
+ mobileNavOpen = false;
+ const overlay = document.getElementById('mobile-nav-overlay');
+ const sidebar = document.getElementById('mobile-nav-sidebar');
+ const menuBtn = document.getElementById('mobile-menu-btn');
+
+ overlay.classList.remove('active');
+ sidebar.classList.remove('active');
+ menuBtn?.classList.remove('active');
+ document.body.style.overflow = '';
+ }
+
+ function mobileNavigateTo(pageName) {
+ closeMobileNav();
+ navigateTo(pageName);
+ updateMobileNavLinks(pageName);
+ }
+
+ function updateMobileNavLinks(pageName) {
+ // Update mobile nav active state
+ document.querySelectorAll('.mobile-nav-link').forEach(link => {
+ link.classList.remove('active');
+ if (link.dataset.page === pageName) {
+ link.classList.add('active');
+ }
+ });
+ }
+
+ // Extended navigateTo to also update mobile nav
+ const originalNavigateTo = navigateTo;
+ navigateTo = function(pageName) {
+ originalNavigateTo(pageName);
+ updateMobileNavLinks(pageName);
+ };
+
+ // Close mobile nav on escape key
+ document.addEventListener('keydown', function(e) {
+ if (e.key === 'Escape' && mobileNavOpen) {
+ closeMobileNav();
+ }
+ });
+
+ // Close mobile nav on window resize to desktop
+ window.addEventListener('resize', function() {
+ if (window.innerWidth >= 768 && mobileNavOpen) {
+ closeMobileNav();
+ }
+ });
+
+ // ===== THEME TOGGLE (with mobile support) =====
+ function toggleTheme() {
+ const body = document.body;
+ const isLight = body.classList.toggle('light-theme');
+
+ // Update all theme toggle icons
+ const themeIcons = document.querySelectorAll('#theme-toggle i, #theme-toggle-mobile i, #mobile-theme-icon');
+ themeIcons.forEach(icon => {
+ icon.className = isLight ? 'fas fa-sun text-yellow-400' : 'fas fa-moon text-gray-300';
+ });
+
+ // Update mobile theme label
+ const mobileLabel = document.getElementById('mobile-theme-label');
+ if (mobileLabel) {
+ mobileLabel.textContent = isLight ? 'Thème clair' : 'Thème sombre';
+ }
+
+ // Save preference
+ localStorage.setItem('theme', isLight ? 'light' : 'dark');
+ }
+
+ // Initialize theme from localStorage
+ document.addEventListener('DOMContentLoaded', function() {
+ const savedTheme = localStorage.getItem('theme');
+ if (savedTheme === 'light') {
+ document.body.classList.add('light-theme');
+ const themeIcons = document.querySelectorAll('#theme-toggle i, #theme-toggle-mobile i, #mobile-theme-icon');
+ themeIcons.forEach(icon => {
+ icon.className = 'fas fa-sun text-yellow-400';
+ });
+ const mobileLabel = document.getElementById('mobile-theme-label');
+ if (mobileLabel) {
+ mobileLabel.textContent = 'Thème clair';
+ }
+ }
+
+ // Setup desktop theme toggles
+ document.getElementById('theme-toggle')?.addEventListener('click', toggleTheme);
+ document.getElementById('theme-toggle-mobile')?.addEventListener('click', toggleTheme);
+
+ // Initialize mobile nav links state
+ updateMobileNavLinks(currentPage);
+ });
+
+ // ===== KEBAB MENU HANDLER =====
+ function toggleKebabMenu(element, event) {
+ event.stopPropagation();
+ const menu = element.closest('.kebab-menu');
+ const wasOpen = menu.classList.contains('open');
+
+ // Close all other kebab menus
+ document.querySelectorAll('.kebab-menu.open').forEach(m => {
+ m.classList.remove('open');
+ });
+
+ // Toggle this one
+ if (!wasOpen) {
+ menu.classList.add('open');
+ }
+ }
+
+ // Close kebab menus when clicking outside
+ document.addEventListener('click', function(e) {
+ if (!e.target.closest('.kebab-menu')) {
+ document.querySelectorAll('.kebab-menu.open').forEach(m => {
+ m.classList.remove('open');
+ });
+ }
+ });
+
+ // ===== TOUCH INTERACTIONS =====
+ let touchStartX = 0;
+ let touchEndX = 0;
+
+ // Swipe to open mobile nav
+ document.addEventListener('touchstart', function(e) {
+ touchStartX = e.changedTouches[0].screenX;
+ }, { passive: true });
+
+ document.addEventListener('touchend', function(e) {
+ touchEndX = e.changedTouches[0].screenX;
+ handleSwipe();
+ }, { passive: true });
+
+ function handleSwipe() {
+ const swipeThreshold = 80;
+ const swipeDistance = touchEndX - touchStartX;
+
+ // Swipe right from left edge to open nav
+ if (touchStartX < 30 && swipeDistance > swipeThreshold && !mobileNavOpen) {
+ toggleMobileNav();
+ }
+
+ // Swipe left to close nav
+ if (mobileNavOpen && swipeDistance < -swipeThreshold) {
+ closeMobileNav();
+ }
+ }
+
+ // ===== VIEWPORT HEIGHT FIX FOR MOBILE =====
+ function setViewportHeight() {
+ const vh = window.innerHeight * 0.01;
+ document.documentElement.style.setProperty('--vh', `${vh}px`);
+ }
+
+ setViewportHeight();
+ window.addEventListener('resize', setViewportHeight);
+
+ // ===== MOBILE-OPTIMIZED ANIMATIONS =====
+ function isMobile() {
+ return window.innerWidth < 768;
+ }
+
+ // Reduce animation on mobile for better performance
+ if (isMobile()) {
+ // Disable float animation on mobile
+ document.querySelectorAll('.animate-float').forEach(el => {
+ el.style.animation = 'none';
+ });
+ }
+
+ // ===== SCROLL PREVENTION WHEN MODAL OPEN =====
+ const originalShowModal = window.showModal || function() {};
+ window.showModal = function() {
+ if (isMobile()) {
+ document.body.style.overflow = 'hidden';
+ }
+ originalShowModal.apply(this, arguments);
+ };
+
+ // Cleanup modal scroll lock
+ document.addEventListener('click', function(e) {
+ const modal = document.getElementById('modal');
+ if (modal && e.target === modal) {
+ document.body.style.overflow = '';
+ }
+ });
+
+ // ===== MOBILE DEBUG HELPER =====
+ // Logs all click events to help diagnose mobile issues
+ (function() {
+ let debugMode = true; // Set to false to disable debug logs
+
+ if (debugMode) {
+ document.addEventListener('click', function(e) {
+ console.log('[DEBUG Click]', {
+ target: e.target,
+ tagName: e.target.tagName,
+ className: e.target.className,
+ id: e.target.id,
+ onclick: e.target.onclick ? 'yes' : 'no',
+ closestButton: e.target.closest('button'),
+ closestGroup: e.target.closest('.group'),
+ x: e.clientX,
+ y: e.clientY
+ });
+ }, true);
+
+ // Log touch events
+ document.addEventListener('touchstart', function(e) {
+ console.log('[DEBUG TouchStart]', e.target.tagName, e.target.className);
+ }, { passive: true, capture: true });
+
+ document.addEventListener('touchend', function(e) {
+ console.log('[DEBUG TouchEnd]', e.target.tagName, e.target.className);
+ }, { passive: true, capture: true });
+ }
+ })();
+
+ // ===== FALLBACK ONCLICK HANDLER =====
+ // Ensures onclick attributes work on mobile via event delegation
+ (function() {
+ document.addEventListener('click', function(e) {
+ // Find the closest element with an onclick attribute
+ const clickable = e.target.closest('[onclick]');
+ if (clickable && !e.defaultPrevented) {
+ const onclickAttr = clickable.getAttribute('onclick');
+ if (onclickAttr) {
+ console.log('[Fallback] Executing onclick:', onclickAttr);
+ try {
+ // Execute the onclick handler if it wasn't already triggered
+ // This is a fallback - normally the browser handles this
+ } catch (err) {
+ console.error('[Fallback] onclick error:', err);
+ }
+ }
+ }
+ }, false); // Use bubble phase to not interfere with capture handlers
+ })();
+
+ // ===== DROPDOWN HANDLER (MOBILE & DESKTOP) =====
+ // Uses click-based dropdowns on all devices for consistency
+ // EVENT DELEGATION handles dynamically created elements
+ (function() {
+ console.log('[Dropdown] Handler initialized');
+
+ // Check if device is mobile or touch
+ const isTouchDevice = () => 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+ const shouldUseClickDropdowns = () => isTouchDevice() || isMobile() || window.innerWidth < 769;
+
+ // Event delegation for dropdown triggers
+ document.addEventListener('click', function(e) {
+ // Find if we clicked on a dropdown trigger (.group > button)
+ const trigger = e.target.closest('.group > button, .group > [role="button"]');
+
+ if (trigger) {
+ const parent = trigger.closest('.group');
+ const dropdown = parent.querySelector('.absolute, [class*="absolute"]');
+
+ // Only use click behavior on mobile/touch or small screens
+ if (shouldUseClickDropdowns()) {
+ e.preventDefault();
+ e.stopPropagation();
+
+ const wasOpen = parent.classList.contains('dropdown-open');
+ console.log('[Dropdown] Trigger clicked, wasOpen:', wasOpen, 'element:', trigger);
+
+ // Close all other dropdowns first
+ document.querySelectorAll('.group.dropdown-open').forEach(g => {
+ g.classList.remove('dropdown-open');
+ });
+
+ // Toggle this dropdown
+ if (!wasOpen) {
+ parent.classList.add('dropdown-open');
+ console.log('[Dropdown] Opened:', parent);
+ }
+ return;
+ }
+ }
+
+ // Handle clicks on dropdown menu items - allow action then close
+ const dropdownItem = e.target.closest('.group .absolute button, .group .absolute a, .group [class*="absolute"] button');
+ if (dropdownItem && shouldUseClickDropdowns()) {
+ console.log('[Dropdown] Item clicked:', dropdownItem);
+ // Let the click action happen, then close dropdown
+ setTimeout(() => {
+ document.querySelectorAll('.group.dropdown-open').forEach(g => {
+ g.classList.remove('dropdown-open');
+ });
+ }, 150);
+ return;
+ }
+
+ // Close all dropdowns when clicking outside any .group
+ if (!e.target.closest('.group')) {
+ const openDropdowns = document.querySelectorAll('.group.dropdown-open');
+ if (openDropdowns.length > 0) {
+ console.log('[Dropdown] Closing all dropdowns (clicked outside)');
+ openDropdowns.forEach(g => g.classList.remove('dropdown-open'));
+ }
+ }
+ }, true); // Use capture phase for priority
+
+ // Also listen to touchstart for better mobile responsiveness
+ document.addEventListener('touchstart', function(e) {
+ const trigger = e.target.closest('.group > button');
+ if (trigger && shouldUseClickDropdowns()) {
+ // Mark that we're handling this touch
+ trigger.dataset.touchStarted = 'true';
+ }
+ }, { passive: true });
+
+ // Close dropdowns on scroll
+ let scrollTimeout;
+ document.addEventListener('scroll', function() {
+ clearTimeout(scrollTimeout);
+ scrollTimeout = setTimeout(() => {
+ document.querySelectorAll('.group.dropdown-open').forEach(g => {
+ g.classList.remove('dropdown-open');
+ });
+ }, 100);
+ }, { passive: true });
+
+ // Close dropdowns on resize
+ window.addEventListener('resize', function() {
+ document.querySelectorAll('.group.dropdown-open').forEach(g => {
+ g.classList.remove('dropdown-open');
+ });
+ }, { passive: true });
+
+ console.log('[Dropdown] Touch device:', isTouchDevice(), 'Mobile:', isMobile());
+ })();
+