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

편집 요약 없음
편집 요약 없음
1번째 줄: 1번째 줄:
/* 이 자바스크립트 설정은 리버티 스킨을 사용하는 사용자에게 적용됩니다 */
/* 이 자바스크립트 설정은 리버티 스킨을 사용하는 사용자에게 적용됩니다 */
// 화면 크기가 변경될 때마다 실행되는 함수
document.addEventListener('DOMContentLoaded', function() {
function adjustLayout() {
  // 화면 크기가 1022.4px 이하일 때 순서 변경 함수
  const header = document.querySelector('.liberty-content-header');
  function changeOrder() {
  const title = document.querySelector('.liberty-content-header .title');
    const wrapper = document.querySelector('.liberty-content-header');
  const contentTools = document.querySelector('.liberty-content-header .content-tools');
    const alertNotice = document.querySelector('.alert.alert-dismissible.fade.in.alert-info.liberty-notice');
  const contentSub = document.querySelector('.liberty-content-header .contentSub');
    const contentTools = document.querySelector('.content-tools');
    const title = document.querySelector('.title');
    const contentSub = document.querySelector('.contentSub');


  // 조건이 맞는지 확인
    // 화면 너비가 1022.4px 이하일 때
  if (!header || !title || !contentTools || !contentSub) return;
    if (window.innerWidth <= 1022.4) {
 
      // alertNotice → title → contentTools → contentSub 순으로 변경
  if (window.innerWidth <= 1022.4) {
      wrapper.appendChild(alertNotice); // 이미 있기 때문에 위치 변경
    // 화면 크기가 1022.4px 이하일 경우, title → content-tools → contentSub 순으로 배치
       wrapper.appendChild(title);       // title을 contentTools 앞에 위치시킴
    if (header.firstChild !== title) {
       wrapper.appendChild(contentTools); // contentTools를 title 뒤로 위치시킴
      // 순서를 변경
       wrapper.appendChild(contentSub);  // contentSub는 그대로
       header.appendChild(title);       // title을 첫 번째로 배치
     } else {
       header.appendChild(contentTools); // content-tools를 두 번째로 배치
      // 1022.4px 이상일 때 순서 변경
       header.appendChild(contentSub);  // contentSub를 세 번째로 배치
      wrapper.appendChild(alertNotice)// alertNotice는 첫 번째
     }
       wrapper.appendChild(contentTools);  // contentTools는 두 번째
  } else {
       wrapper.appendChild(title);         // title은 세 번째
    // 화면 크기가 1022.4px 이상일 경우, 원래 순서로 복원
       wrapper.appendChild(contentSub);   // contentSub는 네 번째
    if (header.firstChild !== contentTools) {
      // 원래 순서대로 복원
       header.prepend(contentTools);  // content-tools을 첫 번째로 배치
       header.appendChild(title);     // title을 두 번째로 배치
       header.appendChild(contentSub); // contentSub를 세 번째로 배치
     }
     }
   }
   }
}


// 페이지 로드 시와 창 크기 변경 시 실행
  // 화면 크기 변경 시마다 순서 업데이트
window.addEventListener('load', adjustLayout);
  window.addEventListener('resize', function() {
window.addEventListener('resize', adjustLayout);
    changeOrder();
requestAnimationFrame(updateOrder);
  });
 
  // 초기 로딩 시 순서 변경
  changeOrder();
});


// "mw-redirectedfrom" 클래스를 가진 요소 찾기
// "mw-redirectedfrom" 클래스를 가진 요소 찾기

2024년 12월 9일 (월) 18:53 판

/* 이 자바스크립트 설정은 리버티 스킨을 사용하는 사용자에게 적용됩니다 */
document.addEventListener('DOMContentLoaded', function() {
  // 화면 크기가 1022.4px 이하일 때 순서 변경 함수
  function changeOrder() {
    const wrapper = document.querySelector('.liberty-content-header');
    const alertNotice = document.querySelector('.alert.alert-dismissible.fade.in.alert-info.liberty-notice');
    const contentTools = document.querySelector('.content-tools');
    const title = document.querySelector('.title');
    const contentSub = document.querySelector('.contentSub');

    // 화면 너비가 1022.4px 이하일 때
    if (window.innerWidth <= 1022.4) {
      // alertNotice → title → contentTools → contentSub 순으로 변경
      wrapper.appendChild(alertNotice); // 이미 있기 때문에 위치 변경
      wrapper.appendChild(title);       // title을 contentTools 앞에 위치시킴
      wrapper.appendChild(contentTools); // contentTools를 title 뒤로 위치시킴
      wrapper.appendChild(contentSub);   // contentSub는 그대로
    } else {
      // 1022.4px 이상일 때 순서 변경
      wrapper.appendChild(alertNotice);   // alertNotice는 첫 번째
      wrapper.appendChild(contentTools);  // contentTools는 두 번째
      wrapper.appendChild(title);         // title은 세 번째
      wrapper.appendChild(contentSub);    // contentSub는 네 번째
    }
  }

  // 화면 크기 변경 시마다 순서 업데이트
  window.addEventListener('resize', function() {
    changeOrder();
  });

  // 초기 로딩 시 순서 변경
  changeOrder();
});

// "mw-redirectedfrom" 클래스를 가진 요소 찾기
const redirectedFromElement = document.querySelector('.mw-redirectedfrom');

// 해당 요소가 존재하면
if (redirectedFromElement) {
  // 텍스트에서 괄호와 괄호 안의 내용을 제거하고 남은 부분만 수정
  redirectedFromElement.innerHTML = redirectedFromElement.innerHTML.replace(/[()]/g, '').trim();
}