index.html

---
layout: default
title: Photos
---

<!-- Debug output -->
<div style="display: none; padding: 20px; background: #f5f5f5; font-family: monospace; font-size: 12px; margin-bottom: 20px;">
    <h3>Debug Info:</h3>
    <p>Static Files in /img:</p>
    <ul>
    {% for file in site.static_files %}
        {% if file.path contains '/img/' %}
            <li>{{ file.path }}</li>
        {% endif %}
    {% endfor %}
    </ul>
</div>

<div class="container">
    <nav class="sidebar">
        <div class="nav-section">
            <h1>A MAGNO</h1>
            <ul class="nav-links">
                <li><a href="{{ '/' | relative_url }}" class="active">PHOTOS LIST</a></li>
                <li><a href="https://instagram.com/mggno">INSTAGRAM</a></li>
                <li><a href="https://a.magno.me">PORTFOLIO</a></li>
            </ul>
        </div>
        <div class="construction-notice">
            Archive in progress. A curated collection of moments, continuously evolving.
        </div>
    </nav>
    <main class="content">
        <div class="filters">
            <select id="year-filter" onchange="filterWorks()">
                <option value="">YEAR</option>
            </select>
            <select id="title-filter" onchange="filterWorks()">
                <option value="">TITLE</option>
            </select>
            <select id="sort-filter" onchange="filterAndSortWorks()">
                <option value="newest">NEWEST FIRST</option>
                <option value="oldest">OLDEST FIRST</option>
                <option value="title">A-Z</option>
            </select>
            <!-- <button class="view-toggle" onclick="toggleView()"> -->
                <svg class="list-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="8" y1="6" x2="21" y2="6"></line>
                    <line x1="8" y1="12" x2="21" y2="12"></line>
                    <line x1="8" y1="18" x2="21" y2="18"></line>
                    <line x1="3" y1="6" x2="3" y2="6"></line>
                    <line x1="3" y1="12" x2="3" y2="12"></line>
                    <line x1="3" y1="18" x2="3" y2="18"></line>
                </svg>
                <svg class="grid-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: none;">
                    <rect x="3" y="3" width="7" height="7"></rect>
                    <rect x="14" y="3" width="7" height="7"></rect>
                    <rect x="14" y="14" width="7" height="7"></rect>
                    <rect x="3" y="14" width="7" height="7"></rect>
                </svg>
            </button>
        </div>

        <div class="works-list">
            <!-- Works will be populated by JavaScript -->
        </div>
    </main>

    <div class="gallery-view">
        <div class="gallery-header">
            <div class="gallery-controls">
                <button class="share-button" onclick="sharePhoto(event)">SHARE</button>
                <a href="#" class="close-button" onclick="hideGallery(event)">CLOSE</a>
            </div>
        </div>
        <div class="photo-grid"></div>
        <div class="gallery-footer">
            <div class="photo-info"></div>
            <div class="photo-counter">0/0</div>
            <div class="gallery-nav">
                <button class="prev">PREV</button>
                <button class="next">NEXT</button>
            </div>
        </div>
    </div>
</div>

<script>
console.log('Starting script execution');

// Get all image paths from Jekyll
const imagePaths = [
    {% for file in site.static_files %}
        {% if file.path contains '/img/' %}
            {{ file.path | jsonify }}{% unless forloop.last %},{% endunless %}
        {% endif %}
    {% endfor %}
];

console.log('Image paths:', imagePaths);

// Process image data
const imageData = {
    folders: [],
    images: []
};

// Process paths to extract folder information
imagePaths.forEach(path => {
    const parts = path.split('/');
    if (parts.length >= 3) {
        const folderName = parts[2]; // e.g., "2024-12-Milan"
        const [year, month, location] = folderName.split('-');
        
        // Add to folders if not already present
        if (!imageData.folders.some(f => f.path === `/img/${folderName}`)) {
            imageData.folders.push({
                path: `/img/${folderName}`,
                year: year,
                month: month,
                location: location
            });
        }
        
        // Add to images
        imageData.images.push({
            path: path,
            folder: `/img/${folderName}`
        });
    }
});

// Sort folders by year and month (newest first)
imageData.folders.sort((a, b) => {
    // Compare years first
    const yearDiff = parseInt(b.year) - parseInt(a.year);
    if (yearDiff !== 0) return yearDiff;
    
    // If years are equal, compare months
    return parseInt(b.month) - parseInt(a.month);
});

console.log('Processed and sorted image data:', imageData);

// Populate filters
function populateFilters() {
    console.log('Populating filters');
    const yearFilter = document.getElementById('year-filter');
    const titleFilter = document.getElementById('title-filter');
    
    // Get unique years and locations
    const years = [...new Set(imageData.folders.map(f => f.year))].sort().reverse();
    const locations = [...new Set(imageData.folders.map(f => f.location))].sort();
    
    console.log('Years found:', years);
    console.log('Locations found:', locations);
    
    // Populate year filter
    years.forEach(year => {
        const option = document.createElement('option');
        option.value = year;
        option.textContent = year;
        yearFilter.appendChild(option);
    });
    
    // Populate location filter
    locations.forEach(location => {
        const option = document.createElement('option');
        option.value = location;
        option.textContent = location;
        titleFilter.appendChild(option);
    });
}

// Display works
function displayWorks() {
    console.log('Displaying works');
    const worksList = document.querySelector('.works-list');
    worksList.innerHTML = '';
    
    console.log('Folders to display:', imageData.folders);
    
    const monthNames = {
        '01': 'Jan', '02': 'Feb', '03': 'Mar', '04': 'Apr',
        '05': 'May', '06': 'Jun', '07': 'Jul', '08': 'Aug',
        '09': 'Sep', '10': 'Oct', '11': 'Nov', '12': 'Dec'
    };
    
    imageData.folders.forEach(folder => {
        // Get the first image from this folder
        const firstImage = imageData.images.find(img => img.folder === folder.path);
        const backgroundImage = firstImage ? `{{ site.baseurl }}${firstImage.path}` : '';
        
        const workRow = document.createElement('div');
        workRow.className = 'work-row';
        workRow.dataset.year = folder.year;
        workRow.dataset.month = folder.month;
        workRow.dataset.title = folder.location;
        workRow.dataset.background = backgroundImage; // Store image path as data attribute
        workRow.onclick = () => showGallery(folder.path);
        
        const monthName = monthNames[folder.month] || folder.month;
        
        workRow.innerHTML = `
            <span class="title">${folder.location}</span>
            <span class="month-year">
                <em>${monthName}</em>
                <span class="year">${folder.year}</span>
            </span>
        `;
        
        worksList.appendChild(workRow);
    });
    
    // Apply initial sorting
    filterAndSortWorks();
}

function filterAndSortWorks() {
    console.log('Filtering and sorting works');
    const yearFilter = document.getElementById('year-filter').value;
    const titleFilter = document.getElementById('title-filter').value;
    const sortFilter = document.getElementById('sort-filter').value;
    const worksList = document.querySelector('.works-list');
    
    // Convert NodeList to Array for sorting
    const works = Array.from(document.querySelectorAll('.work-row'));

    // First apply filters
    works.forEach(work => {
        const year = work.dataset.year;
        const title = work.dataset.title;
        const showYear = !yearFilter || year === yearFilter;
        const showTitle = !titleFilter || title === titleFilter;
        work.style.display = showYear && showTitle ? '' : 'none';
    });

    // Then sort the visible works
    works.sort((a, b) => {
        const yearA = a.dataset.year;
        const yearB = b.dataset.year;
        const monthA = a.dataset.month;
        const monthB = b.dataset.month;
        const titleA = a.dataset.title.toLowerCase();
        const titleB = b.dataset.title.toLowerCase();

        switch(sortFilter) {
            case 'oldest':
                // Sort by year and month (oldest first)
                const yearDiffOld = parseInt(yearA) - parseInt(yearB);
                if (yearDiffOld !== 0) return yearDiffOld;
                return parseInt(monthA) - parseInt(monthB);
            
            case 'title':
                // Sort alphabetically by title
                return titleA.localeCompare(titleB);
            
            case 'newest':
            default:
                // Sort by year and month (newest first)
                const yearDiffNew = parseInt(yearB) - parseInt(yearA);
                if (yearDiffNew !== 0) return yearDiffNew;
                return parseInt(monthB) - parseInt(monthA);
        }
    });

    // Reorder the DOM elements
    works.forEach(work => worksList.appendChild(work));
}

function filterWorks() {
    filterAndSortWorks();
}

function showGallery(folderPath, initialPhotoIndex = 0) {
    console.log('Showing gallery for:', folderPath);
    const galleryView = document.querySelector('.gallery-view');
    const photoGrid = galleryView.querySelector('.photo-grid');
    
    // Store current folder for sharing
    photoGrid.dataset.currentFolder = folderPath;
    
    // Reset scroll position immediately
    photoGrid.scrollLeft = 0;
    
    // Add loading overlay if it doesn't exist
    let loadingOverlay = document.querySelector('.loading-overlay');
    if (!loadingOverlay) {
        loadingOverlay = document.createElement('div');
        loadingOverlay.className = 'loading-overlay';
        loadingOverlay.innerHTML = `
            <div class="loading-text">
                Loading<span class="loading-dots"></span>
            </div>
        `;
        document.body.appendChild(loadingOverlay);
    }
    
    // Show loading overlay
    loadingOverlay.classList.add('active');
    
    const sidebar = document.querySelector('.sidebar');
    
    if (window.innerWidth <= 768) {
        sidebar.style.display = 'none';
    }
    
    photoGrid.innerHTML = '';
    
    const folderInfo = imageData.folders.find(f => f.path === folderPath);
    const folderImages = imageData.images.filter(img => img.folder === folderPath);
    
    // Track loading progress
    let loadedImages = 0;
    const totalImages = folderImages.length;
    
    const checkAllImagesLoaded = () => {
        loadedImages++;
        if (loadedImages === totalImages * 2) { // Main images + thumbnails
            // Hide loading overlay with a slight delay for smoother transition
            setTimeout(() => {
                loadingOverlay.classList.remove('active');
            }, 300);
        }
    };
    
    const thumbnailNav = document.createElement('div');
    thumbnailNav.className = 'thumbnail-nav';
    
    folderImages.forEach((image, index) => {
        const photoItem = document.createElement('div');
        photoItem.className = 'photo-item';
        
        // Create and track main image loading
        const mainImg = new Image();
        mainImg.onload = checkAllImagesLoaded;
        mainImg.src = `{{ site.baseurl }}${image.path}`;
        
        photoItem.innerHTML = `
            <div class="image-wrapper">
                <img src="{{ site.baseurl }}${image.path}" loading="lazy">
                <div class="photo-info">
                    <div class="location">${folderInfo.location}</div>
                    <div class="year">${folderInfo.year}</div>
                </div>
            </div>
        `;
        
        photoGrid.appendChild(photoItem);
        
        // Create and track thumbnail loading
        const thumbImg = new Image();
        thumbImg.onload = checkAllImagesLoaded;
        thumbImg.src = `{{ site.baseurl }}${image.path}`;
        
        const thumbnail = document.createElement('div');
        thumbnail.className = 'thumbnail';
        thumbnail.innerHTML = `<img src="{{ site.baseurl }}${image.path}" loading="lazy">`;
        thumbnail.dataset.index = index;
        
        thumbnail.onclick = () => {
            const photoItem = photoGrid.children[index];
            photoItem.scrollIntoView({ behavior: 'smooth' });
            updateThumbnails(index);
        };
        thumbnailNav.appendChild(thumbnail);
    });
    
    galleryView.appendChild(thumbnailNav);
    
    // Add auto-hide functionality
    let navTimeout;
    const hideNav = () => {
        thumbnailNav.style.opacity = '0';
        thumbnailNav.style.pointerEvents = 'none';
    };
    
    const showNav = () => {
        thumbnailNav.style.opacity = '1';
        thumbnailNav.style.pointerEvents = 'auto';
        clearTimeout(navTimeout);
        navTimeout = setTimeout(hideNav, 3000); // Hide after 3 seconds
    };
    
    // Show nav on any interaction
    photoGrid.addEventListener('mousemove', showNav);
    photoGrid.addEventListener('touchstart', showNav);
    photoGrid.addEventListener('scroll', showNav);
    thumbnailNav.addEventListener('mouseover', () => {
        clearTimeout(navTimeout); // Keep nav visible while hovering
        thumbnailNav.style.opacity = '1';
        thumbnailNav.style.pointerEvents = 'auto';
    });
    thumbnailNav.addEventListener('mouseleave', () => {
        navTimeout = setTimeout(hideNav, 3000);
    });
    
    // Initial show/hide
    showNav();
    
    // Simplified scroll handler
    photoGrid.addEventListener('scroll', () => {
        const index = Math.round(photoGrid.scrollLeft / photoGrid.offsetWidth);
        updateThumbnails(index);
        updateCounter(index);
    });
    
    // Simplified keyboard navigation
    const handleKeydown = (event) => {
        const totalPhotos = folderImages.length;
        const currentIndex = Math.round(photoGrid.scrollLeft / photoGrid.offsetWidth);

        if (event.key === 'ArrowRight' && currentIndex < totalPhotos - 1) {
            const nextItem = photoGrid.children[currentIndex + 1];
            nextItem.scrollIntoView({ behavior: 'smooth' });
            updateThumbnails(currentIndex + 1);
            updateCounter(currentIndex + 1);
        } else if (event.key === 'ArrowLeft' && currentIndex > 0) {
            const prevItem = photoGrid.children[currentIndex - 1];
            prevItem.scrollIntoView({ behavior: 'smooth' });
            updateThumbnails(currentIndex - 1);
            updateCounter(currentIndex - 1);
        }
    };

    document.addEventListener('keydown', handleKeydown);

    // Initial position
    if (initialPhotoIndex > 0) {
        const targetItem = photoGrid.children[initialPhotoIndex];
        targetItem.scrollIntoView({ behavior: 'instant' });
        updateThumbnails(initialPhotoIndex);
    }

    galleryView.classList.add('active');
    document.body.style.overflow = 'hidden';

    // Clean up event listener when gallery is closed
    const originalHideGallery = hideGallery;
    hideGallery = (event) => {
        photoGrid.removeEventListener('mousemove', showNav);
        photoGrid.removeEventListener('touchstart', showNav);
        photoGrid.removeEventListener('scroll', showNav);
        clearTimeout(navTimeout);
        document.removeEventListener('keydown', handleKeydown);
        originalHideGallery(event);
    };

    // Set initial counter state
    updateCounter(initialPhotoIndex);

    // Add this inside the showGallery function, just before the return statement
    const prevButton = galleryView.querySelector('.prev');
    const nextButton = galleryView.querySelector('.next');

    prevButton.onclick = () => {
        const currentIndex = Math.round(photoGrid.scrollLeft / photoGrid.offsetWidth);
        if (currentIndex > 0) {
            const prevItem = photoGrid.children[currentIndex - 1];
            prevItem.scrollIntoView({ behavior: 'smooth' });
            updateThumbnails(currentIndex - 1);
            updateCounter(currentIndex - 1);
        }
    };

    nextButton.onclick = () => {
        const currentIndex = Math.round(photoGrid.scrollLeft / photoGrid.offsetWidth);
        if (currentIndex < photoGrid.children.length - 1) {
            const nextItem = photoGrid.children[currentIndex + 1];
            nextItem.scrollIntoView({ behavior: 'smooth' });
            updateThumbnails(currentIndex + 1);
            updateCounter(currentIndex + 1);
        }
    };

    // Update button states initially and on scroll
    const updateNavigationButtons = () => {
        const currentIndex = Math.round(photoGrid.scrollLeft / photoGrid.offsetWidth);
        prevButton.style.opacity = currentIndex === 0 ? '0.3' : '1';
        nextButton.style.opacity = currentIndex === photoGrid.children.length - 1 ? '0.3' : '1';
    };

    photoGrid.addEventListener('scroll', updateNavigationButtons);
    updateNavigationButtons(); // Initial state
}

function updateThumbnails(activeIndex) {
    const thumbnails = document.querySelectorAll('.thumbnail');
    const thumbnailNav = document.querySelector('.thumbnail-nav');
    
    if (!thumbnailNav || !thumbnails.length) return;
    
    // Remove active class from all thumbnails
    thumbnails.forEach(thumb => thumb.classList.remove('active'));
    
    // Ensure activeIndex is within bounds
    activeIndex = Math.max(0, Math.min(activeIndex, thumbnails.length - 1));
    
    const activeThumbnail = thumbnails[activeIndex];
    if (activeThumbnail) {
        activeThumbnail.classList.add('active');
        
        const thumbnailWidth = 50;
        const gap = 8;
        const navWidth = thumbnailNav.offsetWidth;
        const scrollPosition = (thumbnailWidth + gap) * activeIndex - (navWidth - thumbnailWidth) / 2;
        
        thumbnailNav.scrollTo({
            left: scrollPosition,
            behavior: 'smooth'
        });
    }
}

function hideGallery(event) {
    if (event) {
        event.preventDefault();
    }
    const galleryView = document.querySelector('.gallery-view');
    const thumbnailNav = galleryView.querySelector('.thumbnail-nav');
    const sidebar = document.querySelector('.sidebar');
    
    // Show sidebar again on mobile
    if (window.innerWidth <= 768) {
        sidebar.style.display = '';
    }
    
    if (thumbnailNav) {
        thumbnailNav.remove();
    }
    galleryView.classList.remove('active');
    document.body.style.overflow = '';
}

// Add resize handler to handle orientation changes
window.addEventListener('resize', () => {
    const galleryView = document.querySelector('.gallery-view');
    const sidebar = document.querySelector('.sidebar');
    
    if (window.innerWidth <= 768) {
        if (galleryView.classList.contains('active')) {
            sidebar.style.display = 'none';
        } else {
            sidebar.style.display = '';
        }
    } else {
        sidebar.style.display = '';
    }
});

// Initialize
console.log('Initializing application');
populateFilters();
displayWorks();

// Add this after your existing showGallery and hideGallery functions
document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        const galleryView = document.querySelector('.gallery-view');
        if (galleryView.classList.contains('active')) {
            hideGallery(event);
        }
    }
});

// Add this after your existing keydown listener
document.addEventListener('keydown', function(event) {
    const galleryView = document.querySelector('.gallery-view');
    if (galleryView.classList.contains('active')) {
        if (event.key === 'ArrowLeft') {
            galleryView.querySelector('.gallery-nav-arrow.prev').click();
        } else if (event.key === 'ArrowRight') {
            galleryView.querySelector('.gallery-nav-arrow.next').click();
        }
    }
});

function toggleView() {
    const worksList = document.querySelector('.works-list');
    const listIcon = document.querySelector('.list-icon');
    const gridIcon = document.querySelector('.grid-icon');
    
    worksList.classList.toggle('grid-view');
    
    // Set background images when switching to grid view
    if (worksList.classList.contains('grid-view')) {
        document.querySelectorAll('.work-row').forEach(row => {
            row.style.backgroundImage = `url('${row.dataset.background}')`;
        });
        listIcon.style.display = 'none';
        gridIcon.style.display = 'block';
    } else {
        document.querySelectorAll('.work-row').forEach(row => {
            row.style.backgroundImage = 'none';
        });
        listIcon.style.display = 'block';
        gridIcon.style.display = 'none';
    }
    
    localStorage.setItem('viewPreference', worksList.classList.contains('grid-view') ? 'grid' : 'list');
}

// Add this to your initialization code
document.addEventListener('DOMContentLoaded', function() {
    // Restore view preference
    const viewPreference = localStorage.getItem('viewPreference');
    if (viewPreference === 'grid') {
        toggleView();
    }

    // Check URL parameters for shared link
    const urlParams = new URLSearchParams(window.location.search);
    const sharedFolder = urlParams.get('folder');
    const sharedPhotoIndex = parseInt(urlParams.get('photo')) || 0;
    
    if (sharedFolder) {
        showGallery(sharedFolder, sharedPhotoIndex);
    }
});

// Add these functions to your JavaScript
function sharePhoto(event) {
    event.preventDefault();
    const galleryView = document.querySelector('.gallery-view');
    const photoGrid = galleryView.querySelector('.photo-grid');
    
    // Get current folder and photo index
    const currentScroll = photoGrid.scrollLeft;
    const photoWidth = window.innerWidth;
    const currentPhotoIndex = Math.round(currentScroll / photoWidth);
    
    // Get current folder path from the active work
    const currentFolder = photoGrid.dataset.currentFolder;
    
    // Create shareable URL
    const url = new URL(window.location.href);
    url.searchParams.set('folder', currentFolder);
    url.searchParams.set('photo', currentPhotoIndex);
    
    // Copy to clipboard
    navigator.clipboard.writeText(url.toString())
        .then(() => {
            const shareButton = document.querySelector('.share-button');
            shareButton.textContent = 'Copied!';
            setTimeout(() => {
                shareButton.textContent = 'Share';
            }, 2000);
        })
        .catch(err => {
            console.error('Failed to copy:', err);
        });
}

// Add this function after updateThumbnails
function updateCounter(currentIndex) {
    const photoGrid = document.querySelector('.photo-grid');
    const photoCounter = document.querySelector('.photo-counter');
    const totalPhotos = photoGrid.children.length;
    
    if (photoCounter && totalPhotos > 0) {
        // Add 1 to currentIndex since we want to display 1-based counting
        photoCounter.textContent = `${currentIndex + 1}/${totalPhotos}`;
    }
}
</script>