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');
    viewerOverlay.innerHTML = `
        <div id="image-viewer" class="image_view image_hide">
            <div class="image-view-close">
                <button class="btn-nostyle" id="viewer-prev-button">
                    <div class="material-icons-round icon_visibility clickable image-before">navigate_before</div>
                </button>
                <button class="btn-nostyle" id="viewer-next-button">
                    <div class="material-icons-round icon_visibility clickable image-next">navigate_next</div>
                </button>
                <button class="btn-nostyle" id="viewer-close-button">
                    <div class="material-icons-round icon_visibility clickable image-close">close</div>
                </button>
            </div>
            <a class="image-viewer-link" id="viewer-image-link" target="_blank">
                <div class="view-image" id="viewer-image-container">
                    <img id="viewer-image" class="view-image-img" src="" alt="">
                </div>
            </a>
            <p class="image-alt" id="viewer-title"></p>
            <p>View source: <a id="viewer-source-button" class="image-source" href="" target="_blank"></a></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 = document.getElementById('image-viewer');

    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;

        viewerOverlay.style.display = 'flex';
        imageView.classList.remove('image_hide');
        imageView.classList.add('image_show');
    }

    function displayImage(index) {
        if (index < 0 || index >= imageList.length) return;
    
        const imgElement = imageList[index];
        const parentImageDiv = imgElement.closest('.image');
    
        if (!parentImageDiv) {
            console.warn('Parent image div not found');
            return;
        }
    
        // Use the `data-full` attribute for the full image URL
        let fullImageUrl = imgElement.getAttribute('data-full') || imgElement.src;
        const title = imgElement.alt || 'Untitled';
    
        // Gracefully handle the source URL or other attributes
        const sourceElement = parentImageDiv.querySelector('.img_source');
        const sourceUrl = sourceElement ? sourceElement.href : null;
    
        // Fallback logic: if sourceUrl is null, use `data-proxy-full` or a meaningful default
        const proxyFullUrl = imgElement.getAttribute('data-proxy-full') || fullImageUrl;
    
        // Check if full image is missing, fallback to proxy size
        if (fullImageUrl === '/static/images/missing.svg') {
            fullImageUrl = proxyFullUrl;
        }
    
        // Elements in the viewer
        const viewerImage = document.getElementById('viewer-image');
        const viewerTitle = document.getElementById('viewer-title');
        const viewerSourceButton = document.getElementById('viewer-source-button');
        const fullSizeLink = document.getElementById('viewer-full-size-link');
        const proxySizeLink = document.getElementById('viewer-proxy-size-link');
        const viewerImageLink = document.getElementById('viewer-image-link');
    
        // Assign values to the viewer elements
        viewerImage.src = fullImageUrl; // Full-size image in the viewer
        viewerTitle.textContent = title;
    
        viewerSourceButton.href = sourceUrl || proxyFullUrl; // Use proxy URL if source is missing
        fullSizeLink.href = sourceUrl || proxyFullUrl;       // Link to source website or proxy
        proxySizeLink.href = fullImageUrl;                  // Link to the proxied full-size image
        viewerImageLink.href = fullImageUrl;                // Make image clickable to open in a new tab
    }

    // Attach event listener to the document body
    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');
        viewerOverlay.style.display = 'none';
        viewerOpen = false;
        currentIndex = -1;
    }

    // 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
    viewerOverlay.addEventListener('click', function(e) {
        if (e.target === viewerOverlay) {
            closeImageViewer();
        }
    });

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