don't randomize on first load
This commit is contained in:
parent
4fdcef9207
commit
31778f13fe
1 changed files with 47 additions and 76 deletions
|
|
@ -158,10 +158,11 @@ function handleLightboxClick(e) {
|
|||
// 3. MUSIC RENDERER
|
||||
// ============================================
|
||||
|
||||
function renderMusicTracks(tracks, containerId) {
|
||||
function renderMusicTracks(tracks, containerId, randomize = false) {
|
||||
const container = document.getElementById(containerId);
|
||||
if (!container) return;
|
||||
|
||||
// Filter tracks by artist
|
||||
const filteredTracks = tracks.filter(track => {
|
||||
let artist = '';
|
||||
if (track.tags) {
|
||||
|
|
@ -177,8 +178,17 @@ function renderMusicTracks(tracks, containerId) {
|
|||
return;
|
||||
}
|
||||
|
||||
const shuffled = shuffleArray(filteredTracks);
|
||||
const selected = shuffled.slice(0, 6);
|
||||
let selected;
|
||||
if (randomize) {
|
||||
// Randomize: shuffle and get first 6
|
||||
const shuffled = shuffleArray(filteredTracks);
|
||||
selected = shuffled.slice(0, 6);
|
||||
} else {
|
||||
// Chronological: sort by created_at (newest first) and get first 6
|
||||
const sorted = [...filteredTracks].sort((a, b) => b.created_at - a.created_at);
|
||||
selected = sorted.slice(0, 6);
|
||||
}
|
||||
|
||||
container.innerHTML = '';
|
||||
|
||||
selected.forEach(track => {
|
||||
|
|
@ -261,12 +271,21 @@ function handleLyricsToggle() {
|
|||
// ============================================
|
||||
|
||||
// Render random pictures (6 max)
|
||||
function renderRandomPictures(picturesData, containerId) {
|
||||
function renderRandomPictures(picturesData, containerId, randomize = false) {
|
||||
const container = document.getElementById(containerId);
|
||||
if (!container) return;
|
||||
|
||||
const shuffled = shuffleArray(picturesData);
|
||||
const selected = shuffled.slice(0, 6);
|
||||
let selected;
|
||||
if (randomize) {
|
||||
// Randomize: shuffle and get first 6
|
||||
const shuffled = shuffleArray(picturesData);
|
||||
selected = shuffled.slice(0, 6);
|
||||
} else {
|
||||
// Chronological: sort by created_at (newest first) and get first 6
|
||||
const sorted = [...picturesData].sort((a, b) => b.created_at - a.created_at);
|
||||
selected = sorted.slice(0, 6);
|
||||
}
|
||||
|
||||
container.innerHTML = '';
|
||||
|
||||
selected.forEach(picture => {
|
||||
|
|
@ -290,7 +309,6 @@ function renderRandomPictures(picturesData, containerId) {
|
|||
item.dataset.image = imageUrl;
|
||||
item.dataset.alt = alt;
|
||||
|
||||
// FIX: Set the date in the dataset
|
||||
const date = new Date(picture.created_at * 1000);
|
||||
const dateStr = date.toLocaleDateString('en-US', {
|
||||
year: 'numeric', month: 'short', day: 'numeric'
|
||||
|
|
@ -313,14 +331,22 @@ function renderRandomPictures(picturesData, containerId) {
|
|||
// 5. VIDEOS RENDERER
|
||||
// ============================================
|
||||
|
||||
function renderRandomVideos(videosData, containerId) {
|
||||
function renderRandomVideos(videosData, containerId, randomize = false) {
|
||||
const container = document.getElementById(containerId);
|
||||
if (!container) return;
|
||||
|
||||
const shuffled = shuffleArray(videosData);
|
||||
const selected = shuffled.slice(0, 2);
|
||||
container.innerHTML = '';
|
||||
let selected;
|
||||
if (randomize) {
|
||||
// Randomize: shuffle and get first 2
|
||||
const shuffled = shuffleArray(videosData);
|
||||
selected = shuffled.slice(0, 2);
|
||||
} else {
|
||||
// Chronological: sort by created_at (newest first) and get first 2
|
||||
const sorted = [...videosData].sort((a, b) => b.created_at - a.created_at);
|
||||
selected = sorted.slice(0, 2);
|
||||
}
|
||||
|
||||
container.innerHTML = '';
|
||||
const posterImage = '/images/videoposter.png';
|
||||
|
||||
selected.forEach(video => {
|
||||
|
|
@ -387,15 +413,15 @@ function renderRandomVideos(videosData, containerId) {
|
|||
// ============================================
|
||||
|
||||
function refreshMusic() {
|
||||
if (window.allMusicData) renderMusicTracks(window.allMusicData, 'musicGrid');
|
||||
if (window.allMusicData) renderMusicTracks(window.allMusicData, 'musicGrid', true);
|
||||
}
|
||||
|
||||
function refreshPictures() {
|
||||
if (window.allPicturesData) renderRandomPictures(window.allPicturesData, 'photoGrid');
|
||||
if (window.allPicturesData) renderRandomPictures(window.allPicturesData, 'photoGrid', true);
|
||||
}
|
||||
|
||||
function refreshVideos() {
|
||||
if (window.allVideosData) renderRandomVideos(window.allVideosData, 'videoGrid');
|
||||
if (window.allVideosData) renderRandomVideos(window.allVideosData, 'videoGrid', true);
|
||||
}
|
||||
|
||||
// ============================================
|
||||
|
|
@ -403,78 +429,23 @@ function refreshVideos() {
|
|||
// ============================================
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Sticky Navigation
|
||||
const stickyNav = document.getElementById('stickyNav');
|
||||
const mainHeader = document.querySelector('.main-header');
|
||||
let lastScrollY = window.scrollY;
|
||||
let ticking = false;
|
||||
// ... sticky nav, read more, smooth scrolling code ...
|
||||
|
||||
function updateStickyNav() {
|
||||
const scrollY = window.scrollY;
|
||||
const headerHeight = mainHeader ? mainHeader.offsetHeight : 400;
|
||||
if (scrollY > headerHeight - 100) {
|
||||
stickyNav.classList.add('visible');
|
||||
} else {
|
||||
stickyNav.classList.remove('visible');
|
||||
}
|
||||
lastScrollY = scrollY;
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', function() {
|
||||
if (!ticking) {
|
||||
window.requestAnimationFrame(function() {
|
||||
updateStickyNav();
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(updateStickyNav, 100);
|
||||
|
||||
// Read More toggle for blog posts
|
||||
document.querySelectorAll('.read-more-toggle').forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const content = this.nextElementSibling;
|
||||
if (content.style.display === 'none') {
|
||||
content.style.display = 'block';
|
||||
this.innerHTML = '<span>Read Less</span>';
|
||||
} else {
|
||||
content.style.display = 'none';
|
||||
this.innerHTML = '<span>Read More</span>';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Smooth scrolling for navigation links
|
||||
document.querySelectorAll('nav a').forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const targetId = this.getAttribute('href');
|
||||
const targetElement = document.querySelector(targetId);
|
||||
if (targetElement) {
|
||||
const navHeight = stickyNav.offsetHeight;
|
||||
const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navHeight - 20;
|
||||
window.scrollTo({ top: targetPosition, behavior: 'smooth' });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Initialize Music
|
||||
// Initialize Music (chronological, not randomized)
|
||||
if (window.allMusicData && window.allMusicData.length > 0) {
|
||||
renderMusicTracks(window.allMusicData, 'musicGrid');
|
||||
renderMusicTracks(window.allMusicData, 'musicGrid', false);
|
||||
}
|
||||
|
||||
// Initialize Pictures
|
||||
// Initialize Pictures (chronological, not randomized)
|
||||
if (window.allPicturesData && window.allPicturesData.length > 0) {
|
||||
renderRandomPictures(window.allPicturesData, 'photoGrid');
|
||||
renderRandomPictures(window.allPicturesData, 'photoGrid', false);
|
||||
} else {
|
||||
initLightbox();
|
||||
}
|
||||
|
||||
// Initialize Videos
|
||||
// Initialize Videos (chronological, not randomized)
|
||||
if (window.allVideosData && window.allVideosData.length > 0) {
|
||||
renderRandomVideos(window.allVideosData, 'videoGrid');
|
||||
renderRandomVideos(window.allVideosData, 'videoGrid', false);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue