미디어위키:Gadget-Vector-2022-sidebar-left.js
둘러보기로 이동
검색으로 이동
참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
/* 모바일 환경에서 사이드바는 기본적으로 접기 상태 */
(function vectorIgnoreSidebarVisState() {
// 출처: 벡터 스킨 코드 (resources/skins.vector.js/sidebar.js)
function updateAriaExpanded(checkbox, button) {
button.setAttribute('aria-expanded', checkbox.checked.toString());
}
// 출처: 벡터 스킨 코드 (mediawiki.page.ready/checkboxHack.js)
function setCheckedState(checkbox, checked) {
var e;
checkbox.checked = checked;
if (typeof Event === 'function') {
e = new Event('input',{
bubbles: true,
composed: true
});
} else {
e = document.createEvent('CustomEvent');
if (!e) {
return;
}
e.initCustomEvent('input', true, false, false);
}
checkbox.dispatchEvent(e);
}
var button = document.getElementById('mw-sidebar-button');
var checkbox = document.getElementById('mw-sidebar-checkbox');
var mobile = matchMedia('screen and (max-width: 799px)');
var state = checkbox.checked;
mobile.addEventListener('change', function(media) {
if(media.matches) {
state = checkbox.checked; // 데스크탑 환경의 펼친 상태 저장
setCheckedState(checkbox, false); // 화면이 작아지면 접기
} else setCheckedState(checkbox, checkbox.checked || state); // 데스크탑 환경의 펼친 상태 복원 (단, 모바일에서 펼쳐져 있으면 펼친 상태 유지 및 저장)
});
if(mobile.matches) setCheckedState(checkbox, false); // 펼쳐진 채로 저장되어도 모바일에서는 무조건 접은 상태로 로드
checkbox.addEventListener('input', function(event) {
if(mobile.matches) {
event.stopImmediatePropagation(); // 모바일에서 펼친 상태 저장 안함
updateAriaExpanded(checkbox, button); // ARIA 업데이트는 실행
}
});
})();
/* 사이드바 자동 접기 */
$(function vectorAutohideSidebar() {
var mobile = matchMedia('screen and (max-width: 799px)');
$('.mw-page-container-inner').click(function(event) {
if(mobile.matches && $(event.target).closest('#mw-sidebar-checkbox:checked ~ :not(.vector-sidebar-container):not(.mw-header), #mw-sidebar-checkbox:checked ~ .mw-header > :not(.mw-header-aside)').length) {
event.preventDefault();
event.stopImmediatePropagation();
document.querySelector('#mw-sidebar-checkbox').checked = false;
}
});
});