diff --git a/themes/one-pager/assets/js/scripts.js b/themes/one-pager/assets/js/scripts.js index 37cbdcf..cb84aa1 100644 --- a/themes/one-pager/assets/js/scripts.js +++ b/themes/one-pager/assets/js/scripts.js @@ -31,33 +31,30 @@ function isAllowedArtist(artist) { } // ============================================ -// 2. CUSTOM LIGHTBOX (UPDATED) +// 2. CUSTOM LIGHTBOX // ============================================ -let allPicturesArray = []; -let currentPhotoIndex = 0; +let currentPhotos = []; +let currentIndex = 0; -// 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' +// 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 + }); + } }); - item.dataset.date = dateStr; - - item.innerHTML = ` - ${picture.url ? `${picture.alt}` : ''} -
📅 ${dateStr}
- `; - - return item; } // Open lightbox @@ -68,48 +65,26 @@ function openLightbox(index) { const lightboxMeta = document.getElementById('lightboxMeta'); const lightboxCounter = document.getElementById('lightboxCounter'); - if (!lightbox || !lightboxImage || allPicturesArray.length === 0) return; + if (!lightbox || !lightboxImage || currentPhotos.length === 0) return; - if (index < 0) index = allPicturesArray.length - 1; - if (index >= allPicturesArray.length) index = 0; - currentPhotoIndex = index; - - const photo = allPicturesArray[currentPhotoIndex]; + if (index < 0) index = currentPhotos.length - 1; + if (index >= currentPhotos.length) index = 0; + currentIndex = index; + const photo = currentPhotos[currentIndex]; lightboxImage.src = photo.url; lightboxImage.alt = photo.alt; lightboxCaption.textContent = photo.alt; - const date = new Date(photo.created_at * 1000); - const dateStr = date.toLocaleDateString('en-US', { - year: 'numeric', month: 'short', day: 'numeric' - }); + let metaText = ''; + if (photo.date) metaText += `📅 ${photo.date}`; - let metaText = `📅 ${dateStr}`; + lightboxMeta.textContent = metaText || '📅 No date available'; - lightboxMeta.textContent = metaText; - - lightboxCounter.textContent = `${currentPhotoIndex + 1} / ${allPicturesArray.length}`; + lightboxCounter.textContent = `${currentIndex + 1} / ${currentPhotos.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 @@ -121,8 +96,8 @@ function closeLightbox() { } // Navigate -function prevPhoto() { openLightbox(currentPhotoIndex - 1); } -function nextPhoto() { openLightbox(currentPhotoIndex + 1); } +function prevPhoto() { openLightbox(currentIndex - 1); } +function nextPhoto() { openLightbox(currentIndex + 1); } // Initialize lightbox event listeners function initLightbox() { @@ -133,16 +108,14 @@ function initLightbox() { if (!lightbox) return; + buildPhotoArray(); + // Photo click listeners - document.querySelectorAll('.photo-item img').forEach((img) => { + document.querySelectorAll('.photo-item img').forEach((img, index) => { img.removeEventListener('click', img._lightboxClick); img._lightboxClick = function(e) { e.preventDefault(); - const url = this.src; - const fullIndex = allPicturesArray.findIndex(p => p.url === url); - if (fullIndex !== -1) { - openLightbox(fullIndex); - } + openLightbox(index); }; img.addEventListener('click', img._lightboxClick); }); @@ -227,6 +200,7 @@ 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; }); @@ -244,6 +218,7 @@ function renderMusicTracks(tracks, containerId, randomize = false) { ${album ? `

${album}

` : ''} ${url ? `` : ''} + ${genreTags.length > 0 ? `
${genreTags.map(t => `${t}`).join('')} @@ -283,54 +258,30 @@ function handleLyricsToggle() { } // ============================================ -// 4. PICTURES RENDERER (UPDATED) +// 4. PICTURES RENDERER // ============================================ function renderRandomPictures(picturesData, containerId, randomize = false) { const container = document.getElementById(containerId); if (!container) return; - // Flatten all pictures from all events - let allPictures = []; + 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); + } - picturesData.forEach(event => { - const imetaTags = []; - event.tags.forEach(tag => { - if (tag[0] === 'imeta') { - imetaTags.push(tag); - } - }); + container.innerHTML = ''; - if (imetaTags.length > 0) { - imetaTags.forEach(imetaTag => { - let imageUrl = ''; - let alt = event.content || ''; + selected.forEach(picture => { + let imageUrl = ''; + let alt = picture.content || ''; - 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 (picture.tags) { + picture.tags.forEach(tag => { if (tag[0] === 'imeta') { const imetaStr = tag[1]; const urlMatch = imetaStr.match(/url ([^\s]+)/); @@ -339,41 +290,28 @@ 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 - }); - } } - }); - // Sort or shuffle - let sortedPictures; - if (randomize) { - sortedPictures = shuffleArray(allPictures); - } else { - sortedPictures = [...allPictures].sort((a, b) => b.created_at - a.created_at); - } + const item = document.createElement('div'); + item.className = 'photo-item'; + item.dataset.image = imageUrl; + item.dataset.alt = alt; - // Store all pictures globally for the lightbox - allPicturesArray = sortedPictures; + 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 || ''; - // Show first 6, or all if less than 6 - const initialCount = Math.min(6, sortedPictures.length); - const selected = sortedPictures.slice(0, initialCount); + item.innerHTML = ` + ${imageUrl ? `${alt}` : ''} +
📅 ${dateStr}
+ `; - container.innerHTML = ''; - - selected.forEach(picture => { - const item = createPictureElement(picture); container.appendChild(item); }); - // Initialize lightbox initLightbox(); } @@ -520,7 +458,7 @@ document.addEventListener('DOMContentLoaded', function() { }); }); - // Smooth scrolling for navigation links + // Smooth scrolling for navigation links (both main nav and sticky nav) document.querySelectorAll('nav a').forEach(link => { link.addEventListener('click', function(e) { e.preventDefault();