diff --git a/themes/one-pager/assets/js/scripts.js b/themes/one-pager/assets/js/scripts.js index 8c9d0a4..d05983d 100644 --- a/themes/one-pager/assets/js/scripts.js +++ b/themes/one-pager/assets/js/scripts.js @@ -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 = 'Read Less'; - } else { - content.style.display = 'none'; - this.innerHTML = 'Read More'; - } - }); - }); - - // 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); } });