Search/static/js/imageviewer.js

document.addEventListener('DOMContentLoaded', function() {
    let viewerOpen = false;

    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">
                    <div id="viewer-prev-button" class="material-icons-round icon_visibility clickable image-before">navigate_before</div>
                </button>
                <button class="btn-nostyle">
                    <div id="viewer-next-button" class="material-icons-round icon_visibility clickable image-next">navigate_next</div>
                </button> FIX THIS LATER! --!>
                <button class="btn-nostyle">
                    <div id="viewer-close-button" class="material-icons-round icon_visibility clickable image-close">close</div>
                </button>
            </div>
            <a class="image-viewer-link">
                <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" href="#">Show source website</a>
                <a class="proxy-size" href="#">Show in fullscreen</a>
            </p>
        </div>
    `;

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

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

        const imgElement = parentImageDiv.querySelector('img.clickable');
        const fullImageUrl = imgElement.dataset.proxyFull; // Use data-proxy-full for ProxyFull
        const thumbnailUrl = imgElement.src;              // Use ProxyThumb for the thumbnail
        const title = imgElement.alt;
        const sourceUrl = parentImageDiv.querySelector('.img_source').href; // Source webpage URL

        if (!fullImageUrl || viewerOpen) {
            return;  // Don't open if data is missing or viewer is already open
        }
        viewerOpen = true;

        const viewerImage = document.getElementById('viewer-image');
        const viewerTitle = document.getElementById('viewer-title');
        const viewerSourceButton = document.getElementById('viewer-source-button');
        const fullSizeLink = imageView.querySelector('.full-size');
        const proxySizeLink = imageView.querySelector('.proxy-size');

        // Set the viewer image to ProxyFull
        viewerImage.src = fullImageUrl;
        viewerTitle.textContent = title;
        viewerSourceButton.href = sourceUrl;
        fullSizeLink.href = sourceUrl;        // Link to the source website
        proxySizeLink.href = fullImageUrl;    // Link to the proxied full-size image

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

    // 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;
    }

    // Close viewer on overlay or button click
    document.getElementById('viewer-close-button').addEventListener('click', closeImageViewer);
    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();
            }
        }
    });
});