Search/static/js/imageviewer.js

document.addEventListener('DOMContentLoaded', function() {
    let viewerOpen = false;
    let currentIndex = -1;
    let imageList = [];

    // Initialize imageList with all images on the page
    function initializeImageList() {
        imageList = Array.from(document.querySelectorAll('.image img.clickable'));
    }

    const viewerOverlay = document.getElementById('image-viewer-overlay');

    // Set the innerHTML of viewerOverlay
    viewerOverlay.innerHTML = `
        <div id="image-viewer" class="image_view image_hide">
            <div class="btn-nostyle">
                <button class="btn-nostyle" id="viewer-prev-button">
                    <div class="material-icons-round icon_visibility clickable image-before">&#xe408;</div> <!-- navigate_before -->
                </button>
                <button class="btn-nostyle" id="viewer-next-button">
                    <div class="material-icons-round icon_visibility clickable image-next">&#xe409;</div> <!-- navigate_next -->
                </button>
                <button class="btn-nostyle" id="viewer-close-button">
                    <div class="material-icons-round icon_visibility clickable image-close">&#xe5cd;</div> <!-- close -->
                </button>
            </div>
            <div class="view-image" id="viewer-image-container">
                <img id="viewer-image" class="view-image-img" src="" alt="">
            </div>
            <p class="image-alt" id="viewer-title"></p>
            <p>
                <a class="full-size" id="viewer-full-size-link" href="#" target="_blank">Show source website</a>
                <a class="proxy-size" id="viewer-proxy-size-link" href="#" target="_blank">Show in fullscreen</a>
            </p>
        </div>
    `;

    const imageView = viewerOverlay.querySelector('#image-viewer');
    if (!imageView) {
        console.error('imageView is null');
    }

    const imagesContainer = document.querySelector('.images');
    if (!imagesContainer) {
        console.error('imagesContainer is null');
    }

    function openImageViewer(element) {
        initializeImageList(); // Update the image list

        const parentImageDiv = element.closest('.image');
        if (!parentImageDiv) return;

        currentIndex = imageList.findIndex(img => img === parentImageDiv.querySelector('img.clickable'));
        if (currentIndex === -1) return;

        displayImage(currentIndex);
        viewerOpen = true;

        imagesContainer.classList.remove('images_viewer_hidden');
        document.body.classList.add('viewer-open');
        viewerOverlay.style.display = 'block';

        imageView.classList.remove('image_hide');
        imageView.classList.add('image_show');
    }

    function displayImage(index) {
        if (index < 0 || index >= imageList.length) return;

        // Remove the `.image_selected` class from all images
        imageList.forEach(img => {
            const parentImageDiv = img.closest('.image');
            if (parentImageDiv) {
                parentImageDiv.classList.remove('image_selected');
            }
        });
    
        const imgElement = imageList[index];
        const parentImageDiv = imgElement.closest('.image');

        if (!parentImageDiv) {
            console.warn('Parent image div not found');
            return;
        }

        // Add the `.image_selected` class to the currently displayed image
        parentImageDiv.classList.add('image_selected');
    
        // Use the `data-full` attribute for the full image URL
        let fullImageUrl = imgElement.getAttribute('data-full') || imgElement.src;
        const title = imgElement.alt || 'Untitled';
    
        // Get the source URL from the data-source attribute
        const sourceUrl = imgElement.getAttribute('data-source');
    
        // Fallback logic: if sourceUrl is null, use `data-proxy-full` or a meaningful default
        const proxyFullUrl = imgElement.getAttribute('data-proxy-full') || fullImageUrl;

        // Elements in the viewer
        const viewerImage = document.getElementById('viewer-image');
        const viewerTitle = document.getElementById('viewer-title');
        const fullSizeLink = document.getElementById('viewer-full-size-link');
        const proxySizeLink = document.getElementById('viewer-proxy-size-link');
    
        viewerTitle.textContent = title;
        fullSizeLink.href = sourceUrl || proxyFullUrl;
    
        // Remove previous event listeners to avoid stacking
        viewerImage.onload = null;
        viewerImage.onerror = null;
    
        // Set up the error handler to switch to the proxy image if the full image fails to load
        viewerImage.onerror = function() {
            // Use the proxy image as a fallback
            viewerImage.src = proxyFullUrl;
            proxySizeLink.href = proxyFullUrl;
        };
    
        // Set up the load handler to ensure the proxySizeLink is set correctly if the image loads
        viewerImage.onload = function() {
            proxySizeLink.href = fullImageUrl;
        };
    
        // Start loading the image
        viewerImage.src = fullImageUrl;
    }    

    document.body.addEventListener('click', function(e) {
        let target = e.target;
        let clickableElement = target.closest('img.clickable, .img_title.clickable');

        if (clickableElement) {
            e.preventDefault();
            openImageViewer(clickableElement);
        }
    });

    function closeImageViewer() {
        imageView.classList.remove('image_show');
        imageView.classList.add('image_hide');
        viewerOpen = false;
        currentIndex = -1;

        imagesContainer.classList.add('images_viewer_hidden');
        document.body.classList.remove('viewer-open');
        viewerOverlay.style.display = 'none';
    
        // Remove `.image_selected` from all images
        imageList.forEach(img => {
            const parentImageDiv = img.closest('.image');
            if (parentImageDiv) {
                parentImageDiv.classList.remove('image_selected');
            }
        });
    }

    // Navigation functions
    function showPreviousImage() {
        if (currentIndex > 0) {
            currentIndex--;
            displayImage(currentIndex);
        }
    }

    function showNextImage() {
        if (currentIndex < imageList.length - 1) {
            currentIndex++;
            displayImage(currentIndex);
        }
    }

    // Event listeners for navigation and closing
    document.getElementById('viewer-close-button').addEventListener('click', closeImageViewer);
    document.getElementById('viewer-prev-button').addEventListener('click', showPreviousImage);
    document.getElementById('viewer-next-button').addEventListener('click', showNextImage);

    // Close viewer when clicking outside the image
    document.addEventListener('click', function(e) {
        if (viewerOpen) {
            const target = e.target;
            const clickedInsideViewer = viewerOverlay.contains(target) || target.closest('.image');
            if (!clickedInsideViewer) {
                closeImageViewer();
            }
        }
    });

    // Handle keyboard events for closing and navigation
    document.addEventListener('keydown', function(e) {
        if (viewerOpen) {
            if (e.key === 'Escape') {
                closeImageViewer();
            } else if (e.key === 'ArrowLeft') {
                showPreviousImage();
            } else if (e.key === 'ArrowRight') {
                showNextImage();
            }
        }
    });    
});