Widget:GameSwitcher：修订间差异

←上一编辑

可视化wikitext

2026年6月20日 (六) 23:23的最新版本

少女前线系列多游戏首页切换Widget。调用方式：{{#widget:GameSwitcher}}

@@ 第1行： / 第1行： @@
 <noinclude>
-本Widget为少女前线系列多游戏首页提供切换交互逻辑。
+少女前线系列多游戏首页切换Widget。调用方式：<code><nowiki>{{#widget:GameSwitcher}}</nowiki></code>
-不接受参数，直接在首页调用：<code><nowiki>{{#widget:GFHomepageSwitcher}}</nowiki></code>
+</noinclude><includeonly><script>
-</noinclude><onlyinclude><script>
+( function () {
-(function () {
    'use strict';
+  var heroImages = {
+    'gf':   'index_gf_hero.jpg',
+    'gf2':  'index_gf2_hero.jpg',
+    'gfnc': 'index_gfnc_hero.jpg',
+    'gfb':  'index_gfb_hero.jpg'
+  };
+  function getApiBase() {
+    var canonical = document.querySelector( 'link[rel="canonical"]' );
+    if ( canonical ) {
+      var m = canonical.href.match( /^(https?:\/\/[^\/]+(?:\/[^\/]+)*?)\/wiki\// );
+      if ( m ) { return m[ 1 ] + '/api.php'; }
+    }
+    return window.location.origin + '/api.php';
+  }
+  function getWikiImageUrl( filename, callback ) {
+    fetch( getApiBase() + '?action=query&titles=File:' + encodeURIComponent( filename ) +
+           '&prop=imageinfo&iiprop=url&format=json&origin=*' )
+      .then( function ( r ) { return r.json(); } )
+      .then( function ( data ) {
+        var pages = data.query.pages;
+        var page = pages[ Object.keys( pages )[ 0 ] ];
+        if ( page.imageinfo && page.imageinfo[ 0 ] ) {
+          callback( page.imageinfo[ 0 ].url );
+        }
+      } )
+      .catch( function ( e ) { console.warn( 'GameSwitcher: 图片加载失败', filename, e ); } );
+  }
+  function applyFadeColor() {
+    var style = getComputedStyle( document.documentElement );
+    var bg = style.getPropertyValue( '--color-surface-0' ).trim()
+          || style.getPropertyValue( '--background-color-base' ).trim()
+          || '#1d1e20';
+    var el = document.getElementById( 'gf-hero-fade-bottom' );
+    if ( el ) {
+      el.style.background = 'linear-gradient(to bottom, transparent 0%, ' + bg + ' 100%)';
+    }
+  }
+function moveIndicator( tab ) {
+  var indicator = document.getElementById( 'gf-tab-indicator' );
+  if ( !indicator ) { return; }
+  indicator.style.width     = tab.offsetWidth + 'px';
+  indicator.style.transform = 'translateX(' + tab.offsetLeft + 'px)';
+}
+  var currentGame = 'gf';
+  var switching   = false;
+  var pending     = null;
+  function doSwitch( game, tabEl ) {
+    var slides = document.querySelectorAll( '#gf-homepage .gf-hero-slide' );
+    var panels = document.querySelectorAll( '#gf-homepage .gf-content-panel' );
+    var tabs   = document.querySelectorAll( '#gf-homepage .gf-tab' );
+    var outSlide = document.getElementById( 'hero-' + currentGame );
+    var inSlide  = document.getElementById( 'hero-' + game );
+    if ( inSlide ) {
+      inSlide.style.zIndex = '1';
+      inSlide.classList.add( 'active' );
+    }
+    if ( outSlide ) {
+      outSlide.style.zIndex = '0';
+      outSlide.classList.remove( 'active' );
+    }
+    tabs.forEach( function ( t ) {
+      var on = t.getAttribute( 'data-game' ) === game;
+      t.classList.toggle( 'active', on );
+      t.setAttribute( 'aria-selected', on ? 'true' : 'false' );
+    } );
+    if ( tabEl ) { moveIndicator( tabEl ); }
+    panels.forEach( function ( p ) {
+      p.classList.toggle( 'active', p.id === 'content-' + game );
+    } );
+    currentGame = game;
+    switching   = true;
+    setTimeout( function () {
+      slides.forEach( function ( s ) { s.style.zIndex = ''; } );
+      switching = false;
+      if ( pending && pending.game !== currentGame ) {
+        var p = pending;
+        pending = null;
+        doSwitch( p.game, p.tabEl );
+      } else {
+        pending = null;
+      }
+    }, 520 );
+  }
+  function switchGame( game, tabEl ) {
+    if ( game === currentGame ) { return; }
+    if ( switching ) {
+      pending = { game: game, tabEl: tabEl };
+      var tabs = document.querySelectorAll( '#gf-homepage .gf-tab' );
+      tabs.forEach( function ( t ) {
+        var on = t.getAttribute( 'data-game' ) === game;
+        t.classList.toggle( 'active', on );
+        t.setAttribute( 'aria-selected', on ? 'true' : 'false' );
+      } );
+      if ( tabEl ) { moveIndicator( tabEl ); }
+      return;
+    }
+    doSwitch( game, tabEl );
+  }
    function init() {
-     var tabs = document.querySelectorAll('#gf-homepage .gf-tab');
+     var tabs = document.querySelectorAll( '#gf-homepage .gf-tab' );
-     var heroSlides = document.querySelectorAll('#gf-homepage .gf-hero-slide');
+     if ( !tabs.length ) { return; }
-    var contentPanels = document.querySelectorAll('#gf-homepage .gf-content-panel');
-     if (!tabs.length) return;
+     Object.keys( heroImages ).forEach( function ( game ) {
+      getWikiImageUrl( heroImages[ game ], function ( url ) {
+        var bg  = document.getElementById( 'hero-' + game + '-bg' );
+        var fg  = document.getElementById( 'hero-' + game + '-fg' );
+        var val = 'url("' + url + '")';
+        if ( bg ) { bg.style.backgroundImage = val; }
+        if ( fg ) { fg.style.backgroundImage = val; }
+      } );
+    } );
-     tabs.forEach(function (tab) {
+     applyFadeColor();
-      tab.addEventListener('click', function () {
-        var game = this.getAttribute('data-game');
-        tabs.forEach(function (t) {
+    var firstActive = document.querySelector( '#gf-homepage .gf-tab.active' );
-          t.classList.remove('active');
+    if ( firstActive ) {
-          t.setAttribute('aria-selected', 'false');
+      setTimeout( function () { moveIndicator( firstActive ); }, 50 );
-        });
+    }
-        this.classList.add('active');
-        this.setAttribute('aria-selected', 'true');
-        heroSlides.forEach(function (s) {
+    tabs.forEach( function ( tab ) {
-          s.classList.remove('active');
+      tab.addEventListener( 'click', function () {
-          if (s.id === 'hero-' + game) {
+        switchGame( this.getAttribute( 'data-game' ), this );
-            s.classList.add('active');
+      } );
-          }
+      tab.addEventListener( 'keydown', function ( e ) {
-        });
+        if ( e.key === 'Enter' || e.key === ' ' ) {
+          e.preventDefault();
+          switchGame( this.getAttribute( 'data-game' ), this );
+        }
+      } );
+    } );
-        contentPanels.forEach(function (p) {
+    window.addEventListener( 'resize', function () {
-          p.classList.remove('active');
+      var active = document.querySelector( '#gf-homepage .gf-tab.active' );
-          if (p.id === 'content-' + game) {
+      if ( active ) { moveIndicator( active ); }
-            p.classList.add('active');
+     } );
-          }
-        });
-      });
-     });
    }
-   if (document.readyState === 'loading') {
+   if ( document.readyState === 'loading' ) {
-     document.addEventListener('DOMContentLoaded', init);
+     document.addEventListener( 'DOMContentLoaded', init );
    } else {
      init();
    }
-})();
-</script></onlyinclude>
+} )();
+</script></includeonly>