File size: 4,931 Bytes
2e0e4d5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 | // 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();
}
})(); |