diff --git a/themes/one-pager/assets/js/scripts.js b/themes/one-pager/assets/js/scripts.js index c4f6c7c..37cbdcf 100644 --- a/themes/one-pager/assets/js/scripts.js +++ b/themes/one-pager/assets/js/scripts.js @@ -31,30 +31,33 @@ function isAllowedArtist(artist) { } // ============================================ -// 2. CUSTOM LIGHTBOX +// 2. CUSTOM LIGHTBOX (UPDATED) // ============================================ -let currentPhotos = []; -let currentIndex = 0; +let allPicturesArray = []; +let currentPhotoIndex = 0; -// Build photo array from DOM -function buildPhotoArray() { - const photoItems = document.querySelectorAll('.photo-item'); - currentPhotos = []; - photoItems.forEach(item => { - const image = item.querySelector('img'); - const date = item.dataset.date || ''; - const pubkey = item.dataset.pubkey || ''; - const alt = item.dataset.alt || ''; - if (image) { - currentPhotos.push({ - url: image.src, - alt: alt || image.alt || '', - date: date, - pubkey: pubkey - }); - } +// Helper function to create a picture element +function createPictureElement(picture) { + const item = document.createElement('div'); + item.className = 'photo-item'; + item.dataset.image = picture.url; + item.dataset.alt = picture.alt; + item.dataset.created = picture.created_at; + item.dataset.pubkey = picture.pubkey || ''; + + const date = new Date(picture.created_at * 1000); + const dateStr = date.toLocaleDateString('en-US', { + year: 'numeric', month: 'short', day: 'numeric' }); + item.dataset.date = dateStr; + + item.innerHTML = ` + ${picture.url ? `${picture.alt}` : ''} +
📅 ${dateStr}
+ `; + + return item; } // Open lightbox @@ -65,26 +68,48 @@ function openLightbox(index) { const lightboxMeta = document.getElementById('lightboxMeta'); const lightboxCounter = document.getElementById('lightboxCounter'); - if (!lightbox || !lightboxImage || currentPhotos.length === 0) return; + if (!lightbox || !lightboxImage || allPicturesArray.length === 0) return; - if (index < 0) index = currentPhotos.length - 1; - if (index >= currentPhotos.length) index = 0; - currentIndex = index; + if (index < 0) index = allPicturesArray.length - 1; + if (index >= allPicturesArray.length) index = 0; + currentPhotoIndex = index; + + const photo = allPicturesArray[currentPhotoIndex]; - const photo = currentPhotos[currentIndex]; lightboxImage.src = photo.url; lightboxImage.alt = photo.alt; lightboxCaption.textContent = photo.alt; - let metaText = ''; - if (photo.date) metaText += `📅 ${photo.date}`; + const date = new Date(photo.created_at * 1000); + const dateStr = date.toLocaleDateString('en-US', { + year: 'numeric', month: 'short', day: 'numeric' + }); - lightboxMeta.textContent = metaText || '📅 No date available'; + let metaText = `📅 ${dateStr}`; - lightboxCounter.textContent = `${currentIndex + 1} / ${currentPhotos.length}`; + lightboxMeta.textContent = metaText; + + lightboxCounter.textContent = `${currentPhotoIndex + 1} / ${allPicturesArray.length}`; lightbox.classList.add('active'); document.body.style.overflow = 'hidden'; + + // Preload next and previous images + preloadAdjacentImages(currentPhotoIndex); +} + +function preloadAdjacentImages(index) { + const nextIndex = (index + 1) % allPicturesArray.length; + if (nextIndex !== index) { + const nextImg = new Image(); + nextImg.src = allPicturesArray[nextIndex].url; + } + + const prevIndex = (index - 1 + allPicturesArray.length) % allPicturesArray.length; + if (prevIndex !== index) { + const prevImg = new Image(); + prevImg.src = allPicturesArray[prevIndex].url; + } } // Close lightbox @@ -96,8 +121,8 @@ function closeLightbox() { } // Navigate -function prevPhoto() { openLightbox(currentIndex - 1); } -function nextPhoto() { openLightbox(currentIndex + 1); } +function prevPhoto() { openLightbox(currentPhotoIndex - 1); } +function nextPhoto() { openLightbox(currentPhotoIndex + 1); } // Initialize lightbox event listeners function initLightbox() { @@ -108,14 +133,16 @@ function initLightbox() { if (!lightbox) return; - buildPhotoArray(); - // Photo click listeners - document.querySelectorAll('.photo-item img').forEach((img, index) => { + document.querySelectorAll('.photo-item img').forEach((img) => { img.removeEventListener('click', img._lightboxClick); img._lightboxClick = function(e) { e.preventDefault(); - openLightbox(index); + const url = this.src; + const fullIndex = allPicturesArray.findIndex(p => p.url === url); + if (fullIndex !== -1) { + openLightbox(fullIndex); + } }; img.addEventListener('click', img._lightboxClick); }); @@ -200,7 +227,6 @@ function renderMusicTracks(tracks, containerId, randomize = false) { else if (key === 'image') image = value; else if (key === 'artist') artist = value; else if (key === 'album') album = value; - // ONLY collect tags with key 't' (genre tags) else if (key === 't') genreTags.push(value); else if (key === 'alt') alt = value; }); @@ -218,7 +244,6 @@ function renderMusicTracks(tracks, containerId, randomize = false) { ${album ? `

${album}

` : ''} ${url ? `` : ''} - ${genreTags.length > 0 ? `
${genreTags.map(t => `${t}`).join('')} @@ -258,18 +283,17 @@ function handleLyricsToggle() { } // ============================================ -// 4. PICTURES RENDERER +// 4. PICTURES RENDERER (UPDATED) // ============================================ function renderRandomPictures(picturesData, containerId, randomize = false) { const container = document.getElementById(containerId); if (!container) return; - // First, flatten all pictures from all events + // Flatten all pictures from all events let allPictures = []; picturesData.forEach(event => { - // Check if this event has multiple imeta tags const imetaTags = []; event.tags.forEach(tag => { if (tag[0] === 'imeta') { @@ -278,12 +302,10 @@ function renderRandomPictures(picturesData, containerId, randomize = false) { }); if (imetaTags.length > 0) { - // Parse each imeta tag imetaTags.forEach(imetaTag => { let imageUrl = ''; let alt = event.content || ''; - // The imeta tag is an array of strings imetaTag.forEach(item => { if (typeof item === 'string') { if (item.startsWith('url ')) { @@ -305,7 +327,6 @@ function renderRandomPictures(picturesData, containerId, randomize = false) { } }); } else { - // Fallback: single image event (kind 20 with one imeta) let imageUrl = ''; let alt = event.content || ''; @@ -330,39 +351,29 @@ function renderRandomPictures(picturesData, containerId, randomize = false) { } }); - // Now select from all pictures - let selected; + // Sort or shuffle + let sortedPictures; if (randomize) { - const shuffled = shuffleArray(allPictures); - selected = shuffled.slice(0, 6); + sortedPictures = shuffleArray(allPictures); } else { - const sorted = [...allPictures].sort((a, b) => b.created_at - a.created_at); - selected = sorted.slice(0, 6); + sortedPictures = [...allPictures].sort((a, b) => b.created_at - a.created_at); } + // Store all pictures globally for the lightbox + allPicturesArray = sortedPictures; + + // Show first 6, or all if less than 6 + const initialCount = Math.min(6, sortedPictures.length); + const selected = sortedPictures.slice(0, initialCount); + container.innerHTML = ''; selected.forEach(picture => { - const item = document.createElement('div'); - item.className = 'photo-item'; - item.dataset.image = picture.url; - item.dataset.alt = picture.alt; - - const date = new Date(picture.created_at * 1000); - const dateStr = date.toLocaleDateString('en-US', { - year: 'numeric', month: 'short', day: 'numeric' - }); - item.dataset.date = dateStr; - item.dataset.pubkey = picture.pubkey || ''; - - item.innerHTML = ` - ${picture.url ? `${picture.alt}` : ''} -
📅 ${dateStr}
- `; - + const item = createPictureElement(picture); container.appendChild(item); }); + // Initialize lightbox initLightbox(); } @@ -509,7 +520,7 @@ document.addEventListener('DOMContentLoaded', function() { }); }); - // Smooth scrolling for navigation links (both main nav and sticky nav) + // Smooth scrolling for navigation links document.querySelectorAll('nav a').forEach(link => { link.addEventListener('click', function(e) { e.preventDefault();