查看“︁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 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%)';
    }
  }

  /* 滑动指示器：根据当前active tab的位置和宽度移动 */
  function moveIndicator( tab ) {
    var indicator = document.getElementById( 'gf-tab-indicator' );
    var switcher = document.getElementById( 'gf-switcher' );
    if ( !indicator || !switcher ) { return; }
    var switcherRect = switcher.getBoundingClientRect();
    var tabRect = tab.getBoundingClientRect();
    indicator.style.width = tabRect.width + 'px';
    indicator.style.transform = 'translateX(' + ( tabRect.left - switcherRect.left ) + 'px)';
  }

  var currentGame = 'gf';
  var switching = false;

  function switchGame( game, tabEl ) {
    if ( game === currentGame || switching ) { return; }
    switching = true;

    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 );

    /* 先把新slide的fg重置为缩放状态，让Ken Burns重新触发 */
    if ( inSlide ) {
      var inFg = inSlide.querySelector( '.gf-hero-fg' );
      if ( inFg ) {
        inFg.style.transition = 'none';
        inFg.style.transform = window.innerWidth > 1200
          ? 'translateX(-50%) scale(1.06)'
          : 'scale(1.06)';
        void inFg.offsetWidth;
        inFg.style.transition = '';
      }
    }

    /* 交叉淡入淡出 */
    if ( inSlide ) {
      inSlide.style.zIndex = '1';
      inSlide.classList.add( 'active' );
    }
    if ( outSlide ) {
      outSlide.style.zIndex = '0';
      outSlide.classList.remove( 'active' );
    }

    /* 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 ); }

    /* 内容面板 */
    panels.forEach( function ( p ) {
      p.classList.toggle( 'active', p.id === 'content-' + game );
    } );

    setTimeout( function () {
      slides.forEach( function ( s ) {
        s.style.zIndex = '';
      } );
      currentGame = game;
      switching = false;
    }, 720 );
  }

  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 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; }
      } );
    } );

    applyFadeColor();

    /* 初始化指示器位置 */
    var firstActive = document.querySelector( '#gf-homepage .gf-tab.active' );
    if ( firstActive ) {
      /* 等布局稳定后再计算 */
      setTimeout( function () { moveIndicator( firstActive ); }, 50 );
    }

    tabs.forEach( function ( tab ) {
      tab.addEventListener( 'click', function () {
        switchGame( this.getAttribute( 'data-game' ), this );
      } );
      tab.addEventListener( 'keydown', function ( e ) {
        if ( e.key === 'Enter' || e.key === ' ' ) {
          e.preventDefault();
          switchGame( this.getAttribute( 'data-game' ), this );
        }
      } );
    } );

    /* 窗口resize时重新定位指示器 */
    window.addEventListener( 'resize', function () {
      var active = document.querySelector( '#gf-homepage .gf-tab.active' );
      if ( active ) { moveIndicator( active ); }
    } );
  }

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

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