打开/关闭搜索
打开/关闭菜单
26
6679
46
1.2万
OGAS数据中枢
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

Widget:GameSwitcher：修订间差异

来自OGAS数据中枢
更多操作
←上一编辑
弃权者​（留言 | 贡献）
界面管理员、​管理员
3,317次编辑
可视化wikitext
弃权者​（留言 | 贡献）
界面管理员、​管理员
3,317次编辑
无编辑摘要
弃权者​（留言 | 贡献）
界面管理员、​管理员
3,317次编辑
无编辑摘要
标签：手工回退
 
（未显示同一用户的10个中间版本）
第1行： 第1行：
<noinclude>
<noinclude>
本Widget为少女前线系列多游戏首页提供切换交互逻辑。
少女前线系列多游戏首页切换Widget。调用方式：<code><nowiki>{{#widget:GameSwitcher}}</nowiki></code>
不接受参数，直接在首页调用：<code><nowiki>{{#widget:GFHomepageSwitcher}}</nowiki></code>
</noinclude><includeonly><script>
</noinclude><includeonly><script>
(function () {
( function () {
   'use strict';
   'use strict';


  /* 图片文件名对应关系，修改此处即可更换头图 */
   var heroImages = {
   var heroImages = {
     'gf':  'index_gf_hero.jpg',
     'gf':  'index_gf_hero.jpg',
第13行： 第11行：
     'gfb':  'index_gfb_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 ) {
   function getWikiImageUrl( filename, callback ) {
     var api = mw.config.get( 'wgScriptPath' ) + '/api.php';
     fetch( getApiBase() + '?action=query&titles=File:' + encodeURIComponent( filename ) +
    fetch( api + '?action=query&titles=File:' + encodeURIComponent( filename ) +
           '&prop=imageinfo&iiprop=url&format=json&origin=*' )
           '&prop=imageinfo&iiprop=url&format=json&origin=*' )
       .then( function ( r ) { return r.json(); } )
       .then( function ( r ) { return r.json(); } )
       .then( function ( data ) {
       .then( function ( data ) {
         var pages = data.query.pages;
         var pages = data.query.pages;
         var page = pages[ Object.keys( pages )[ 0 ] ];
         var page = pages[ Object.keys( pages )[ 0 ] ];
         if ( page.imageinfo && page.imageinfo[ 0 ] ) {
         if ( page.imageinfo && page.imageinfo[ 0 ] ) {
           callback( page.imageinfo[ 0 ].url );
           callback( page.imageinfo[ 0 ].url );
         }
         }
       } )
       } )
       .catch( function () {} );
       .catch( function ( e ) { console.warn( 'GameSwitcher: 图片加载失败', filename, e ); } );
   }
   }


   function applyFadeColors() {
   function applyFadeColor() {
     var bg = getComputedStyle( document.documentElement )
     var style = getComputedStyle( document.documentElement );
              .getPropertyValue( '--color-surface-0' ).trim()
    var bg = style.getPropertyValue( '--color-surface-0' ).trim()
            || getComputedStyle( document.documentElement )
          || style.getPropertyValue( '--background-color-base' ).trim()
              .getPropertyValue( '--background-color-base' ).trim()
          || '#1d1e20';
            || '#1d1e20';
     var el = document.getElementById( 'gf-hero-fade-bottom' );
     var map = {
    if ( el ) {
      'gf-hero-fade-bottom': 'linear-gradient(to bottom, transparent 0%, ' + bg + ' 100%)',
       el.style.background = '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 ) {
function moveIndicator( tab ) {
     var tabs = document.querySelectorAll( '#gf-homepage .gf-tab' );
  var indicator = document.getElementById( 'gf-tab-indicator' );
     var heroSlides = document.querySelectorAll( '#gf-homepage .gf-hero-slide' );
  if ( !indicator ) { return; }
     var contentPanels = document.querySelectorAll( '#gf-homepage .gf-content-panel' );
  indicator.style.width    = tab.offsetWidth + 'px';
  indicator.style.transform = 'translateX(' + tab.offsetLeft + '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 ) {
     tabs.forEach( function ( t ) {
       var active = t.getAttribute( 'data-game' ) === game;
       var on = t.getAttribute( 'data-game' ) === game;
       t.classList.toggle( 'active', active );
       t.classList.toggle( 'active', on );
       t.setAttribute( 'aria-selected', active ? 'true' : 'false' );
       t.setAttribute( 'aria-selected', on ? 'true' : 'false' );
     } );
     } );
    if ( tabEl ) { moveIndicator( tabEl ); }


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


     contentPanels.forEach( function ( p ) {
     currentGame = game;
       p.classList.toggle( 'active', p.id === 'content-' + 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 );
   }
   }


第70行： 第121行：
     if ( !tabs.length ) { return; }
     if ( !tabs.length ) { return; }


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


     /* 应用渐隐遮罩颜色 */
     applyFadeColor();
     applyFadeColors();
 
     var firstActive = document.querySelector( '#gf-homepage .gf-tab.active' );
    if ( firstActive ) {
      setTimeout( function () { moveIndicator( firstActive ); }, 50 );
    }


    /* 绑定点击事件 */
     tabs.forEach( function ( tab ) {
     tabs.forEach( function ( tab ) {
       tab.addEventListener( 'click', function () {
       tab.addEventListener( 'click', function () {
         switchGame( this.getAttribute( 'data-game' ) );
         switchGame( this.getAttribute( 'data-game' ), this );
       } );
       } );
      /* 键盘支持（Enter / Space） */
       tab.addEventListener( 'keydown', function ( e ) {
       tab.addEventListener( 'keydown', function ( e ) {
         if ( e.key === 'Enter' || e.key === ' ' ) {
         if ( e.key === 'Enter' || e.key === ' ' ) {
           e.preventDefault();
           e.preventDefault();
           switchGame( this.getAttribute( 'data-game' ) );
           switchGame( this.getAttribute( 'data-game' ), this );
         }
         }
       } );
       } );
    } );
    window.addEventListener( 'resize', function () {
      var active = document.querySelector( '#gf-homepage .gf-tab.active' );
      if ( active ) { moveIndicator( active ); }
     } );
     } );
   }
   }


   mw.hook( 'wikipage.content' ).add( function () {
   if ( document.readyState === 'loading' ) {
    document.addEventListener( 'DOMContentLoaded', init );
  } else {
     init();
     init();
   } );
   }


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

2026年6月20日 (六) 23:23的最新版本

少女前线系列多游戏首页切换Widget。调用方式：{{#widget:GameSwitcher}}

检索自“https://gf-ogas.wiki/index.php?title=Widget:GameSwitcher&oldid=18933”
最后修改时间
此页面最后编辑于2026年6月20日 (星期六) 23:23。
著作权
OGAS数据中枢是由《少女前线》系列作品爱好者创建的非官方网站。
网站内涉及的商标、游戏素材、剧情文本等，其版权均属于散爆网络。
除非另有声明，本网站其他内容采用知识共享署名-非商业性使用-相同方式共享授权。