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

           if (viewBtn) {
               viewBtn.onclick = function(e) {
                   e.stopPropagation();
                   var activeBtn = box.querySelector('.gf-switch-btn.active');
                   if (activeBtn) {
                       var filename = activeBtn.dataset.filename;
                       var isDmg = activeBtn.dataset.state === 'damage';
                       var target = isDmg ? filename.substring(0, filename.lastIndexOf('.')) + '_D' + filename.substring(filename.lastIndexOf('.')) : filename;
                       window.open(mw.config.get('wgArticlePath').replace('$1', 'File:' + target), '_blank');
                   }
               };
           }

           container.onclick = function() {
               var img = container.querySelector('img');
               var activeBtn = box.querySelector('.gf-switch-btn.active');
               if (!img || !activeBtn) return;
               var base = activeBtn.dataset.filename;
               var isDmg = activeBtn.dataset.state === 'damage';
               var target = isDmg ? base : base.substring(0, base.lastIndexOf('.')) + '_D' + base.substring(base.lastIndexOf('.'));
               
               container.classList.add('loading');
               getImgPath(target, img.src, function(url) {
                   if (url) {
                       var t = new Image();
                       t.onload = function() { 
                           img.src = url; 
                           activeBtn.dataset.state = isDmg ? 'normal' : 'damage'; 
                           container.classList.remove('loading'); 
                       };
                       t.onerror = function() { container.classList.remove('loading'); };
                       t.src = url;
                   } else container.classList.remove('loading');
               });
           };

           btns.forEach(function (btn) {
               btn.onclick = 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) {
                           setTimeout(function () {

container.innerHTML = '

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

';

                               container.appendChild(viewBtn);
                               var n = container.querySelector('img');
                               n.onload = function () { n.style.opacity = '1'; };
                               if (n.complete) n.style.opacity = '1';
                           }, 150);
                       }
                   });
                   btns.forEach(function (b) { b.classList.remove('active'); });
                   btn.classList.add('active');
               };
           });
       });
   }

   var r = 0;
   var c = setInterval(function() {
       r++;
       if (window.mw && mw.Api && mw.loader && mw.loader.using) {
           clearInterval(c);
           mw.loader.using(['mediawiki.api']).then(initSwitcher);
       } else if (r > 60) { clearInterval(c); if (window.jQuery) initSwitcher(); }
   }, 100);

})(); </script>