diff --git a/themes/one-pager/assets/js/scripts.js b/themes/one-pager/assets/js/scripts.js index cb84aa1..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,30 +283,54 @@ function handleLyricsToggle() { } // ============================================ -// 4. PICTURES RENDERER +// 4. PICTURES RENDERER (UPDATED) // ============================================ function renderRandomPictures(picturesData, containerId, randomize = false) { const container = document.getElementById(containerId); if (!container) return; - let selected; - if (randomize) { - const shuffled = shuffleArray(picturesData); - selected = shuffled.slice(0, 6); - } else { - const sorted = [...picturesData].sort((a, b) => b.created_at - a.created_at); - selected = sorted.slice(0, 6); - } + // Flatten all pictures from all events + let allPictures = []; - container.innerHTML = ''; + picturesData.forEach(event => { + const imetaTags = []; + event.tags.forEach(tag => { + if (tag[0] === 'imeta') { + imetaTags.push(tag); + } + }); - selected.forEach(picture => { - let imageUrl = ''; - let alt = picture.content || ''; + if (imetaTags.length > 0) { + imetaTags.forEach(imetaTag => { + let imageUrl = ''; + let alt = event.content || ''; - if (picture.tags) { - picture.tags.forEach(tag => { + imetaTag.forEach(item => { + if (typeof item === 'string') { + if (item.startsWith('url ')) { + imageUrl = item.replace('url ', '').trim(); + } + if (item.startsWith('alt ')) { + alt = item.replace('alt ', '').trim(); + } + } + }); + + if (imageUrl) { + allPictures.push({ + url: imageUrl, + alt: alt, + created_at: event.created_at, + pubkey: event.pubkey + }); + } + }); + } else { + let imageUrl = ''; + let alt = event.content || ''; + + event.tags.forEach(tag => { if (tag[0] === 'imeta') { const imetaStr = tag[1]; const urlMatch = imetaStr.match(/url ([^\s]+)/); @@ -290,28 +339,41 @@ function renderRandomPictures(picturesData, containerId, randomize = false) { if (altMatch) alt = altMatch[1]; } }); + + if (imageUrl) { + allPictures.push({ + url: imageUrl, + alt: alt, + created_at: event.created_at, + pubkey: event.pubkey + }); + } } + }); - const item = document.createElement('div'); - item.className = 'photo-item'; - item.dataset.image = imageUrl; - item.dataset.alt = alt; + // Sort or shuffle + let sortedPictures; + if (randomize) { + sortedPictures = shuffleArray(allPictures); + } else { + sortedPictures = [...allPictures].sort((a, b) => b.created_at - a.created_at); + } - 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 || ''; + // Store all pictures globally for the lightbox + allPicturesArray = sortedPictures; - item.innerHTML = ` - ${imageUrl ? `${alt}` : ''} -
📅 ${dateStr}
- `; + // 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 = createPictureElement(picture); container.appendChild(item); }); + // Initialize lightbox initLightbox(); } @@ -458,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();