Widget:GF立绘切换

<script> (function () {

   function initSwitcher() {
       // 确保 mw 对象可用
       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');

           if (toggle && overlay) {
               toggle.addEventListener('click', function() {
                   overlay.classList.toggle('collapsed');
               });
           }

           // 获取 MediaWiki 图片真实路径的辅助函数
           function getImgPath(filename, callback) {
               if (!api) {
                   // 如果 Api 不可用，退回到基础路径猜测（不推荐）
                   callback(null);
                   return;
               }
               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;
                       }
                   }
                   callback(null);
               }).fail(function() { callback(null); });
           }

           if (!container) return;

           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';
               
               // 拼接重创文件名: pic.png -> pic_D.png
               var dotIndex = baseFile.lastIndexOf('.');
               var damageFile = baseFile.substring(0, dotIndex) + '_D' + baseFile.substring(dotIndex);

               var targetFile = isCurrentlyDamage ? baseFile : damageFile;
               
               console.log("--- 重创切换调试 ---");
               console.log("原始参数文件名:", baseFile);
               console.log("目标尝试文件名:", targetFile);

               container.classList.add('loading');
               
               getImgPath(targetFile, function(url) {
                   if (!url) {
                       console.error("无法获取文件路径，请确认文件是否存在: File:" + targetFile);
                       container.classList.remove('loading');
                       return;
                   }
                   
                   console.log("最终获取的真实 URL:", url);
                   var tempImg = new Image();
                   tempImg.onload = function() {
                       img.src = url;
                       activeBtn.dataset.state = isCurrentlyDamage ? 'normal' : 'damage';
                       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, function(url) {
                       if (!url) return;
                       setTimeout(function () {
                           container.innerHTML = '<img src="' + url + '" style="max-width:100%;max-height:500px;object-fit:contain;opacity:0;transition:opacity 0.3s;height:auto;width:auto;">';
                           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');
               });
           });
       });
   }

   // 更加稳健的加载时机控制
   if (window.mw && mw.loader) {
       mw.loader.using(['mediawiki.api', 'mediawiki.jqueryMsg']).then(initSwitcher);
   } else {
       document.addEventListener('DOMContentLoaded', initSwitcher);
   }

})(); </script>