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

Widget:GameSwitcher:修订间差异

来自OGAS数据中枢
弃权者留言 | 贡献
无编辑摘要
弃权者留言 | 贡献
无编辑摘要
第6行: 第6行:
   'use strict';
   'use strict';


  /* 图片文件名对应关系,修改此处即可更换头图 */
   var heroImages = {
   var heroImages = {
     'gf':  'index_gf_hero.jpg',
     'gf':  'index_gf_hero.jpg',
第15行: 第14行:


   function getWikiImageUrl( filename, callback ) {
   function getWikiImageUrl( filename, callback ) {
     var api = mw.config.get( 'wgScriptPath' ) + '/api.php';
     var scriptPath = ( document.querySelector( 'meta[name="generator"]' ) || {} ).content || '';
     fetch( api + '?action=query&titles=File:' + encodeURIComponent( filename ) +
    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=*' )
           '&prop=imageinfo&iiprop=url&format=json&origin=*' )
       .then( function ( r ) { return r.json(); } )
       .then( function ( r ) { return r.json(); } )
第26行: 第37行:
         }
         }
       } )
       } )
       .catch( function () {} );
       .catch( function ( e ) { console.warn( 'GFWiki: 图片加载失败', filename, e ); } );
   }
   }


   function applyFadeColors() {
   function applyFadeColors() {
     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 defs = {
     var map = {
       'gf-hero-fade-bottom': 'linear-gradient(to bottom, transparent 0%, ' + bg + ' 100%)',
       '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-left':  'linear-gradient(to right, '  + bg + ' 0%, transparent 100%)',
       'gf-hero-fade-right':  'linear-gradient(to left, '  + bg + ' 0%, transparent 100%)'
       'gf-hero-fade-right':  'linear-gradient(to left, '  + bg + ' 0%, transparent 100%)'
     };
     };
     Object.keys( map ).forEach( function ( id ) {
     Object.keys( defs ).forEach( function ( id ) {
       var el = document.getElementById( id );
       var el = document.getElementById( id );
       if ( el ) { el.style.background = map[ id ]; }
       if ( el ) { el.style.background = defs[ id ]; }
     } );
     } );
   }
   }


   function switchGame( game ) {
   function switchGame( game ) {
     var tabs = document.querySelectorAll( '#gf-homepage .gf-tab' );
     document.querySelectorAll( '#gf-homepage .gf-tab' ).forEach( function ( t ) {
    var heroSlides = document.querySelectorAll( '#gf-homepage .gf-hero-slide' );
       var on = t.getAttribute( 'data-game' ) === game;
    var contentPanels = document.querySelectorAll( '#gf-homepage .gf-content-panel' );
       t.classList.toggle( 'active', on );
 
       t.setAttribute( 'aria-selected', on ? 'true' : 'false' );
    tabs.forEach( function ( t ) {
       var active = t.getAttribute( 'data-game' ) === game;
       t.classList.toggle( 'active', active );
       t.setAttribute( 'aria-selected', active ? 'true' : 'false' );
     } );
     } );
 
     document.querySelectorAll( '#gf-homepage .gf-hero-slide' ).forEach( function ( s ) {
     heroSlides.forEach( function ( s ) {
       s.classList.toggle( 'active', s.id === 'hero-' + game );
       s.classList.toggle( 'active', s.id === 'hero-' + game );
     } );
     } );
 
     document.querySelectorAll( '#gf-homepage .gf-content-panel' ).forEach( function ( p ) {
     contentPanels.forEach( function ( p ) {
       p.classList.toggle( 'active', p.id === 'content-' + game );
       p.classList.toggle( 'active', p.id === 'content-' + game );
     } );
     } );
第70行: 第74行:
     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 el = document.getElementById( 'hero-' + game );
         if ( el ) {
         if ( el ) { el.style.backgroundImage = 'url("' + url + '")'; }
          el.style.backgroundImage = 'url("' + url + '")';
        }
       } );
       } );
     } );
     } );


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


    /* 绑定点击事件 */
     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' ) );
       } );
       } );
      /* 键盘支持(Enter / Space) */
       tab.addEventListener( 'keydown', function ( e ) {
       tab.addEventListener( 'keydown', function ( e ) {
         if ( e.key === 'Enter' || e.key === ' ' ) {
         if ( e.key === 'Enter' || e.key === ' ' ) {
第98行: 第96行:
   }
   }


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


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

2026年6月20日 (六) 17:04的版本

本Widget为少女前线系列多游戏首页提供切换交互逻辑。 不接受参数,直接在首页调用:{{#widget:GFHomepageSwitcher}}