|
|
| 1번째 줄: |
1번째 줄: |
| /**
| |
| * MediaWiki 커스텀 펼치기 / 접기 애니메이션
| |
| *
| |
| * 지원 구조
| |
| *
| |
| * 1. 일반 MediaWiki 구조
| |
| *
| |
| * <div class="mw-customtoggle-XXX mw-customtoggle">
| |
| * [ 펼치기 · 접기 ]
| |
| * </div>
| |
| *
| |
| * <div
| |
| * id="mw-customcollapsible-XXX"
| |
| * class="mw-collapsible mw-collapsed"
| |
| * >
| |
| * <div class="mw-collapsible-content">
| |
| * 내용
| |
| * </div>
| |
| * </div>
| |
| *
| |
| *
| |
| * 2. 동일 ID를 2개 사용하는 전환형 구조
| |
| *
| |
| * <div
| |
| * id="mw-customcollapsible-XXX"
| |
| * class="mw-collapsible"
| |
| * >
| |
| * <div class="mw-customtoggle-XXX mw-customtoggle">
| |
| * [ 버튼 ]
| |
| * </div>
| |
| * </div>
| |
| *
| |
| * <div
| |
| * id="mw-customcollapsible-XXX"
| |
| * class="mw-collapsible mw-collapsed"
| |
| * style="display:none;"
| |
| * >
| |
| * <div class="mw-customtoggle-XXX mw-customtoggle">
| |
| * [ 버튼 ]
| |
| * </div>
| |
| *
| |
| * 실제 내용
| |
| * </div>
| |
| *
| |
| *
| |
| * 3. flex 안에 여러 독립 토글
| |
| *
| |
| * mw-customtoggle-TWICE_KOR
| |
| * mw-customtoggle-TWICE_OVS
| |
| * mw-customtoggle-TWICE_ETC
| |
| * mw-customtoggle-TWICE_REL
| |
| *
| |
| *
| |
| * 애니메이션:
| |
| * 높이만 변경
| |
| * opacity 사용 안 함
| |
| */
| |
|
| |
|
| ( function ( $, mw ) {
| |
| 'use strict';
| |
|
| |
| /**
| |
| * 애니메이션 시간
| |
| */
| |
| var DURATION = 300;
| |
|
| |
| /**
| |
| * jQuery easing
| |
| */
| |
| var EASING = 'swing';
| |
|
| |
| /**
| |
| * jQuery data key
| |
| */
| |
| var DATA_DISPLAY =
| |
| 'mwCustomCollapseDisplay';
| |
|
| |
|
| |
| /**
| |
| * -----------------------------------------------------
| |
| * 토글 클래스에서 식별자 추출
| |
| *
| |
| * mw-customtoggle-Flora_LACTEA_01
| |
| * →
| |
| * Flora_LACTEA_01
| |
| * -----------------------------------------------------
| |
| */
| |
| function getToggleName( toggle ) {
| |
| var prefix =
| |
| 'mw-customtoggle-';
| |
|
| |
| var classes =
| |
| toggle.classList;
| |
|
| |
| var i;
| |
|
| |
|
| |
| for (
| |
| i = 0;
| |
| i < classes.length;
| |
| i++
| |
| ) {
| |
|
| |
| if (
| |
| classes[ i ].indexOf(
| |
| prefix
| |
| ) === 0
| |
| ) {
| |
|
| |
| return classes[ i ].substring(
| |
| prefix.length
| |
| );
| |
| }
| |
| }
| |
|
| |
|
| |
| return null;
| |
| }
| |
|
| |
|
| |
| /**
| |
| * -----------------------------------------------------
| |
| * HTML attribute selector escape
| |
| * -----------------------------------------------------
| |
| */
| |
| function escapeAttribute( value ) {
| |
|
| |
| return String( value )
| |
| .replace(
| |
| /\\/g,
| |
| '\\\\'
| |
| )
| |
| .replace(
| |
| /"/g,
| |
| '\\"'
| |
| );
| |
| }
| |
|
| |
|
| |
| /**
| |
| * -----------------------------------------------------
| |
| * 같은 name에 대응하는 모든 collapsible 가져오기
| |
| *
| |
| * 동일 ID가 여러 개 있어도 모두 반환
| |
| * -----------------------------------------------------
| |
| */
| |
| function getTargets( name ) {
| |
|
| |
| if ( !name ) {
| |
| return [];
| |
| }
| |
|
| |
|
| |
| var id =
| |
| 'mw-customcollapsible-' +
| |
| name;
| |
|
| |
|
| |
| return document.querySelectorAll(
| |
| '[id="' +
| |
| escapeAttribute( id ) +
| |
| '"]'
| |
| );
| |
| }
| |
|
| |
|
| |
| /**
| |
| * -----------------------------------------------------
| |
| * 해당 target의 직계
| |
| * .mw-collapsible-content 찾기
| |
| *
| |
| * querySelector를 바로 사용하지 않는 이유:
| |
| * 안쪽에 중첩된 collapsible이 있을 경우
| |
| * 내부 콘텐츠를 잘못 잡을 수 있음.
| |
| * -----------------------------------------------------
| |
| */
| |
| function getDirectContent( target ) {
| |
|
| |
| var children =
| |
| target.children;
| |
|
| |
| var i;
| |
|
| |
|
| |
| for (
| |
| i = 0;
| |
| i < children.length;
| |
| i++
| |
| ) {
| |
|
| |
| if (
| |
| children[ i ]
| |
| .classList
| |
| .contains(
| |
| 'mw-collapsible-content'
| |
| )
| |
| ) {
| |
|
| |
| return children[ i ];
| |
| }
| |
| }
| |
|
| |
|
| |
| return null;
| |
| }
| |
|
| |
|
| |
| /**
| |
| * -----------------------------------------------------
| |
| * 실제 애니메이션할 요소 결정
| |
| *
| |
| * 일반 MediaWiki:
| |
| * .mw-collapsible-content
| |
| *
| |
| * LACTEA 등의 구조:
| |
| * target 자체
| |
| * -----------------------------------------------------
| |
| */
| |
| function getAnimatedElement( target ) {
| |
|
| |
| var content =
| |
| getDirectContent(
| |
| target
| |
| );
| |
|
| |
|
| |
| if ( content ) {
| |
| return content;
| |
| }
| |
|
| |
|
| |
| return target;
| |
| }
| |
|
| |
|
| |
| /**
| |
| * -----------------------------------------------------
| |
| * 현재 접힌 상태인지 확인
| |
| * -----------------------------------------------------
| |
| */
| |
| function isCollapsed(
| |
| target,
| |
| element
| |
| ) {
| |
|
| |
| /*
| |
| * MediaWiki 상태 클래스 우선
| |
| */
| |
| if (
| |
| target.classList.contains(
| |
| 'mw-collapsed'
| |
| )
| |
| ) {
| |
|
| |
| return true;
| |
| }
| |
|
| |
|
| |
| /*
| |
| * 실제 display:none 여부 확인
| |
| */
| |
| return (
| |
| window
| |
| .getComputedStyle(
| |
| element
| |
| )
| |
| .display === 'none'
| |
| );
| |
| }
| |
|
| |
|
| |
| /**
| |
| * -----------------------------------------------------
| |
| * 현재 display 값 저장
| |
| *
| |
| * inline-block 같은 display를 접었다 다시 펼칠 때
| |
| * 원래 형태를 복구하기 위해 사용
| |
| * -----------------------------------------------------
| |
| */
| |
| function rememberDisplay( element ) {
| |
|
| |
| var display =
| |
| window
| |
| .getComputedStyle(
| |
| element
| |
| )
| |
| .display;
| |
|
| |
|
| |
| if (
| |
| display &&
| |
| display !== 'none'
| |
| ) {
| |
|
| |
| $( element ).data(
| |
| DATA_DISPLAY,
| |
| display
| |
| );
| |
| }
| |
| }
| |
|
| |
|
| |
| /**
| |
| * -----------------------------------------------------
| |
| * 펼칠 때 사용할 display 결정
| |
| * -----------------------------------------------------
| |
| */
| |
| function getOpenDisplay( element ) {
| |
|
| |
| /*
| |
| * 이전에 저장된 display가 있다면 사용
| |
| */
| |
| var stored =
| |
| $( element ).data(
| |
| DATA_DISPLAY
| |
| );
| |
|
| |
|
| |
| if ( stored ) {
| |
| return stored;
| |
| }
| |
|
| |
|
| |
| /*
| |
| * 인라인 스타일에 유효한 display가 남아 있는 경우
| |
| */
| |
| if (
| |
| element.style.display &&
| |
| element.style.display !== 'none'
| |
| ) {
| |
|
| |
| return element.style.display;
| |
| }
| |
|
| |
|
| |
| /*
| |
| * 현재 computed display
| |
| */
| |
| var computed =
| |
| window
| |
| .getComputedStyle(
| |
| element
| |
| )
| |
| .display;
| |
|
| |
|
| |
| if (
| |
| computed &&
| |
| computed !== 'none'
| |
| ) {
| |
|
| |
| return computed;
| |
| }
| |
|
| |
|
| |
| /*
| |
| * 요소별 자연스러운 display
| |
| */
| |
| switch ( element.tagName ) {
| |
|
| |
| case 'TABLE':
| |
| return 'table';
| |
|
| |
| case 'TBODY':
| |
| return 'table-row-group';
| |
|
| |
| case 'THEAD':
| |
| return 'table-header-group';
| |
|
| |
| case 'TFOOT':
| |
| return 'table-footer-group';
| |
|
| |
| case 'TR':
| |
| return 'table-row';
| |
|
| |
| case 'TD':
| |
| case 'TH':
| |
| return 'table-cell';
| |
|
| |
| case 'COLGROUP':
| |
| return 'table-column-group';
| |
|
| |
| case 'COL':
| |
| return 'table-column';
| |
|
| |
| case 'CAPTION':
| |
| return 'table-caption';
| |
|
| |
| case 'LI':
| |
| return 'list-item';
| |
| }
| |
|
| |
|
| |
| /*
| |
| * mw-collapsible 자체가 대상인 경우
| |
| *
| |
| * 폭이 100%면 block,
| |
| * 그렇지 않으면 inline-block을 우선 사용.
| |
| *
| |
| * LACTEA 상단 버튼 영역 같은
| |
| * display:inline-block 구조 대응.
| |
| */
| |
| if (
| |
| element.classList.contains(
| |
| 'mw-collapsible'
| |
| )
| |
| ) {
| |
|
| |
| if (
| |
| element.style.width === '100%' ||
| |
| element.style.width === '100.0%'
| |
| ) {
| |
|
| |
| return 'block';
| |
| }
| |
|
| |
|
| |
| return 'inline-block';
| |
| }
| |
|
| |
|
| |
| return 'block';
| |
| }
| |
|
| |
|
| |
| /**
| |
| * -----------------------------------------------------
| |
| * 같은 name의 모든 토글 ARIA 상태 변경
| |
| * -----------------------------------------------------
| |
| */
| |
| function updateAria(
| |
| name,
| |
| expanded
| |
| ) {
| |
|
| |
| var className =
| |
| 'mw-customtoggle-' +
| |
| name;
| |
|
| |
| var toggles =
| |
| document.getElementsByClassName(
| |
| className
| |
| );
| |
|
| |
| var i;
| |
|
| |
|
| |
| for (
| |
| i = 0;
| |
| i < toggles.length;
| |
| i++
| |
| ) {
| |
|
| |
| toggles[ i ].setAttribute(
| |
| 'aria-expanded',
| |
| expanded ?
| |
| 'true' :
| |
| 'false'
| |
| );
| |
| }
| |
| }
| |
|
| |
|
| |
| /**
| |
| * -----------------------------------------------------
| |
| * 펼치기
| |
| * -----------------------------------------------------
| |
| */
| |
| function expand(
| |
| target,
| |
| element
| |
| ) {
| |
|
| |
| var $element =
| |
| $( element );
| |
|
| |
|
| |
| /*
| |
| * 현재 진행 중인 jQuery animation 중지
| |
| *
| |
| * true = queue 비움
| |
| * false = 현재 애니메이션을 끝까지 강제 적용하지 않음
| |
| */
| |
| $element.stop(
| |
| true,
| |
| false
| |
| );
| |
|
| |
|
| |
| /*
| |
| * MediaWiki 접힘 상태 해제
| |
| */
| |
| target.classList.remove(
| |
| 'mw-collapsed'
| |
| );
| |
|
| |
|
| |
| /**
| |
| * -------------------------------------------------
| |
| * 일반 MediaWiki 구조
| |
| *
| |
| * target
| |
| * └─ .mw-collapsible-content
| |
| * -------------------------------------------------
| |
| */
| |
| if (
| |
| element !== target
| |
| ) {
| |
|
| |
| /*
| |
| * slideDown이 display:none에서
| |
| * 자연스럽게 높이를 계산
| |
| */
| |
| $element
| |
| .stop(
| |
| true,
| |
| false
| |
| )
| |
| .slideDown(
| |
| {
| |
| duration:
| |
| DURATION,
| |
|
| |
| easing:
| |
| EASING,
| |
|
| |
| complete:
| |
| function () {
| |
|
| |
| /*
| |
| * jQuery가 생성한
| |
| * 불필요한 height/overflow 제거
| |
| */
| |
| $element.css(
| |
| {
| |
| height:
| |
| '',
| |
|
| |
| overflow:
| |
| ''
| |
| }
| |
| );
| |
| }
| |
| }
| |
| );
| |
|
| |
|
| |
| return;
| |
| }
| |
|
| |
|
| |
| /**
| |
| * -------------------------------------------------
| |
| * target 자체가 display:none 되는 구조
| |
| *
| |
| * LACTEA 등의 구조
| |
| * -------------------------------------------------
| |
| */
| |
|
| |
| var display =
| |
| getOpenDisplay(
| |
| element
| |
| );
| |
|
| |
|
| |
| /*
| |
| * 먼저 보이는 상태로 복구
| |
| */
| |
| $element.css(
| |
| {
| |
| display:
| |
| display,
| |
|
| |
| height:
| |
| 'auto',
| |
|
| |
| overflow:
| |
| 'hidden'
| |
| }
| |
| );
| |
|
| |
|
| |
| /*
| |
| * 실제 최종 높이 측정
| |
| */
| |
| var targetHeight =
| |
| element.scrollHeight;
| |
|
| |
|
| |
| /*
| |
| * 0 높이에서 시작
| |
| */
| |
| $element.css(
| |
| {
| |
| height:
| |
| '0px'
| |
| }
| |
| );
| |
|
| |
|
| |
| /*
| |
| * 강제 reflow
| |
| */
| |
| void element.offsetHeight;
| |
|
| |
|
| |
| /*
| |
| * 높이만 애니메이션
| |
| */
| |
| $element.animate(
| |
| {
| |
| height:
| |
| targetHeight
| |
| },
| |
| {
| |
| duration:
| |
| DURATION,
| |
|
| |
| easing:
| |
| EASING,
| |
|
| |
| complete:
| |
| function () {
| |
|
| |
| /*
| |
| * 최종적으로 내용 높이에
| |
| * 자동 대응하도록 height 제거
| |
| */
| |
| $element.css(
| |
| {
| |
| height:
| |
| '',
| |
|
| |
| overflow:
| |
| ''
| |
| }
| |
| );
| |
| }
| |
| }
| |
| );
| |
| }
| |
|
| |
|
| |
| /**
| |
| * -----------------------------------------------------
| |
| * 접기
| |
| * -----------------------------------------------------
| |
| */
| |
| function collapse(
| |
| target,
| |
| element
| |
| ) {
| |
|
| |
| var $element =
| |
| $( element );
| |
|
| |
|
| |
| $element.stop(
| |
| true,
| |
| false
| |
| );
| |
|
| |
|
| |
| /*
| |
| * display:none으로 만들기 전에
| |
| * 현재 display 기억
| |
| */
| |
| rememberDisplay(
| |
| element
| |
| );
| |
|
| |
|
| |
| /**
| |
| * -------------------------------------------------
| |
| * 일반 MediaWiki 구조
| |
| * -------------------------------------------------
| |
| */
| |
| if (
| |
| element !== target
| |
| ) {
| |
|
| |
| $element.slideUp(
| |
| {
| |
| duration:
| |
| DURATION,
| |
|
| |
| easing:
| |
| EASING,
| |
|
| |
| complete:
| |
| function () {
| |
|
| |
| target.classList.add(
| |
| 'mw-collapsed'
| |
| );
| |
|
| |
|
| |
| $element.css(
| |
| {
| |
| height:
| |
| '',
| |
|
| |
| overflow:
| |
| ''
| |
| }
| |
| );
| |
| }
| |
| }
| |
| );
| |
|
| |
|
| |
| return;
| |
| }
| |
|
| |
|
| |
| /**
| |
| * -------------------------------------------------
| |
| * target 자체가 접히는 구조
| |
| * -------------------------------------------------
| |
| */
| |
|
| |
| var startHeight =
| |
| element
| |
| .getBoundingClientRect()
| |
| .height;
| |
|
| |
|
| |
| /*
| |
| * 시작 높이를 고정
| |
| */
| |
| $element.css(
| |
| {
| |
| height:
| |
| startHeight + 'px',
| |
|
| |
| overflow:
| |
| 'hidden'
| |
| }
| |
| );
| |
|
| |
|
| |
| void element.offsetHeight;
| |
|
| |
|
| |
| /*
| |
| * 현재 높이 → 0
| |
| */
| |
| $element.animate(
| |
| {
| |
| height:
| |
| 0
| |
| },
| |
| {
| |
| duration:
| |
| DURATION,
| |
|
| |
| easing:
| |
| EASING,
| |
|
| |
| complete:
| |
| function () {
| |
|
| |
| /*
| |
| * 완전히 접힌 뒤 상태 반영
| |
| */
| |
| target.classList.add(
| |
| 'mw-collapsed'
| |
| );
| |
|
| |
|
| |
| $element.css(
| |
| {
| |
| display:
| |
| 'none',
| |
|
| |
| height:
| |
| '',
| |
|
| |
| overflow:
| |
| ''
| |
| }
| |
| );
| |
| }
| |
| }
| |
| );
| |
| }
| |
|
| |
|
| |
| /**
| |
| * -----------------------------------------------------
| |
| * 대상 하나 토글
| |
| * -----------------------------------------------------
| |
| */
| |
| function toggleTarget(
| |
| target
| |
| ) {
| |
|
| |
| var element =
| |
| getAnimatedElement(
| |
| target
| |
| );
| |
|
| |
|
| |
| if (
| |
| isCollapsed(
| |
| target,
| |
| element
| |
| )
| |
| ) {
| |
|
| |
| expand(
| |
| target,
| |
| element
| |
| );
| |
|
| |
| return true;
| |
| }
| |
|
| |
|
| |
| collapse(
| |
| target,
| |
| element
| |
| );
| |
|
| |
|
| |
| return false;
| |
| }
| |
|
| |
|
| |
| /**
| |
| * -----------------------------------------------------
| |
| * 그룹 토글
| |
| *
| |
| * 동일한 XXX를 가진 target이 여러 개면
| |
| * 각각 현재 상태의 반대로 변경.
| |
| *
| |
| * 예:
| |
| *
| |
| * LACTEA
| |
| *
| |
| * 첫 번째:
| |
| * 버튼만 표시
| |
| *
| |
| * 두 번째:
| |
| * 실제 내용, display:none
| |
| *
| |
| * 클릭하면
| |
| *
| |
| * 첫 번째 → 닫힘
| |
| * 두 번째 → 펼침
| |
| *
| |
| * 따라서 버튼이 중복 표시되지 않음.
| |
| * -----------------------------------------------------
| |
| */
| |
| function toggleGroup(
| |
| toggle
| |
| ) {
| |
|
| |
| var name =
| |
| getToggleName(
| |
| toggle
| |
| );
| |
|
| |
|
| |
| if ( !name ) {
| |
| return false;
| |
| }
| |
|
| |
|
| |
| var targets =
| |
| getTargets(
| |
| name
| |
| );
| |
|
| |
|
| |
| if (
| |
| !targets ||
| |
| !targets.length
| |
| ) {
| |
|
| |
| return false;
| |
| }
| |
|
| |
|
| |
| var i;
| |
|
| |
| var openedAny =
| |
| false;
| |
|
| |
|
| |
| for (
| |
| i = 0;
| |
| i < targets.length;
| |
| i++
| |
| ) {
| |
|
| |
| var target =
| |
| targets[ i ];
| |
|
| |
| var element =
| |
| getAnimatedElement(
| |
| target
| |
| );
| |
|
| |
| var collapsed =
| |
| isCollapsed(
| |
| target,
| |
| element
| |
| );
| |
|
| |
|
| |
| if ( collapsed ) {
| |
|
| |
| expand(
| |
| target,
| |
| element
| |
| );
| |
|
| |
| openedAny =
| |
| true;
| |
|
| |
| } else {
| |
|
| |
| collapse(
| |
| target,
| |
| element
| |
| );
| |
| }
| |
| }
| |
|
| |
|
| |
| /*
| |
| * 대상이 하나뿐인 일반 구조에서는
| |
| * ARIA를 정상적으로 갱신.
| |
| *
| |
| * 동일 ID가 2개인 교대형 구조는
| |
| * 두 요소의 상태가 서로 반대이므로
| |
| * 클릭된 그룹 기준으로 처리.
| |
| */
| |
| if (
| |
| targets.length === 1
| |
| ) {
| |
|
| |
| updateAria(
| |
| name,
| |
| openedAny
| |
| );
| |
| }
| |
|
| |
|
| |
| return true;
| |
| }
| |
|
| |
|
| |
| /**
| |
| * -----------------------------------------------------
| |
| * 클릭 처리
| |
| *
| |
| * capture=true로
| |
| * MediaWiki jquery.makeCollapsible보다
| |
| * 먼저 이벤트를 처리.
| |
| * -----------------------------------------------------
| |
| */
| |
| document.addEventListener(
| |
| 'click',
| |
| function ( event ) {
| |
|
| |
| var toggle =
| |
| event.target.closest(
| |
| '.mw-customtoggle'
| |
| );
| |
|
| |
|
| |
| if ( !toggle ) {
| |
| return;
| |
| }
| |
|
| |
|
| |
| /*
| |
| * 우리가 처리하는 customtoggle인지 확인
| |
| */
| |
| if (
| |
| !getToggleName(
| |
| toggle
| |
| )
| |
| ) {
| |
|
| |
| return;
| |
| }
| |
|
| |
|
| |
| /*
| |
| * MediaWiki 기본 토글 동작 중지
| |
| */
| |
| event.preventDefault();
| |
|
| |
| event.stopPropagation();
| |
|
| |
| event.stopImmediatePropagation();
| |
|
| |
|
| |
| toggleGroup(
| |
| toggle
| |
| );
| |
| },
| |
| true
| |
| );
| |
|
| |
|
| |
| /**
| |
| * -----------------------------------------------------
| |
| * 키보드
| |
| *
| |
| * Enter / Space
| |
| * -----------------------------------------------------
| |
| */
| |
| document.addEventListener(
| |
| 'keydown',
| |
| function ( event ) {
| |
|
| |
| if (
| |
| event.key !== 'Enter' &&
| |
| event.key !== ' '
| |
| ) {
| |
|
| |
| return;
| |
| }
| |
|
| |
|
| |
| var toggle =
| |
| event.target.closest(
| |
| '.mw-customtoggle'
| |
| );
| |
|
| |
|
| |
| if ( !toggle ) {
| |
| return;
| |
| }
| |
|
| |
|
| |
| if (
| |
| !getToggleName(
| |
| toggle
| |
| )
| |
| ) {
| |
|
| |
| return;
| |
| }
| |
|
| |
|
| |
| event.preventDefault();
| |
|
| |
| event.stopPropagation();
| |
|
| |
| event.stopImmediatePropagation();
| |
|
| |
|
| |
| toggleGroup(
| |
| toggle
| |
| );
| |
| },
| |
| true
| |
| );
| |
|
| |
|
| |
| /**
| |
| * -----------------------------------------------------
| |
| * 초기 display 상태 기억
| |
| *
| |
| * 페이지 처음 로딩됐을 때 현재 보이는
| |
| * mw-collapsible의 display 값을 저장.
| |
| *
| |
| * 예:
| |
| * display:inline-block
| |
| *
| |
| * 나중에 접었다 펼쳐도
| |
| * inline-block으로 정확히 복원.
| |
| * -----------------------------------------------------
| |
| */
| |
| function initializeDisplays(
| |
| root
| |
| ) {
| |
|
| |
| var collapsibles =
| |
| root.querySelectorAll(
| |
| '.mw-collapsible'
| |
| );
| |
|
| |
| var i;
| |
|
| |
|
| |
| for (
| |
| i = 0;
| |
| i < collapsibles.length;
| |
| i++
| |
| ) {
| |
|
| |
| var element =
| |
| collapsibles[ i ];
| |
|
| |
| var display =
| |
| window
| |
| .getComputedStyle(
| |
| element
| |
| )
| |
| .display;
| |
|
| |
|
| |
| if (
| |
| display &&
| |
| display !== 'none'
| |
| ) {
| |
|
| |
| $( element ).data(
| |
| DATA_DISPLAY,
| |
| display
| |
| );
| |
| }
| |
| }
| |
| }
| |
|
| |
|
| |
| /**
| |
| * -----------------------------------------------------
| |
| * 최초 로딩
| |
| * -----------------------------------------------------
| |
| */
| |
| $( function () {
| |
|
| |
| initializeDisplays(
| |
| document
| |
| );
| |
|
| |
| } );
| |
|
| |
|
| |
| /**
| |
| * -----------------------------------------------------
| |
| * MediaWiki 동적 콘텐츠 대응
| |
| *
| |
| * Lua / AJAX / 확장기능 등으로
| |
| * 나중에 추가된 콘텐츠의 display도 저장.
| |
| * -----------------------------------------------------
| |
| */
| |
| if (
| |
| mw &&
| |
| mw.hook
| |
| ) {
| |
|
| |
| mw.hook(
| |
| 'wikipage.content'
| |
| ).add(
| |
| function ( $content ) {
| |
|
| |
| if (
| |
| $content &&
| |
| $content[ 0 ]
| |
| ) {
| |
|
| |
| initializeDisplays(
| |
| $content[ 0 ]
| |
| );
| |
| }
| |
| }
| |
| );
| |
| }
| |
|
| |
|
| |
| }( jQuery, mediaWiki ) );
| |