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 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; }

           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 infoOverlay  = box.querySelector('.gf-info-overlay');
       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);
       });
       var controls = box.querySelector('.gf-controls');
       if (controls) {
           controls.insertBefore(selector, controls.firstChild);
       }
       selector.onclick  = function (e) { e.stopPropagation(); };
       selector.onchange = function () {
           leftPanel.style.backgroundImage = "url('" + this.value + "')";
       };

       var uiHidden = false;

       if (toggle) {
           toggle.onclick = function (e) {
               e.stopPropagation();
               overlay.classList.toggle('expanded');
           };
       }

       function setUIVisible(visible) {
           uiHidden = !visible;
           var els = [overlay, infoOverlay, controls];
           els.forEach(function(el) {
               if (!el) return;
               el.style.opacity = visible ?  : '0';
               el.style.pointerEvents = visible ?  : 'none';
           });
       }

       leftPanel.addEventListener('click', function(e) {
           var blocked = [overlay, controls].some(function(el) {
               return el && el.contains(e.target);
           });
           if (!blocked) setUIVisible(uiHidden);
       }, true);

       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 injectStyles() {
       var style = document.createElement('style');
       style.textContent = [
           '.gf-switcher-list::-webkit-scrollbar { display: none; }',
           '.gf-switcher-list { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }'
       ].join('\n');
       document.head.appendChild(style);
   }

   function initMarquee() {
       document.querySelectorAll('.gf-info-table td:last-child, .gf-bottom-table td:last-child').forEach(function(td) {
           if (td.scrollWidth > td.clientWidth) {
               var text = td.innerHTML;
               td.innerHTML = '' + text + ' | ' + text + '';
           }
       });
   }

   function initAll() {
       injectStyles();
       document.querySelectorAll('.gf-infobox-new').forEach(initBox);
   }

   setTimeout(initAll, 300);
   setTimeout(initMarquee, 350);

})();

</script>