查看“︁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 scriptPath = ( document.querySelector( 'meta[name="generator"]' ) || {} ).content || '';
    var origin = window.location.origin;
    var base = origin + '/api.php';

    /* 尝试从页面link标签或wgScriptPath推断api路径 */
    var canonical = document.querySelector( 'link[rel="canonical"]' );
    if ( canonical ) {
      var match = canonical.href.match( /^(https?:\/\/[^\/]+(?:\/[^\/]+)*?)\/wiki\// );
      if ( match ) {
        base = match[ 1 ] + '/api.php';
      }
    }

    fetch( base + '?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( 'GFWiki: 图片加载失败', filename, e ); } );
  }

  function applyFadeColors() {
    var style = getComputedStyle( document.documentElement );
    var bg = style.getPropertyValue( '--color-surface-0' ).trim()
          || style.getPropertyValue( '--background-color-base' ).trim()
          || '#1d1e20';
    var defs = {
      '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( defs ).forEach( function ( id ) {
      var el = document.getElementById( id );
      if ( el ) { el.style.background = defs[ id ]; }
    } );
  }

  function switchGame( game ) {
    document.querySelectorAll( '#gf-homepage .gf-tab' ).forEach( function ( t ) {
      var on = t.getAttribute( 'data-game' ) === game;
      t.classList.toggle( 'active', on );
      t.setAttribute( 'aria-selected', on ? 'true' : 'false' );
    } );
    document.querySelectorAll( '#gf-homepage .gf-hero-slide' ).forEach( function ( s ) {
      s.classList.toggle( 'active', s.id === 'hero-' + game );
    } );
    document.querySelectorAll( '#gf-homepage .gf-content-panel' ).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; }

    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' ) );
      } );
      tab.addEventListener( 'keydown', function ( e ) {
        if ( e.key === 'Enter' || e.key === ' ' ) {
          e.preventDefault();
          switchGame( this.getAttribute( 'data-game' ) );
        }
      } );
    } );
  }

  if ( document.readyState === 'loading' ) {
    document.addEventListener( 'DOMContentLoaded', init );
  } else {
    init();
  }

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