미디어위키:Collapsible-animation.js

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

• 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
• 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
• 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.

mw.hook('wikipage.content').add(function() {

  // --- 초기 상태 설정 ---
  document.querySelectorAll('.mw-collapsible .mw-collapsible-content').forEach(function(content) {
      content.style.opacity = 1;
      content.style.maxHeight = content.scrollHeight + 'px';
  });

  document.querySelectorAll('.mw-collapsible.mw-collapsed .mw-collapsible-content').forEach(function(content) {
      content.style.display = 'none';
      content.style.opacity = 0;
      content.style.maxHeight = 0;
  });

  // --- 클릭 이벤트 설정 ---
  document.querySelectorAll('.mw-collapsible-toggle').forEach(function(toggle) {
    if (toggle.dataset.customToggleApplied) return;
    toggle.dataset.customToggleApplied = 'true';
    
    // 토글 영역 위에 올려진 링크를 클릭할 때 토글까지 반응하지 않도록
    toggle.querySelectorAll('a').forEach(function(link) {
	    link.addEventListener('click', function(event) {
	      event.stopPropagation();
	    });
	});
	
	// 기본 이벤트 비활성화
    toggle.addEventListener('click', function(e) {
      e.stopPropagation();
      e.stopImmediatePropagation();

      const container = this.closest('.mw-collapsible');
      const icon = container.querySelector('.mw-ui-icon-wikimedia-collapse');
      const content = container.querySelector('.mw-collapsible-content');

      if (!container || !content) return;
      const isCollapsed = container.classList.contains('mw-collapsed');

      if (isCollapsed) {
	    container.classList.remove('mw-collapsed');
	    content.style.display = 'block';
	    const scrollHeight = content.scrollHeight;
	
	    requestAnimationFrame(function() {
	      content.style.opacity = '1';
	      content.style.maxHeight = scrollHeight + 'px';
	       icon.style.transform = 'none';
	    });
      } 
      else {
        content.style.opacity = '0';
        
        content.style.maxHeight = content.scrollHeight + 'px';
        
        requestAnimationFrame(function() {
          content.style.maxHeight = '0';
          icon.style.transform = 'rotate(180deg)';
        });
        
        content.addEventListener('transitionend', function() {
          content.style.display = 'none';
          container.classList.add('mw-collapsed');
        }, { once: true });
      }
    });
  });
});