미디어위키:Common.js: 두 판 사이의 차이

2026년 7월 14일 (화) 20:43 기준 최신판

/* 대문 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();
		}
	}
} );