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

<script>
(function () {
    function initSwitcher() {
        // 确保 mw 对象可用
        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');

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

            // 获取 MediaWiki 图片真实路径的辅助函数
            function getImgPath(filename, callback) {
                if (!api) {
                    // 如果 Api 不可用，退回到基础路径猜测（不推荐）
                    callback(null);
                    return;
                }
                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;
                        }
                    }
                    callback(null);
                }).fail(function() { callback(null); });
            }

            if (!container) return;

            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';
                
                // 拼接重创文件名: pic.png -> pic_D.png
                var dotIndex = baseFile.lastIndexOf('.');
                var damageFile = baseFile.substring(0, dotIndex) + '_D' + baseFile.substring(dotIndex);

                var targetFile = isCurrentlyDamage ? baseFile : damageFile;
                
                console.log("--- 重创切换调试 ---");
                console.log("原始参数文件名:", baseFile);
                console.log("目标尝试文件名:", targetFile);

                container.classList.add('loading');
                
                getImgPath(targetFile, function(url) {
                    if (!url) {
                        console.error("无法获取文件路径，请确认文件是否存在: File:" + targetFile);
                        container.classList.remove('loading');
                        return;
                    }
                    
                    console.log("最终获取的真实 URL:", url);
                    var tempImg = new Image();
                    tempImg.onload = function() {
                        img.src = url;
                        activeBtn.dataset.state = isCurrentlyDamage ? 'normal' : 'damage';
                        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, 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;">';
                            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', 'mediawiki.jqueryMsg']).then(initSwitcher);
    } else {
        document.addEventListener('DOMContentLoaded', initSwitcher);
    }
})();
</script>