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

<noinclude>
少女前线系列多游戏首页切换Widget。调用方式：<code><nowiki>{{#widget:GameSwitcher}}</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%)';
    }
  }

function moveIndicator( tab ) {
  var indicator = document.getElementById( 'gf-tab-indicator' );
  var switcher  = document.getElementById( 'gf-switcher' );
  if ( !indicator || !switcher ) { return; }
  /* 让switcher作为定位基准 */
  var switcherLeft = switcher.getBoundingClientRect().left;
  var tabLeft      = tab.getBoundingClientRect().left;
  indicator.style.width     = tab.offsetWidth + 'px';
  indicator.style.transform = 'translateX(' + ( tabLeft - switcherLeft ) + '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' );
    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 );
        }
      } );
    } );

    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>