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

<script>
(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 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 leftPanel = box.querySelector('.gf-left-panel');
            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'); };

            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 + "')";
            };

            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 activeBtn = box.querySelector('.gf-switch-btn.active');
                    if (activeBtn) {
                        var filename = activeBtn.dataset.filename;
                        var isDmg = activeBtn.dataset.state === 'damage';
                        var target = isDmg ? filename.substring(0, filename.lastIndexOf('.')) + '_D' + filename.substring(filename.lastIndexOf('.')) : filename;
                        window.open(mw.config.get('wgArticlePath').replace('$1', 'File:' + target), '_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 mainImgWrap = container.querySelector('.gf-main-img');
                    var oldImg = container.querySelector('img');
                    if (oldImg) oldImg.style.opacity = '0';
                    
                    container.classList.add('loading');
                    getImgPath(filename, (oldImg ? oldImg.src : null), function(url) {
                        if (url) {
                            setTimeout(function () {
                                if (mainImgWrap) {
                                    mainImgWrap.innerHTML = '<img src="' + url + '" style="opacity:0;">';
                                } else {
                                    var newWrap = document.createElement('div');
                                    newWrap.className = 'gf-main-img';
                                    newWrap.innerHTML = '<img src="' + url + '" style="opacity:0;">';
                                    container.insertBefore(newWrap, container.firstChild);
                                }
                                
                                var n = container.querySelector('img');
                                n.onload = function () { 
                                    n.style.opacity = '1'; 
                                    container.classList.remove('loading');
                                };
                                n.onerror = function () {
                                    container.classList.remove('loading');
                                };
                                if (n.complete) {
                                    n.style.opacity = '1';
                                    container.classList.remove('loading');
                                }
                            }, 150);
                        } else {
                            container.classList.remove('loading');
                        }
                    });
                    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>