查看“︁Widget:GF立绘切换”︁的源代码

<script>
(function () {
    function initSwitcher() {
        var api = (window.mw && mw.Api) ? new mw.Api() : null;

        document.querySelectorAll('.gf-infobox-new').forEach(function (box) {
            if (box.dataset.ready) return;
            box.dataset.ready = '1';

            var container = box.querySelector('.gf-image-container');
            var btns = box.querySelectorAll('.gf-switch-btn');
            var overlay = box.querySelector('.gf-switcher-overlay');
            var toggle = box.querySelector('.gf-switcher-toggle');
            var viewBtn = box.querySelector('.gf-view-original');

            if (toggle && overlay) {
                toggle.addEventListener('click', function() {
                    overlay.classList.toggle('collapsed');
                });
            }

            function getImgPath(filename, currentSrc, callback) {
                if (api) {
                    api.get({
                        action: 'query',
                        prop: 'imageinfo',
                        titles: 'File:' + filename,
                        iiprop: 'url'
                    }).done(function (data) {
                        var pages = data.query.pages;
                        for (var id in pages) {
                            if (pages[id].imageinfo) {
                                callback(pages[id].imageinfo[0].url);
                                return;
                            }
                        }
                        tryFallback();
                    }).fail(tryFallback);
                } else {
                    tryFallback();
                }

                function tryFallback() {
                    if (!currentSrc) { callback(null); return; }
                    var currentFileName = currentSrc.substring(currentSrc.lastIndexOf('/') + 1);
                    var guessedUrl = currentSrc.replace(currentFileName, filename.replace(/ /g, '_'));
                    callback(guessedUrl);
                }
            }

            if (!container) return;

            // 原图按钮逻辑
            if (viewBtn) {
                viewBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    var img = container.querySelector('img');
                    if (img && img.src) {
                        window.open(img.src, '_blank');
                    }
                });
            }

            // 重创切换
            container.addEventListener('click', function() {
                var img = container.querySelector('img');
                var activeBtn = box.querySelector('.gf-switch-btn.active');
                if (!img || !activeBtn) return;

                var baseFile = activeBtn.dataset.filename;
                var isCurrentlyDamage = activeBtn.dataset.state === 'damage';
                
                var dotIndex = baseFile.lastIndexOf('.');
                var damageFile = baseFile.substring(0, dotIndex) + '_D' + baseFile.substring(dotIndex);
                var targetFile = isCurrentlyDamage ? baseFile : damageFile;
                
                container.classList.add('loading');
                getImgPath(targetFile, img.src, function(url) {
                    if (!url) {
                        container.classList.remove('loading');
                        return;
                    }
                    var tempImg = new Image();
                    tempImg.onload = function() {
                        img.src = url;
                        activeBtn.dataset.state = isCurrentlyDamage ? 'normal' : 'damage';
                        container.classList.remove('loading');
                    };
                    tempImg.onerror = function() { container.classList.remove('loading'); };
                    tempImg.src = url;
                });
            });

            btns.forEach(function (btn) {
                btn.addEventListener('click', function (e) {
                    e.stopPropagation();
                    if (btn.classList.contains('active')) return;

                    var filename = btn.dataset.filename;
                    btn.dataset.state = 'normal';
                    
                    var oldImg = container.querySelector('img');
                    if (oldImg) oldImg.style.opacity = '0';

                    getImgPath(filename, (oldImg ? oldImg.src : null), function(url) {
                        if (!url) return;
                        setTimeout(function () {
                            container.innerHTML = '<img src="' + url + '" style="max-width:100%;max-height:500px;object-fit:contain;opacity:0;transition:opacity 0.3s;height:auto;width:auto;">';
                            // 重新补回查看原图按钮（因为innerHTML被覆盖了）
                            container.appendChild(viewBtn);
                            var newImg = container.querySelector('img');
                            if (newImg) {
                                newImg.onload = function () { newImg.style.opacity = '1'; };
                                if (newImg.complete) newImg.style.opacity = '1';
                            }
                        }, 150);
                    });

                    btns.forEach(function (b) { b.classList.remove('active'); });
                    btn.classList.add('active');
                });
            });
        });
    }

    if (window.mw && mw.loader) {
        mw.loader.using(['mediawiki.api']).then(initSwitcher);
    } else {
        var checkInterval = setInterval(function() {
            if (window.jQuery && window.mw && mw.Api) {
                clearInterval(checkInterval);
                initSwitcher();
            }
        }, 100);
    }
})();
</script>