查看“︁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) toggle.onclick = 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 curName = currentSrc.substring(currentSrc.lastIndexOf('/') + 1);
                    callback(currentSrc.replace(curName, filename.replace(/ /g, '_')));
                }
            }

            if (viewBtn) {
                viewBtn.onclick = function(e) {
                    e.stopPropagation();
                    var img = container.querySelector('img');
                    if (img) window.open(img.src, '_blank');
                };
            }

            container.onclick = function() {
                var img = container.querySelector('img');
                var activeBtn = box.querySelector('.gf-switch-btn.active');
                if (!img || !activeBtn) return;
                var base = activeBtn.dataset.filename;
                var isDmg = activeBtn.dataset.state === 'damage';
                var target = isDmg ? base : base.substring(0, base.lastIndexOf('.')) + '_D' + base.substring(base.lastIndexOf('.'));
                
                container.classList.add('loading');
                getImgPath(target, img.src, function(url) {
                    if (url) {
                        var t = new Image();
                        t.onload = function() { img.src = url; activeBtn.dataset.state = isDmg ? 'normal' : 'damage'; container.classList.remove('loading'); };
                        t.onerror = function() { container.classList.remove('loading'); };
                        t.src = url;
                    } else container.classList.remove('loading');
                });
            };

            btns.forEach(function (btn) {
                btn.onclick = 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) {
                            setTimeout(function () {
                                // 彻底修复点：统一切换后的 HTML 结构
                                container.innerHTML = '<div class="gf-main-img"><img src="' + url + '" style="opacity:0;"></div>';
                                container.appendChild(viewBtn);
                                var n = container.querySelector('img');
                                n.onload = function () { n.style.opacity = '1'; };
                                if (n.complete) n.style.opacity = '1';
                            }, 150);
                        }
                    });
                    btns.forEach(function (b) { b.classList.remove('active'); });
                    btn.classList.add('active');
                };
            });
        });
    }

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