Compare commits
No commits in common. "18abdfb9e8ce1b333d161562270d554b507b5dcc" and "29f6ca9691a7f648caa7a307b8651c1854e4c526" have entirely different histories.
18abdfb9e8
...
29f6ca9691
1 changed files with 67 additions and 129 deletions
|
|
@ -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 ? `<img src="${picture.url}" alt="${picture.alt}" loading="lazy">` : ''}
|
||||
<div class="photo-date"><span>📅 ${dateStr}</span></div>
|
||||
`;
|
||||
|
||||
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 ? `<p class="music-album">${album}</p>` : ''}
|
||||
</div>
|
||||
${url ? `<audio controls preload="none"><source src="${url}" type="audio/mpeg">Your browser does not support the audio element.</audio>` : ''}
|
||||
|
||||
${genreTags.length > 0 ? `
|
||||
<div class="music-tags">
|
||||
${genreTags.map(t => `<span class="tag"><span>${t}</span></span>`).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 ? `<img src="${imageUrl}" alt="${alt}" loading="lazy">` : ''}
|
||||
<div class="photo-date"><span>📅 ${dateStr}</span></div>
|
||||
`;
|
||||
|
||||
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();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue