michaelschiemer/resources/js/modules/lightbox-trigger/index.js

// modules/lightbox-trigger/index.js
import { UIManager } from '../ui/UIManager.js';
import { Logger } from '../../core/logger.js';
import { useEvent } from '../../core/useEvent.js';

function onClick(e) {
    // Check if the clicked element is an image
    let img = null;
    
    if (e.target.tagName === 'IMG') {
        img = e.target;
    } else {
        // Check if clicked element contains an image
        img = e.target.querySelector('img');
    }
    
    if (!img) return;
    
    // Opt-out mechanism: skip if image has data-lightbox="false"
    if (img.dataset.lightbox === 'false') return;
    
    // Skip very small images (likely icons, thumbnails, decorative)
    if (img.naturalWidth < 200 || img.naturalHeight < 200) return;
    
    // Skip images in specific containers that shouldn't open lightbox
    if (img.closest('nav, header, footer, .no-lightbox')) return;
    
    e.preventDefault();
    
    // Get the best quality source for lightbox
    const lightboxSrc = getBestImageSource(img);
    const caption = img.alt || img.dataset.caption || img.title || '';
    
    // Create responsive picture element for lightbox
    const pictureElement = img.closest('picture');
    let lightboxContent;
    
    if (pictureElement) {
        // Clone the entire picture element for responsive display
        const clonedPicture = pictureElement.cloneNode(true);
        const clonedImg = clonedPicture.querySelector('img');
        clonedImg.className = 'lightbox-image';
        
        lightboxContent = `
            <div class="lightbox-content">
                ${clonedPicture.outerHTML}
                ${caption ? `<div class="lightbox-caption">${caption}</div>` : ''}
            </div>
        `;
        
        Logger.info('[Lightbox] Opening responsive image (picture element):', lightboxSrc);
    } else {
        // Fallback for standalone img elements
        lightboxContent = `
            <div class="lightbox-content">
                <img src="${lightboxSrc}" alt="${caption}" class="lightbox-image" />
                ${caption ? `<div class="lightbox-caption">${caption}</div>` : ''}
            </div>
        `;
        
        Logger.info('[Lightbox] Opening standalone image:', lightboxSrc);
    }
    
    // Use singleton lightbox instance
    const lightbox = UIManager.open('lightbox', {
        content: lightboxContent
    });
    
    // Log reuse status
    if (UIManager.isOpen('lightbox') && lightbox) {
        Logger.info('[Lightbox] Reused existing lightbox instance');
    }
}

function getBestImageSource(img) {
    // Priority order for getting the best image source:
    // 1. data-lightbox-src (explicitly defined high-res version)
    // 2. currentSrc (browser-selected responsive source)
    // 3. src (fallback)
    
    if (img.dataset.lightboxSrc) {
        return img.dataset.lightboxSrc;
    }
    
    if (img.currentSrc) {
        return img.currentSrc;
    }
    
    return img.src;
}

export function init() {
    Logger.info('[lightbox-trigger] Auto-enabling lightbox for all images (including picture/srcset)');
    Logger.info('[lightbox-trigger] Use data-lightbox="false" to opt-out');
    Logger.info('[lightbox-trigger] Use data-lightbox-src for custom high-res versions');
    
    useEvent(document, 'click', onClick);
    
    // Add visual indicator to lightbox-enabled images
    enhanceImages();
}

function enhanceImages() {
    const images = document.querySelectorAll('img:not([data-lightbox="false"])');
    let enhancedCount = 0;
    
    images.forEach(img => {
        // Skip small images and images in excluded containers
        if (img.naturalWidth < 200 || img.naturalHeight < 200) return;
        if (img.closest('nav, header, footer, .no-lightbox')) return;
        
        // Add CSS class for styling
        img.classList.add('lightbox-enabled');
        
        // Add cursor pointer
        img.style.cursor = 'zoom-in';
        
        // Add title hint if none exists
        if (!img.title && !img.alt) {
            img.title = 'Klicken zum Vergrößern';
        }
        
        enhancedCount++;
    });
    
    Logger.info(`[Lightbox] Enhanced ${enhancedCount} images with lightbox functionality`);
}

export function destroy() {
    Logger.info('[lightbox-trigger] destroy');
    
    // Remove enhancements
    const enhancedImages = document.querySelectorAll('img.lightbox-enabled');
    enhancedImages.forEach(img => {
        img.classList.remove('lightbox-enabled');
        img.style.cursor = '';
        if (img.title === 'Klicken zum Vergrößern') {
            img.title = '';
        }
    });
    
    // Event removal happens automatically via EventManager
}