查看“︁Widget:GameSwitcher”︁的源代码

<noinclude>
本Widget为少女前线系列多游戏首页提供切换交互逻辑。
不接受参数，直接在首页调用：<code><nowiki>{{#widget:GFHomepageSwitcher}}</nowiki></code>
</noinclude><includeonly><script>
(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 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 );
    } );

    contentPanels.forEach( function ( p ) {
      p.classList.toggle( 'active', p.id === 'content-' + game );
    } );
  }

  function init() {
    var tabs = document.querySelectorAll( '#gf-homepage .gf-tab' );
    if ( !tabs.length ) { return; }

    /* 通过API获取真实图片URL并注入背景 */
    Object.keys( heroImages ).forEach( function ( game ) {
      getWikiImageUrl( heroImages[ game ], function ( url ) {
        var el = document.getElementById( 'hero-' + game );
        if ( el ) {
          el.style.backgroundImage = 'url("' + url + '")';
        }
      } );
    } );

    /* 应用渐隐遮罩颜色 */
    applyFadeColors();

    /* 绑定点击事件 */
    tabs.forEach( function ( tab ) {
      tab.addEventListener( 'click', function () {
        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' ) );
        }
      } );
    } );
  }

  mw.hook( 'wikipage.content' ).add( function () {
    init();
  } );

} )();
</script></includeonly>