Widget:GF立绘切换

<script> (function () {

   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 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 && overlay) {
               toggle.addEventListener('click', function() {
                   overlay.classList.toggle('collapsed');
               });
           }

           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 currentFileName = currentSrc.substring(currentSrc.lastIndexOf('/') + 1);
                   var guessedUrl = currentSrc.replace(currentFileName, filename.replace(/ /g, '_'));
                   callback(guessedUrl);
               }
           }

           if (!container) return;

           if (viewBtn) {
               viewBtn.addEventListener('click', function(e) {
                   e.stopPropagation();
                   var img = container.querySelector('img');
                   if (img && img.src) {
                       window.open(img.src, '_blank');
                   }
               });
           }

           container.addEventListener('click', function() {
               var img = container.querySelector('img');
               var activeBtn = box.querySelector('.gf-switch-btn.active');
               if (!img || !activeBtn) return;

               var baseFile = activeBtn.dataset.filename;
               var isCurrentlyDamage = activeBtn.dataset.state === 'damage';
               
               var dotIndex = baseFile.lastIndexOf('.');
               var damageFile = baseFile.substring(0, dotIndex) + '_D' + baseFile.substring(dotIndex);
               var targetFile = isCurrentlyDamage ? baseFile : damageFile;
               
               container.classList.add('loading');
               getImgPath(targetFile, img.src, function(url) {
                   if (!url) {
                       container.classList.remove('loading');
                       return;
                   }
                   var tempImg = new Image();
                   tempImg.onload = function() {
                       img.src = url;
                       activeBtn.dataset.state = isCurrentlyDamage ? 'normal' : 'damage';
                       container.classList.remove('loading');
                   };
                   tempImg.onerror = function() { container.classList.remove('loading'); };
                   tempImg.src = url;
               });
           });

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

                   var filename = btn.dataset.filename;
                   btn.dataset.state = 'normal';
                   
                   var oldImg = container.querySelector('img');
                   if (oldImg) oldImg.style.opacity = '0';

                   getImgPath(filename, (oldImg ? oldImg.src : null), function(url) {
                       if (!url) return;
                       setTimeout(function () {
                           // 修复点：将图片包裹在 gf-main-img 容器内，保持 CSS 约束一致

container.innerHTML = '

<img src="' + url + '" style="opacity:0;">

';

                           container.appendChild(viewBtn);
                           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');
               });
           });
       });
   }

   // 强力轮询：彻底解决 mw.loader.using 报错
   var retryCount = 0;
   var checkMediaWiki = setInterval(function() {
       retryCount++;
       if (window.mw && mw.loader && mw.loader.using && mw.Api) {
           clearInterval(checkMediaWiki);
           mw.loader.using(['mediawiki.api']).then(initSwitcher);
       } else if (retryCount > 100) { // 10秒超时兜底
           clearInterval(checkMediaWiki);
           if (window.jQuery) initSwitcher();
       }
   }, 100);

})(); </script>