Spaces:

secutorpro
/

comsync-pro-team-connect-hub

Running

comsync-pro-team-connect-hub / components /bootstrap.js

🐳 23/08 - 19:04 - corrige et ameliore le systeme

2e0e4d5 verified 2 months ago

4.93 kB

// ComSync Pro - Main Bootstrap Script
// Handles initialization, theme management, and navigation state

(function() {
  // State management
  const ComSyncState = {
    theme: 'dark',
    sidebarOpen: true,
    activePage: window.location.pathname,
    lastActivity: Date.now(),
    notifications: 3
  };

  // Storage utilities
  const Storage = {
    set: (key, value) => localStorage.setItem(`comsync_${key}`, JSON.stringify(value)),
    get: (key, defaultValue) => {
      const stored = localStorage.getItem(`comsync_${key}`);
      return stored ? JSON.parse(stored) : defaultValue;
    },
    update: (key, updates) => {
      const current = Storage.get(key, {});
      const updated = { ...current, ...updates };
      Storage.set(key, updated);
      return updated;
    }
  };

  // Initialize preferences
  function initPreferences() {
    ComSyncState.theme = Storage.get('theme', 'dark');
    ComSyncState.sidebarOpen = Storage.get('sidebarOpen', true);
    
    // Apply theme
    if (ComSyncState.theme === 'light') {
      document.body.classList.add('bg-gray-50');
      document.body.classList.add('text-gray-900');
      document.body.classList.remove('bg-gray-900');
      document.body.classList.remove('text-gray-100');
    }
    
    // Initialize theme toggle
    const themeToggle = document.getElementById('themeToggle');
    if (themeToggle) {
      themeToggle.addEventListener('click', () => toggleTheme());
    }
  }

  // Theme management
  window.toggleTheme = function() {
    const isDark = ComSyncState.theme === 'dark';
    ComSyncState.theme = isDark ? 'light' : 'dark';
    Storage.set('theme', ComSyncState.theme);
    
    if (ComSyncState.theme === 'light') {
      document.body.classList.add('bg-gray-50');
      document.body.classList.add('text-gray-900');
      document.body.classList.remove('bg-gray-900');
      document.body.classList.remove('text-gray-100');
      document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
      document.querySelector('[data-page="dashboard"]').classList.add('active');
    } else {
      document.body.classList.remove('bg-gray-50');
      document.body.classList.remove('text-gray-900');
      document.body.classList.add('bg-gray-900');
      document.body.classList.add('text-gray-100');
    }
    
    // Update Vanta.js background if available
    if (typeof VANTA !== 'undefined' && window.vantaInstance) {
      window.vantaInstance.setOptions({
        backgroundColor: ComSyncState.theme === 'dark' ? 0x111827 : 0xf9fafb,
        color: ComSyncState.theme === 'dark' ? 0x3a82ff : 0x818cf8
      });
    }
    
    // Update icons
    setTimeout(() => lucide.createIcons(), 100);
  };

  // Navigation state
  window.handleNavigation = function(targetPage) {
    ComSyncState.activePage = targetPage;
    Storage.set('activePage', targetPage);
    
    // Update active states
    document.querySelectorAll('.nav-link').forEach(link => {
      const href = link.getAttribute('href');
      if (href === '/' && targetPage === '/') {
        link.classList.add('active');
      } else if (targetPage.startsWith(href)) {
        link.classList.add('active');
      } else {
        link.classList.remove('active');
      }
    });
    
    // Add to history
    ComSyncState.lastActivity = Date.now();
  };

  // Initialize all components
  window.initComSync = function() {
    initPreferences();
    
    // Setup sidebar state
    const toggleSidebar = () => {
      ComSyncState.sidebarOpen = !ComSyncState.sidebarOpen;
      Storage.set('sidebarOpen', ComSyncState.sidebarOpen);
      document.body.style.setProperty('--sidebar-width', ComSyncState.sidebarOpen ? '256px' : '64px');
    };
    
    // Setup notifications
    const updateNotifications = () => {
      const badge = document.getElementById('notifBadge');
      if (badge && ComSyncState.notifications > 0) {
        badge.textContent = ComSyncState.notifications;
        badge.style.display = 'flex';
      }
    };
    
    updateNotifications();
    
    // Initialize theme button
    const themeBtn = document.getElementById('themeToggle');
    if (themeBtn) {
      themeBtn.addEventListener('click', window.toggleTheme);
    }
    
    // Add navigation handlers
    document.querySelectorAll('.nav-link').forEach(link => {
      link.addEventListener('click', function() {
        handleNavigation(this.getAttribute('href'));
      });
    });
    
    // Handle popstate for back/forward
    window.addEventListener('popstate', () => {
      handleNavigation(window.location.pathname);
    });
    
    // Initialize active page
    handleNavigation(window.location.pathname);
    
    console.log('ComSync Pro initialized successfully');
  };

  // Bootstrap on DOM ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', window.initComSync);
  } else {
    window.initComSync();
  }
})();

	// ComSync Pro - Main Bootstrap Script
	// Handles initialization, theme management, and navigation state

	(function() {
	// State management
	const ComSyncState = {
	theme: 'dark',
	sidebarOpen: true,
	activePage: window.location.pathname,
	lastActivity: Date.now(),
	notifications: 3
	};

	// Storage utilities
	const Storage = {
	set: (key, value) => localStorage.setItem(`comsync_${key}`, JSON.stringify(value)),
	get: (key, defaultValue) => {
	const stored = localStorage.getItem(`comsync_${key}`);
	return stored ? JSON.parse(stored) : defaultValue;
	},
	update: (key, updates) => {
	const current = Storage.get(key, {});
	const updated = { ...current, ...updates };
	Storage.set(key, updated);
	return updated;
	}
	};

	// Initialize preferences
	function initPreferences() {
	ComSyncState.theme = Storage.get('theme', 'dark');
	ComSyncState.sidebarOpen = Storage.get('sidebarOpen', true);

	// Apply theme
	if (ComSyncState.theme === 'light') {
	document.body.classList.add('bg-gray-50');
	document.body.classList.add('text-gray-900');
	document.body.classList.remove('bg-gray-900');
	document.body.classList.remove('text-gray-100');
	}

	// Initialize theme toggle
	const themeToggle = document.getElementById('themeToggle');
	if (themeToggle) {
	themeToggle.addEventListener('click', () => toggleTheme());
	}
	}

	// Theme management
	window.toggleTheme = function() {
	const isDark = ComSyncState.theme === 'dark';
	ComSyncState.theme = isDark ? 'light' : 'dark';
	Storage.set('theme', ComSyncState.theme);

	if (ComSyncState.theme === 'light') {
	document.body.classList.add('bg-gray-50');
	document.body.classList.add('text-gray-900');
	document.body.classList.remove('bg-gray-900');
	document.body.classList.remove('text-gray-100');
	document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
	document.querySelector('[data-page="dashboard"]').classList.add('active');
	} else {
	document.body.classList.remove('bg-gray-50');
	document.body.classList.remove('text-gray-900');
	document.body.classList.add('bg-gray-900');
	document.body.classList.add('text-gray-100');
	}

	// Update Vanta.js background if available
	if (typeof VANTA !== 'undefined' && window.vantaInstance) {
	window.vantaInstance.setOptions({
	backgroundColor: ComSyncState.theme === 'dark' ? 0x111827 : 0xf9fafb,
	color: ComSyncState.theme === 'dark' ? 0x3a82ff : 0x818cf8
	});
	}

	// Update icons
	setTimeout(() => lucide.createIcons(), 100);
	};

	// Navigation state
	window.handleNavigation = function(targetPage) {
	ComSyncState.activePage = targetPage;
	Storage.set('activePage', targetPage);

	// Update active states
	document.querySelectorAll('.nav-link').forEach(link => {
	const href = link.getAttribute('href');
	if (href === '/' && targetPage === '/') {
	link.classList.add('active');
	} else if (targetPage.startsWith(href)) {
	link.classList.add('active');
	} else {
	link.classList.remove('active');
	}
	});

	// Add to history
	ComSyncState.lastActivity = Date.now();
	};

	// Initialize all components
	window.initComSync = function() {
	initPreferences();

	// Setup sidebar state
	const toggleSidebar = () => {
	ComSyncState.sidebarOpen = !ComSyncState.sidebarOpen;
	Storage.set('sidebarOpen', ComSyncState.sidebarOpen);
	document.body.style.setProperty('--sidebar-width', ComSyncState.sidebarOpen ? '256px' : '64px');
	};

	// Setup notifications
	const updateNotifications = () => {
	const badge = document.getElementById('notifBadge');
	if (badge && ComSyncState.notifications > 0) {
	badge.textContent = ComSyncState.notifications;
	badge.style.display = 'flex';
	}
	};

	updateNotifications();

	// Initialize theme button
	const themeBtn = document.getElementById('themeToggle');
	if (themeBtn) {
	themeBtn.addEventListener('click', window.toggleTheme);
	}

	// Add navigation handlers
	document.querySelectorAll('.nav-link').forEach(link => {
	link.addEventListener('click', function() {
	handleNavigation(this.getAttribute('href'));
	});
	});

	// Handle popstate for back/forward
	window.addEventListener('popstate', () => {
	handleNavigation(window.location.pathname);
	});

	// Initialize active page
	handleNavigation(window.location.pathname);

	console.log('ComSync Pro initialized successfully');
	};

	// Bootstrap on DOM ready
	if (document.readyState === 'loading') {
	document.addEventListener('DOMContentLoaded', window.initComSync);
	} else {
	window.initComSync();
	}
	})();