미디어위키: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';
		} );
	} );
} );