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

<script>
(function () {
    function initSwitcher() {
        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');
                });
            }

            if (!container) return;

            container.addEventListener('click', function() {
                console.log("--- 触发主图点击事件 ---");
                var img = container.querySelector('img');
                var activeBtn = box.querySelector('.gf-switch-btn.active');
                
                if (!img) { console.error("未找到 img 标签"); return; }
                if (!activeBtn) { console.error("未找到处于 active 状态的按钮"); return; }

                var normalSrc = activeBtn.dataset.src;
                var damageSrc = activeBtn.dataset.damage;

                console.log("当前图片 SRC:", img.src);
                console.log("按钮原始图路径:", normalSrc);
                console.log("按钮重创图路径:", damageSrc);

                if (!damageSrc || damageSrc.length < 5) {
                    console.warn("重创图路径无效或未定义，请确认是否存在后缀为 _D 的图片。");
                    return;
                }

                // 统一处理 URL，防止因为绝对路径/相对路径导致匹配失败
                var isCurrentDamage = img.src.indexOf(damageSrc) !== -1;
                var targetSrc = isCurrentDamage ? normalSrc : damageSrc;

                console.log("判定结果:", isCurrentDamage ? "当前是重创态 -> 切换回正常" : "当前是正常态 -> 切换至重创");
                console.log("正在加载目标图片:", targetSrc);

                container.classList.add('loading');
                var tempImg = new Image();
                tempImg.onload = function() {
                    img.src = targetSrc;
                    container.classList.remove('loading');
                    console.log("图片加载成功并已替换。");
                };
                tempImg.onerror = function() {
                    console.error("加载失败，请检查该 URL 是否可访问:", targetSrc);
                    container.classList.remove('loading');
                };
                tempImg.src = targetSrc;
            });

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

                    var src = btn.dataset.src;
                    console.log("切换立绘组，新图路径:", src);

                    var oldImg = container.querySelector('img');
                    if (oldImg) oldImg.style.opacity = '0';

                    setTimeout(function () {
                        container.innerHTML = '<img src="' + src + '" 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 (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initSwitcher);
    } else {
        initSwitcher();
    }

    if (window.mw) {
        mw.hook('wikipage.content').add(initSwitcher);
    }
})();
</script>