setto/setto-nostr-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: setto:18abdfb9e8ce1b333d161562270d554b507b5dcc
Branches Tags
setto:main
setto:playlists
setto:setto-set-flava-flav
..
compare: setto:29f6ca9691a7f648caa7a307b8651c1854e4c526
Branches Tags
setto:playlists
setto:setto-set-flava-flav
setto:main

No commits in common. "18abdfb9e8ce1b333d161562270d554b507b5dcc" and "29f6ca9691a7f648caa7a307b8651c1854e4c526" have entirely different histories.
18abdfb9e8 ... 29f6ca9691

1 changed files with 67 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

196
themes/one-pager/assets/js/scripts.js
View file

@ -31,33 +31,30 @@ function isAllowedArtist(artist) {
} }
// ============================================ // ============================================
// 2. CUSTOM LIGHTBOX (UPDATED) // 2. CUSTOM LIGHTBOX
// ============================================ // ============================================
let allPicturesArray = []; let currentPhotos = [];
let currentPhotoIndex = 0; let currentIndex = 0;
// Helper function to create a picture element // Build photo array from DOM
function createPictureElement(picture) { function buildPhotoArray() {
const item = document.createElement('div'); const photoItems = document.querySelectorAll('.photo-item');
item.className = 'photo-item'; currentPhotos = [];
item.dataset.image = picture.url; photoItems.forEach(item => {
item.dataset.alt = picture.alt; const image = item.querySelector('img');
item.dataset.created = picture.created_at; const date = item.dataset.date || '';
item.dataset.pubkey = picture.pubkey || ''; const pubkey = item.dataset.pubkey || '';
const alt = item.dataset.alt || '';
const date = new Date(picture.created_at * 1000); if (image) {
const dateStr = date.toLocaleDateString('en-US', { currentPhotos.push({
year: 'numeric', month: 'short', day: 'numeric' 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 // Open lightbox
@ -68,48 +65,26 @@ function openLightbox(index) {
const lightboxMeta = document.getElementById('lightboxMeta'); const lightboxMeta = document.getElementById('lightboxMeta');
const lightboxCounter = document.getElementById('lightboxCounter'); 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 < 0) index = currentPhotos.length - 1;
if (index >= allPicturesArray.length) index = 0; if (index >= currentPhotos.length) index = 0;
currentPhotoIndex = index; currentIndex = index;
const photo = allPicturesArray[currentPhotoIndex];
const photo = currentPhotos[currentIndex];
lightboxImage.src = photo.url; lightboxImage.src = photo.url;
lightboxImage.alt = photo.alt; lightboxImage.alt = photo.alt;
lightboxCaption.textContent = photo.alt; lightboxCaption.textContent = photo.alt;
const date = new Date(photo.created_at * 1000); let metaText = '';
const dateStr = date.toLocaleDateString('en-US', { if (photo.date) metaText += `📅 ${photo.date}`;
year: 'numeric', month: 'short', day: 'numeric'
});
let metaText = `📅 ${dateStr}`; lightboxMeta.textContent = metaText || '📅 No date available';
lightboxMeta.textContent = metaText; lightboxCounter.textContent = `${currentIndex + 1} / ${currentPhotos.length}`;
lightboxCounter.textContent = `${currentPhotoIndex + 1} / ${allPicturesArray.length}`;
lightbox.classList.add('active'); lightbox.classList.add('active');
document.body.style.overflow = 'hidden'; 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 // Close lightbox
@ -121,8 +96,8 @@ function closeLightbox() {
} }
// Navigate // Navigate
function prevPhoto() { openLightbox(currentPhotoIndex - 1); } function prevPhoto() { openLightbox(currentIndex - 1); }
function nextPhoto() { openLightbox(currentPhotoIndex + 1); } function nextPhoto() { openLightbox(currentIndex + 1); }
// Initialize lightbox event listeners // Initialize lightbox event listeners
function initLightbox() { function initLightbox() {
@ -133,16 +108,14 @@ function initLightbox() {
if (!lightbox) return; if (!lightbox) return;
buildPhotoArray();
// Photo click listeners // Photo click listeners
document.querySelectorAll('.photo-item img').forEach((img) => { document.querySelectorAll('.photo-item img').forEach((img, index) => {
img.removeEventListener('click', img._lightboxClick); img.removeEventListener('click', img._lightboxClick);
img._lightboxClick = function(e) { img._lightboxClick = function(e) {
e.preventDefault(); e.preventDefault();
const url = this.src; openLightbox(index);
const fullIndex = allPicturesArray.findIndex(p => p.url === url);
if (fullIndex !== -1) {
openLightbox(fullIndex);
}
}; };
img.addEventListener('click', img._lightboxClick); img.addEventListener('click', img._lightboxClick);
}); });
@ -227,6 +200,7 @@ function renderMusicTracks(tracks, containerId, randomize = false) {
else if (key === 'image') image = value; else if (key === 'image') image = value;
else if (key === 'artist') artist = value; else if (key === 'artist') artist = value;
else if (key === 'album') album = 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 === 't') genreTags.push(value);
else if (key === 'alt') alt = value; else if (key === 'alt') alt = value;
}); });
@ -244,6 +218,7 @@ function renderMusicTracks(tracks, containerId, randomize = false) {
${album ? `<p class="music-album">${album}</p>` : ''} ${album ? `<p class="music-album">${album}</p>` : ''}
</div> </div>
${url ? `<audio controls preload="none"><source src="${url}" type="audio/mpeg">Your browser does not support the audio element.</audio>` : ''} ${url ? `<audio controls preload="none"><source src="${url}" type="audio/mpeg">Your browser does not support the audio element.</audio>` : ''}
${genreTags.length > 0 ? ` ${genreTags.length > 0 ? `
<div class="music-tags"> <div class="music-tags">
${genreTags.map(t => `<span class="tag"><span>${t}</span></span>`).join('')} ${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) { function renderRandomPictures(picturesData, containerId, randomize = false) {
const container = document.getElementById(containerId); const container = document.getElementById(containerId);
if (!container) return; if (!container) return;
// Flatten all pictures from all events let selected;
let allPictures = []; 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 => { container.innerHTML = '';
const imetaTags = [];
event.tags.forEach(tag => {
if (tag[0] === 'imeta') {
imetaTags.push(tag);
}
});
if (imetaTags.length > 0) { selected.forEach(picture => {
imetaTags.forEach(imetaTag => { let imageUrl = '';
let imageUrl = ''; let alt = picture.content || '';
let alt = event.content || '';
imetaTag.forEach(item => { if (picture.tags) {
if (typeof item === 'string') { picture.tags.forEach(tag => {
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') { if (tag[0] === 'imeta') {
const imetaStr = tag[1]; const imetaStr = tag[1];
const urlMatch = imetaStr.match(/url ([^\s]+)/); const urlMatch = imetaStr.match(/url ([^\s]+)/);
@ -339,41 +290,28 @@ function renderRandomPictures(picturesData, containerId, randomize = false) {
if (altMatch) alt = altMatch[1]; if (altMatch) alt = altMatch[1];
} }
}); });
if (imageUrl) {
allPictures.push({
url: imageUrl,
alt: alt,
created_at: event.created_at,
pubkey: event.pubkey
});
}
} }
});
// Sort or shuffle const item = document.createElement('div');
let sortedPictures; item.className = 'photo-item';
if (randomize) { item.dataset.image = imageUrl;
sortedPictures = shuffleArray(allPictures); item.dataset.alt = alt;
} else {
sortedPictures = [...allPictures].sort((a, b) => b.created_at - a.created_at);
}
// Store all pictures globally for the lightbox const date = new Date(picture.created_at * 1000);
allPicturesArray = sortedPictures; 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 item.innerHTML = `
const initialCount = Math.min(6, sortedPictures.length); ${imageUrl ? `<img src="${imageUrl}" alt="${alt}" loading="lazy">` : ''}
const selected = sortedPictures.slice(0, initialCount); <div class="photo-date"><span>📅 ${dateStr}</span></div>
`;
container.innerHTML = '';
selected.forEach(picture => {
const item = createPictureElement(picture);
container.appendChild(item); container.appendChild(item);
}); });
// Initialize lightbox
initLightbox(); 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 => { document.querySelectorAll('nav a').forEach(link => {
link.addEventListener('click', function(e) { link.addEventListener('click', function(e) {
e.preventDefault(); e.preventDefault();