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

편집 요약 없음
편집 요약 없음
5번째 줄: 5번째 줄:
   const contentTools = document.querySelector('.liberty-content-header .content-tools');
   const contentTools = document.querySelector('.liberty-content-header .content-tools');
   const contentSub = document.querySelector('.liberty-content-header .contentSub');
   const contentSub = document.querySelector('.liberty-content-header .contentSub');
 
 
   if (window.innerWidth <= 1022.4) {
   if (window.innerWidth <= 1022.4) {
     // 화면 크기가 1022.4px 이하일 경우, title, content-tools, contentSub 순으로 배치
     // 화면 크기가 1022.4px 이하일 경우, title, content-tools, contentSub 순으로 배치
     if (title && contentTools && contentSub) {
     if (title && contentTools && contentSub) {
       const parent = title.parentNode;
       const parent = title.parentNode;
 
     
       // 순서가 이미 바뀌어 있는지 확인하여 중복 실행 방지
       // 순서가 이미 바뀌어 있는지 확인하여 중복 실행 방지
       if (parent.firstChild !== title) {
       if (parent.firstChild !== title) {
         parent.appendChild(title); // title을 첫 번째로 배치
        // title을 먼저, content-tools를 두 번째, contentSub를 세 번째로 배치
         parent.appendChild(contentTools); // content-tools를 두 번째로 배치
         parent.appendChild(title);       // title을 먼저 배치
         parent.appendChild(contentSub); // contentSub를 세 번째로 배치
         parent.appendChild(contentTools); // content-tools를 두 번째로 배치
         parent.appendChild(contentSub);   // contentSub를 세 번째로 배치
       }
       }
     }
     }
22번째 줄: 23번째 줄:
     const libertyContentHeader = document.querySelector('.liberty-content-header');
     const libertyContentHeader = document.querySelector('.liberty-content-header');
     if (libertyContentHeader && title && contentTools && contentSub) {
     if (libertyContentHeader && title && contentTools && contentSub) {
       libertyContentHeader.prepend(title);  // title을 처음으로 복원
       // 원래 순서대로 복원: content-tools → title → contentSub
       libertyContentHeader.append(contentTools); // content-tools을 그 다음에 배치
       libertyContentHeader.prepend(contentTools); // content-tools을 첫 번째로 배치
       libertyContentHeader.append(contentSub); // contentSub를 그 다음에 배치
       libertyContentHeader.append(title);         // title을 두 번째로 배치
    }
      libertyContentHeader.appen
  }
}
 
// 페이지 로드 시와 창 크기 변경 시 실행
window.addEventListener('load', adjustLayout);
window.addEventListener('resize', adjustLayout);

2024년 12월 9일 (월) 17:56 판

/* 이 자바스크립트 설정은 리버티 스킨을 사용하는 사용자에게 적용됩니다 */
// 화면 크기가 변경될 때마다 실행되는 함수
function adjustLayout() {
  const title = document.querySelector('.liberty-content-header .title');
  const contentTools = document.querySelector('.liberty-content-header .content-tools');
  const contentSub = document.querySelector('.liberty-content-header .contentSub');
  
  if (window.innerWidth <= 1022.4) {
    // 화면 크기가 1022.4px 이하일 경우, title, content-tools, contentSub 순으로 배치
    if (title && contentTools && contentSub) {
      const parent = title.parentNode;
      
      // 순서가 이미 바뀌어 있는지 확인하여 중복 실행 방지
      if (parent.firstChild !== title) {
        // title을 먼저, content-tools를 두 번째, contentSub를 세 번째로 배치
        parent.appendChild(title);        // title을 먼저 배치
        parent.appendChild(contentTools); // content-tools를 두 번째로 배치
        parent.appendChild(contentSub);   // contentSub를 세 번째로 배치
      }
    }
  } else {
    // 화면 크기가 1022.4px 이상일 경우, 원래의 순서로 복원
    const libertyContentHeader = document.querySelector('.liberty-content-header');
    if (libertyContentHeader && title && contentTools && contentSub) {
      // 원래 순서대로 복원: content-tools → title → contentSub
      libertyContentHeader.prepend(contentTools); // content-tools을 첫 번째로 배치
      libertyContentHeader.append(title);         // title을 두 번째로 배치
      libertyContentHeader.appen