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

<script type="text/javascript">
(function () {
    var bgList = [
        { name: "图鉴背景", file: "图鉴背景.jpg" },
        { name: "默认背景", file: "默认背景.jpg" },
        { name: "临时作战室", file: "临时作战室.jpg" },
        { name: "荒街涂鸦", file: "荒街涂鸦.jpg" },
        { name: "旧日都市", file: "旧日都市.jpg" },
        { name: "平安夜一角", file: "平安夜一角.jpg" },
        { name: "平安夜小屋", file: "平安夜小屋.jpg" },
        { name: "春节酒吧", file: "春节酒吧.jpg" },
        { name: "教堂", file: "教堂.jpg" },
        { name: "温馨咖啡厅", file: "温馨咖啡厅.jpg" },
        { name: "花火之夏", file: "花火之夏.jpg" },
        { name: "盛夏海滩", file: "盛夏海滩.jpg" },
        { name: "月圆人长久", file: "月圆人长久.jpg" },
        { name: "幸存者的万圣节", file: "幸存者的万圣节.jpg" },
        { name: "冬幕将至", file: "冬幕将至.jpg" },
        { name: "逢魔之刻", file: "逢魔之刻.jpg" },
        { name: "幻梦花海", file: "幻梦花海.jpg" },
        { name: "闲庭雪情", file: "闲庭雪情.jpg" },
        { name: "落暮之城", file: "落暮之城.jpg" },
        { name: "夕晖湖畔", file: "夕晖湖畔.jpg" },
        { name: "星夜之庭", file: "星夜之庭.jpg" },
        { name: "昼光之庭", file: "昼光之庭.jpg" },
        { name: "芙洛拉花径", file: "芙洛拉花径.jpg" },
        { name: "藏身处", file: "藏身处.jpg" },
        { name: "迷幻梦境", file: "迷幻梦境.jpg" },
        { name: "风吟", file: "风吟.jpg" },
        { name: "午后静室", file: "午后静室.jpg" },
        { name: "鹫羽大厅", file: "鹫羽大厅.jpg" },
        { name: "月下庆宴", file: "月下庆宴.jpg" }
    ];

    function getImgUrl(filename, fallbackSrc, callback) {
        var api = (window.mw && mw.Api) ? new mw.Api() : null;
        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;
                    }
                }
                fallback();
            }).fail(fallback);
        } else {
            fallback();
        }

        function fallback() {
            if (!fallbackSrc) { callback(null); return; }
            // 用Special:FilePath直接构造
            callback('/wiki/Special:FilePath/' + encodeURIComponent(filename));
        }
    }

    function switchImage(container, filename, onDone) {
        container.classList.add('loading');
        var mainWrap = container.querySelector('.gf-main-img');
        var oldImg = container.querySelector('img');
        var fallback = oldImg ? oldImg.src : null;

        getImgUrl(filename, fallback, function (url) {
            if (!url) { container.classList.remove('loading'); if (onDone) onDone(); return; }

            var preload = new Image();
            preload.onload = function () {
                if (mainWrap) {
                    mainWrap.innerHTML = '';
                    var img = document.createElement('img');
                    img.src = url;
                    mainWrap.appendChild(img);
                } else {
                    mainWrap = document.createElement('div');
                    mainWrap.className = 'gf-main-img';
                    var img = document.createElement('img');
                    img.src = url;
                    mainWrap.appendChild(img);
                    container.insertBefore(mainWrap, container.firstChild);
                }
                container.classList.remove('loading');
                if (onDone) onDone();
            };
            preload.onerror = function () {
                container.classList.remove('loading');
                if (onDone) onDone();
            };
            preload.src = url;
        });
    }

    function initBox(box) {
        if (box.dataset.ready) return;
        box.dataset.ready = '1';

        var leftPanel   = box.querySelector('.gf-left-panel');
        var container   = box.querySelector('.gf-image-container');
        var overlay     = box.querySelector('.gf-switcher-overlay');
        var toggle      = box.querySelector('.gf-switcher-toggle');
        var viewBtn     = box.querySelector('.gf-view-original');
        var groupBtns   = box.querySelectorAll('.gf-group-btn');
        var variantLists= box.querySelectorAll('.gf-variant-list');

        var selector = document.createElement('select');
        selector.className = 'gf-bg-selector';
        bgList.forEach(function (bg) {
            var opt = document.createElement('option');
            opt.value = '/wiki/Special:FilePath/' + encodeURIComponent(bg.file);
            opt.innerText = bg.name;
            selector.appendChild(opt);
        });
        container.appendChild(selector);
        selector.onclick  = function (e) { e.stopPropagation(); };
        selector.onchange = function () {
            leftPanel.style.backgroundImage = "url('" + this.value + "')";
        };

        if (toggle) {
            toggle.onclick = function () { overlay.classList.toggle('collapsed'); };
        }

        function getActiveVariant() {
            return box.querySelector('.gf-switch-btn.active');
        }

        groupBtns.forEach(function (gbtn) {
            gbtn.onclick = function () {
                var gid = gbtn.dataset.group;

                groupBtns.forEach(function (b) { b.classList.remove('active'); });
                gbtn.classList.add('active');

                variantLists.forEach(function (vl) {
                    if (vl.dataset.group === gid) {
                        vl.classList.remove('collapsed');
                    } else {
                        vl.classList.add('collapsed');
                    }
                });

                var targetList = box.querySelector('.gf-variant-list[data-group="' + gid + '"]');
                if (!targetList) return;
                var firstBtn = targetList.querySelector('.gf-switch-btn');
                if (!firstBtn) return;

                box.querySelectorAll('.gf-switch-btn').forEach(function (b) { b.classList.remove('active'); });
                firstBtn.classList.add('active');

                switchImage(container, firstBtn.dataset.filename);
            };
        });

        box.querySelectorAll('.gf-switch-btn').forEach(function (vbtn) {
            vbtn.onclick = function (e) {
                e.stopPropagation();
                if (vbtn.classList.contains('active')) return;

                box.querySelectorAll('.gf-switch-btn').forEach(function (b) { b.classList.remove('active'); });
                vbtn.classList.add('active');

                switchImage(container, vbtn.dataset.filename);
            };
        });

        if (viewBtn) {
            viewBtn.onclick = function (e) {
                e.stopPropagation();
                var active = getActiveVariant();
                if (!active) return;
                var filename = active.dataset.filename;
                if (window.mw) {
                    window.open(
                        mw.config.get('wgArticlePath').replace('$1', 'File:' + filename),
                        '_blank'
                    );
                }
            };
        }
    }
(function injectScrollbarStyle() {
    var style = document.createElement('style');
    style.textContent = '.gf-switcher-list::-webkit-scrollbar { display: none; }';
    document.head.appendChild(style);
})();
    function initAll() {
        document.querySelectorAll('.gf-infobox-new').forEach(initBox);
    }

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