File size: 6,878 Bytes
a640871 8ed13f7 a640871 213f2b4 8ed13f7 a640871 8b942e7 a640871 8b942e7 a640871 5daef86 8b942e7 f00a7bc 8b942e7 72be969 8b942e7 a640871 213f2b4 a640871 8b942e7 a640871 8b942e7 a640871 8b942e7 a640871 8b942e7 a640871 8b942e7 a640871 8b942e7 213f2b4 8ed13f7 213f2b4 a640871 213f2b4 8ed13f7 a640871 8ed13f7 8b942e7 8ed13f7 8b942e7 213f2b4 72be969 8b942e7 213f2b4 72be969 8b942e7 72be969 8b942e7 213f2b4 72be969 8b942e7 72be969 8b942e7 8ed13f7 |
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 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 |
// main.js
import { app } from './init.js';
import { teamMembers, teamTagData } from './data/team.js';
import { initializeSearchUI } from './utils/search.js';
// Use global background image (loaded in index.html <head>)
const overallBackgroundImage = window.overallBackgroundImage;
// Scroll to section utility
export function scrollToSection(sectionId) {
const element = document.getElementById(sectionId);
if (element) {
const elementRect = element.getBoundingClientRect();
const absoluteElementTop = elementRect.top + window.pageYOffset;
const offset = 120; // Account for fixed header + some padding
window.scrollTo({
top: absoluteElementTop - offset,
behavior: 'smooth'
});
}
}
// Team member component
export function createTeamMember(name, role, hfUsername, tags) {
const colors = ['blue', 'green', 'purple', 'orange', 'indigo', 'pink'];
const colorIndex = name.length % colors.length;
const color = colors[colorIndex];
const initials = name.split(' ').map(n => n[0]).join('');
const tagElements = tags.map(tag => {
const tagInfo = teamTagData[tag];
return `<span class="inline-block px-2.5 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-blue-100 hover:text-blue-800 cursor-pointer transition-colors whitespace-nowrap" onclick="window.scrollToSection('${tagInfo.id}')">${tagInfo.name}</span>`;
}).join('');
return `
<div class="flex items-start space-x-3 p-3 rounded-lg hover:bg-gray-50 transition-colors">
<div class="flex-shrink-0">
<div class="w-14 h-14 rounded-full overflow-hidden bg-gradient-to-br from-${color}-400 to-${color}-600 flex items-center justify-center relative">
<img
src="/images/${hfUsername}.jpeg"
alt="${name}"
class="w-full h-full object-cover"
loading="lazy"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-white font-semibold text-base hidden w-full h-full items-center justify-center absolute">${initials}</span>
</div>
</div>
<div class="flex-1 min-w-0">
<h4 class="font-semibold text-gray-900 text-base">
<a href="https://huggingface.co/${hfUsername}" class="hover:text-blue-600 transition-colors" target="_blank">
${name}
</a>
</h4>
<p class="text-sm text-gray-600 mb-1.5">${role}</p>
<div class="flex gap-1.5 overflow-x-auto scrollbar-hide">
${tagElements}
</div>
</div>
</div>
`;
}
// Make router's scrollToSection globally available for onclick handlers
window.scrollToSection = scrollToSection;
// Scroll to top functionality
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
// Make scrollToTop globally available
window.scrollToTop = scrollToTop;
// Note: Navigation handling moved to router.js for unified control
// Initialize scroll to top button functionality
function initializeScrollToTop() {
const scrollToTopBtn = document.getElementById('scroll-to-top');
if (!scrollToTopBtn) return;
// Add click event listener
scrollToTopBtn.addEventListener('click', scrollToTop);
// Show/hide button based on scroll position
function toggleScrollToTopButton() {
const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
const showThreshold = 300; // Show button after scrolling 300px
if (scrollPosition > showThreshold) {
scrollToTopBtn.classList.remove('opacity-0', 'invisible');
scrollToTopBtn.classList.add('opacity-100', 'visible');
} else {
scrollToTopBtn.classList.remove('opacity-100', 'visible');
scrollToTopBtn.classList.add('opacity-0', 'invisible');
}
}
// Listen for scroll events
window.addEventListener('scroll', toggleScrollToTopButton);
// Initial check
toggleScrollToTopButton();
}
// Main UI initialization - called by bootstrap.js
export async function initializeUI() {
// Set overall background image
const backgroundImg = document.querySelector('#overall-background img');
if (backgroundImg) {
backgroundImg.src = `images/${overallBackgroundImage.image}`;
backgroundImg.alt = overallBackgroundImage.altText;
}
// Initialize scroll to top functionality
initializeScrollToTop();
// Initialize search UI with loaded artifacts
initializeSearchUI(window.allArtifacts || []);
// Initialize search sidebar toggle
initializeSearchToggle();
// Note: The router handles page-specific component initialization
// (e.g., team members, area cards) when loading each page
}
// Search sidebar toggle functionality
function initializeSearchToggle() {
const searchToggle = document.getElementById('search-toggle');
const searchSidebar = document.getElementById('search-sidebar');
const searchClose = document.getElementById('search-close');
const mainContent = document.getElementById('main-content');
const overlay = document.getElementById('sidebar-overlay');
function toggleSearch() {
const isOpen = !searchSidebar.classList.contains('translate-x-full');
const rightSidebarBg = document.getElementById('right-sidebar-background');
const isMobile = window.innerWidth < 768;
if (isOpen) {
searchSidebar.classList.add('translate-x-full');
rightSidebarBg.classList.add('hidden');
// Only adjust main content margin on desktop
if (!isMobile) {
mainContent.classList.remove('mr-80');
}
overlay.classList.add('hidden');
document.body.style.overflow = ''; // Re-enable scroll
} else {
searchSidebar.classList.remove('translate-x-full');
rightSidebarBg.classList.remove('hidden');
// Only adjust main content margin on desktop
if (!isMobile) {
mainContent.classList.add('mr-80');
}
overlay.classList.remove('hidden');
// Prevent body scroll on mobile when search is open
if (isMobile) {
document.body.style.overflow = 'hidden';
}
}
}
if (searchToggle) searchToggle.addEventListener('click', toggleSearch);
if (searchClose) searchClose.addEventListener('click', toggleSearch);
if (overlay) overlay.addEventListener('click', toggleSearch);
} |