微件:GF立绘切换
来自OGAS数据中枢
更多操作
(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);
})();