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 = | var scriptPath = ( document.querySelector( 'meta[name="generator"]' ) || {} ).content || ''; | ||
fetch( | 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 | var style = getComputedStyle( document.documentElement ); | ||
var bg = style.getPropertyValue( '--color-surface-0' ).trim() | |||
|| style.getPropertyValue( '--background-color-base' ).trim() | |||
|| '#1d1e20'; | |||
var defs = { | |||
var | |||
'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( | Object.keys( defs ).forEach( function ( id ) { | ||
var el = document.getElementById( id ); | var el = document.getElementById( id ); | ||
if ( el ) { el.style.background = | if ( el ) { el.style.background = defs[ id ]; } | ||
} ); | } ); | ||
} | } | ||
function switchGame( game ) { | 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' ); | |||
var | |||
t.classList.toggle( 'active', | |||
t.setAttribute( 'aria-selected', | |||
} ); | } ); | ||
document.querySelectorAll( '#gf-homepage .gf-hero-slide' ).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 ) { | |||
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; } | ||
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 + '")'; } | ||
} ); | } ); | ||
} ); | } ); | ||
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' ) ); | ||
} ); | } ); | ||
tab.addEventListener( 'keydown', function ( e ) { | tab.addEventListener( 'keydown', function ( e ) { | ||
if ( e.key === 'Enter' || e.key === ' ' ) { | if ( e.key === 'Enter' || e.key === ' ' ) { | ||
| 第98行: | 第96行: | ||
} | } | ||
if ( document.readyState === 'loading' ) { | |||
document.addEventListener( 'DOMContentLoaded', init ); | |||
} else { | |||
init(); | init(); | ||
} | } | ||
} )(); | } )(); | ||
</script></includeonly> | </script></includeonly> | ||
2026年6月20日 (六) 17:04的版本
本Widget为少女前线系列多游戏首页提供切换交互逻辑。
不接受参数,直接在首页调用:{{#widget:GFHomepageSwitcher}}