Widget:GameSwitcher：修订间差异

←上一编辑下一编辑→

可视化wikitext

2026年6月20日 (六) 17:01的版本

本Widget为少女前线系列多游戏首页提供切换交互逻辑。不接受参数，直接在首页调用：{{#widget:GFHomepageSwitcher}}

@@ 第6行： / 第6行： @@
    'use strict';
-   function init() {
+  /* 图片文件名对应关系，修改此处即可更换头图 */
-     var tabs = document.querySelectorAll('#gf-homepage .gf-tab');
+  var heroImages = {
-     var heroSlides = document.querySelectorAll('#gf-homepage .gf-hero-slide');
+    'gf':   'index_gf_hero.jpg',
-     var contentPanels = document.querySelectorAll('#gf-homepage .gf-content-panel');
+    'gf2':  'index_gf2_hero.jpg',
+    'gfnc': 'index_gfnc_hero.jpg',
+    'gfb':  'index_gfb_hero.jpg'
+  };
+  function getWikiImageUrl( filename, callback ) {
+    var api = mw.config.get( 'wgScriptPath' ) + '/api.php';
+    fetch( api + '?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 () {} );
+  }
+   function applyFadeColors() {
+    var bg = getComputedStyle( document.documentElement )
+               .getPropertyValue( '--color-surface-0' ).trim()
+             || getComputedStyle( document.documentElement )
+               .getPropertyValue( '--background-color-base' ).trim()
+             || '#1d1e20';
+    var map = {
+      'gf-hero-fade-bottom': 'linear-gradient(to bottom, transparent 0%, ' + bg + ' 100%)',
+      'gf-hero-fade-left':   'linear-gradient(to right, '  + bg + ' 0%, transparent 100%)',
+      'gf-hero-fade-right':  'linear-gradient(to left, '   + bg + ' 0%, transparent 100%)'
+    };
+    Object.keys( map ).forEach( function ( id ) {
+      var el = document.getElementById( id );
+      if ( el ) { el.style.background = map[ id ]; }
+    } );
+  }
+  function switchGame( game ) {
+     var tabs = document.querySelectorAll( '#gf-homepage .gf-tab' );
+     var heroSlides = document.querySelectorAll( '#gf-homepage .gf-hero-slide' );
+     var contentPanels = document.querySelectorAll( '#gf-homepage .gf-content-panel' );
+    tabs.forEach( function ( t ) {
+      var active = t.getAttribute( 'data-game' ) === game;
+      t.classList.toggle( 'active', active );
+      t.setAttribute( 'aria-selected', active ? 'true' : 'false' );
+    } );
+    heroSlides.forEach( function ( s ) {
+      s.classList.toggle( 'active', s.id === 'hero-' + game );
+    } );
-     if (!tabs.length) return;
+     contentPanels.forEach( function ( p ) {
+      p.classList.toggle( 'active', p.id === 'content-' + game );
+    } );
+  }
-    tabs.forEach(function (tab) {
+  function init() {
-      tab.addEventListener('click', function () {
+    var tabs = document.querySelectorAll( '#gf-homepage .gf-tab' );
-        var game = this.getAttribute('data-game');
+    if ( !tabs.length ) { return; }
-        tabs.forEach(function (t) {
+    /* 通过API获取真实图片URL并注入背景 */
-          t.classList.remove('active');
+    Object.keys( heroImages ).forEach( function ( game ) {
-          t.setAttribute('aria-selected', 'false');
+      getWikiImageUrl( heroImages[ game ], function ( url ) {
-         });
+        var el = document.getElementById( 'hero-' + game );
-        this.classList.add('active');
+         if ( el ) {
-         this.setAttribute('aria-selected', 'true');
+          el.style.backgroundImage = 'url("' + url + '")';
+         }
+      } );
+    } );
-        heroSlides.forEach(function (s) {
+    /* 应用渐隐遮罩颜色 */
-          s.classList.remove('active');
+    applyFadeColors();
-          if (s.id === 'hero-' + game) {
-            s.classList.add('active');
-          }
-        });
-        contentPanels.forEach(function (p) {
+    /* 绑定点击事件 */
-          p.classList.remove('active');
+    tabs.forEach( function ( tab ) {
-          if (p.id === 'content-' + game) {
+      tab.addEventListener( 'click', function () {
-            p.classList.add('active');
+        switchGame( this.getAttribute( 'data-game' ) );
-          }
+      } );
-         });
+      /* 键盘支持（Enter / Space） */
-       });
+      tab.addEventListener( 'keydown', function ( e ) {
-     });
+        if ( e.key === 'Enter' || e.key === ' ' ) {
+          e.preventDefault();
+          switchGame( this.getAttribute( 'data-game' ) );
+         }
+       } );
+     } );
    }
-   if (document.readyState === 'loading') {
+   mw.hook( 'wikipage.content' ).add( function () {
-    document.addEventListener('DOMContentLoaded', init);
-  } else {
      init();
-   }
+   } );
-})();
+} )();
 </script></includeonly>