مدیاویکی:Common.js: تفاوت میان نسخه‌ها

نسخهٔ ۲۷ ژانویهٔ ۲۰۲۶، ساعت ۱۷:۴۵

/**
 * Gallery to background-cover: set img src as background on .thumb div + hide img
 * → ONLY on Category: pages (not articles or other namespaces)
 */
(function () {
    'use strict';

    // Early exit if not on a category page
    if (mw.config.get('wgCanonicalNamespace') !== 'Category') {
        return;
    }

    function processGalleries() {
        document.querySelectorAll('li.gallerybox').forEach(function (box) {
            // Find the .thumb div and the img inside it
            const thumbDiv = box.querySelector('div.thumb');
            const img = thumbDiv ? thumbDiv.querySelector('img.mw-file-element') : null;

            if (thumbDiv && img && img.src && !thumbDiv.dataset.backgroundApplied) {
                // Apply background to the .thumb div
                thumbDiv.style.backgroundImage = 'url(' + img.src + ')';
                thumbDiv.style.backgroundSize = 'cover';
                thumbDiv.style.backgroundPosition = 'center center';
                thumbDiv.style.backgroundRepeat = 'no-repeat';

                // Hide the original <img> tag
                img.style.display = 'none';

                // Mark as processed (prevents re-processing the same element)
                thumbDiv.dataset.backgroundApplied = 'true';

                console.log('Applied background to thumb div on category page:', img.src);
            }
        });
    }

    // Run once DOM is ready
    document.addEventListener('DOMContentLoaded', processGalleries);

    // Watch for dynamic content additions (very useful for DPL, CategoryTree, transclusions, AJAX-loaded galleries, etc.)
    const observer = new MutationObserver(processGalleries);
    observer.observe(document.body, { childList: true, subtree: true });

    // Extra fallback runs (in case observer misses something or images load very late)
    setTimeout(processGalleries, 1000);
    setTimeout(processGalleries, 2500);
    setTimeout(processGalleries, 5000);  // one more — harmless and helps on slow connections
})();