File size: 3,123 Bytes
af4f87f aeeb334 af4f87f 1238bb5 af4f87f aeeb334 72be969 aeeb334 72be969 aeeb334 72be969 aeeb334 |
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 |
// Carousel.js - Carousel component for artifacts
import { renderArtifactCard } from './Card.js';
export function createArtifactCarousel(artifacts, containerId) {
const container = document.getElementById(containerId);
if (!container) return;
const cardsHtml = artifacts.map((artifact, index) =>
renderArtifactCard(artifact, { index, containerId })
).join('');
container.innerHTML = `
<div class="relative">
<!-- Carousel container -->
<div class="flex overflow-x-auto scrollbar-hide carousel-scroll space-x-4 pb-4" id="${containerId}-scroll">
${cardsHtml}
</div>
<!-- Navigation arrows (hidden on mobile) -->
<button class="carousel-arrow absolute left-0 top-1/2 transform -translate-y-1/2 bg-white shadow-lg rounded-full p-2 hover:bg-gray-50 transition-colors z-10"
onclick="scrollCarousel('${containerId}-scroll', -320)"
aria-label="Scroll carousel left">
<svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
<button class="carousel-arrow absolute right-0 top-1/2 transform -translate-y-1/2 bg-white shadow-lg rounded-full p-2 hover:bg-gray-50 transition-colors z-10"
onclick="scrollCarousel('${containerId}-scroll', 320)"
aria-label="Scroll carousel right">
<svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</button>
</div>
`;
}
// Utility function for carousel navigation
window.scrollCarousel = function(containerId, scrollAmount) {
const container = document.getElementById(containerId);
if (container) {
container.scrollBy({ left: scrollAmount, behavior: 'smooth' });
}
};
// Add toggle function
window.toggleCardView = function(cardId) {
const card = document.getElementById(cardId);
const defaultView = card.querySelector('.default-view');
const descriptionView = card.querySelector('.description-view');
const expandIcon = card.parentElement.querySelector('.expand-icon');
const collapseIcon = card.parentElement.querySelector('.collapse-icon');
if (defaultView.classList.contains('hidden')) {
// Show default view
defaultView.classList.remove('hidden');
descriptionView.classList.add('hidden');
expandIcon.classList.remove('hidden');
collapseIcon.classList.add('hidden');
} else {
// Show description view
defaultView.classList.add('hidden');
descriptionView.classList.remove('hidden');
expandIcon.classList.add('hidden');
collapseIcon.classList.remove('hidden');
}
}; |