Widget:GF立绘切换

<script> (function () {

   function initSwitcher() {
       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');
               });
           }

           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 normalSrc = activeBtn.dataset.src;
               var damageSrc = activeBtn.dataset.damage;

               // 如果没有重创图路径（比如filepath解析失败），则不执行
               if (!damageSrc || damageSrc.indexOf('http') === -1 && damageSrc.indexOf('/') !== 0) return;

               var isCurrentDamage = img.src === damageSrc;
               var targetSrc = isCurrentDamage ? normalSrc : damageSrc;

               container.classList.add('loading');
               var tempImg = new Image();
               tempImg.onload = function() {
                   img.src = targetSrc;
                   container.classList.remove('loading');
               };
               tempImg.src = targetSrc;
           });

           // 按钮切换逻辑
           btns.forEach(function (btn) {
               btn.addEventListener('click', function (e) {
                   e.stopPropagation();
                   if (btn.classList.contains('active')) return;

                   var src = btn.dataset.src;
                   if (!src) return;

                   var oldImg = container.querySelector('img');
                   if (oldImg) oldImg.style.opacity = '0';

                   setTimeout(function () {
                       container.innerHTML = '<img src="' + src + '" 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 (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', initSwitcher);
   } else {
       initSwitcher();
   }

   if (window.mw) {
       mw.hook('wikipage.content').add(initSwitcher);
   }

})(); </script>