미디어위키:Common.js
외관
참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
/* 대문 mainsection 그리드 등급 탭 필터링 */
$( function () {
var tabLists = document.querySelectorAll( '.mainsection-tabs' );
for ( var i = 0; i < tabLists.length; i++ ) {
var tabs = tabLists[ i ];
if ( !tabs.children.length ) {
continue;
}
var box = tabs.closest( '.mainsection-box' );
if ( !box ) {
continue;
}
var items = tabs.querySelectorAll( 'li' );
items.forEach( function ( li ) {
li.addEventListener( 'click', function () {
items.forEach( function ( other ) {
other.classList.remove( 'active' );
} );
li.classList.add( 'active' );
var rarity = li.getAttribute( 'data-rarity' );
var slots = box.querySelectorAll( '.mainsection-slot[data-rarity]' );
slots.forEach( function ( slot ) {
if ( rarity === 'all' || slot.getAttribute( 'data-rarity' ) === rarity ) {
slot.style.display = '';
} else {
slot.style.display = 'none';
}
} );
} );
} );
}
// 스킬 그리드 호버 툴팁(레퍼런스 사이트 스타일)
var skillSlots = document.querySelectorAll( '.mainsection-slot-skill' );
skillSlots.forEach( function ( slot ) {
var tooltip = slot.querySelector( '.skill-tooltip' );
if ( !tooltip ) {
return;
}
slot.addEventListener( 'mouseenter', function () {
tooltip.style.display = 'block';
var rect = slot.getBoundingClientRect();
var top = rect.bottom + 8;
var left = rect.left + rect.width / 2 - tooltip.offsetWidth / 2;
var maxLeft = window.innerWidth - tooltip.offsetWidth - 8;
if ( left > maxLeft ) {
left = maxLeft;
}
if ( left < 8 ) {
left = 8;
}
if ( top + tooltip.offsetHeight > window.innerHeight - 8 ) {
top = rect.top - tooltip.offsetHeight - 8;
}
tooltip.style.top = top + 'px';
tooltip.style.left = left + 'px';
} );
slot.addEventListener( 'mouseleave', function () {
tooltip.style.display = 'none';
} );
} );
} );
/* === 사이트 전역 상단 네비게이션 바 (Common.js 주입) === */
$( function () {
if ( document.querySelector( '.lang-topnav' ) ) {
return;
}
var articlePath = mw.config.get( 'wgArticlePath' );
function pageUrl( title, hash ) {
var encoded = encodeURIComponent( title.replace( / /g, '_' ) ).replace( /%3A/gi, ':' );
return articlePath.replace( '$1', encoded ) + ( hash ? '#' + hash : '' );
}
// 대문 섹션 헤더에 앵커 id 부여 (영웅/장비/기술 메뉴 딥링크용)
var sectionIds = {
'영웅 백과사전': 'lang-sec-hero',
'최신 장비': 'lang-sec-equip',
'최신 기술': 'lang-sec-skill'
};
document.querySelectorAll( '.mainsection-header' ).forEach( function ( h ) {
var id = sectionIds[ h.textContent.trim() ];
if ( id && !document.getElementById( id ) ) {
h.id = id;
}
} );
var menu = [
{ label: '대문', href: pageUrl( '대문' ) },
{ label: '영웅', href: pageUrl( '대문', 'lang-sec-hero' ) },
{ label: '장비', href: pageUrl( '대문', 'lang-sec-equip' ) },
{ label: '기술', href: pageUrl( '대문', 'lang-sec-skill' ) },
{ label: '병종 상성', href: pageUrl( '랑그리사:병종 상성' ) }
];
var nav = document.createElement( 'div' );
nav.className = 'lang-topnav';
var logo = document.createElement( 'a' );
logo.className = 'lang-topnav-logo';
logo.href = pageUrl( '대문' );
logo.innerHTML = '<span class="lang-topnav-title">랑그리사 위키</span>' +
'<span class="lang-topnav-sub">Langrisser Wiki</span>';
nav.appendChild( logo );
var ul = document.createElement( 'ul' );
ul.className = 'lang-topnav-menu';
menu.forEach( function ( item ) {
var li = document.createElement( 'li' );
var a = document.createElement( 'a' );
a.href = item.href;
a.textContent = item.label;
li.appendChild( a );
ul.appendChild( li );
} );
nav.appendChild( ul );
document.body.insertBefore( nav, document.body.firstChild );
// 다른 페이지에서 앵커 링크로 진입한 경우: id 부여가 로드 이후라 브라우저 기본
// 스크롤이 실패했을 수 있으므로 직접 스크롤해 준다.
if ( /^#lang-sec-/.test( location.hash ) ) {
var target = document.getElementById( location.hash.slice( 1 ) );
if ( target ) {
target.scrollIntoView();
}
}
} );