미디어위키:Gadget-Vector.js: 두 판 사이의 차이

식물 vs 좀비 위키
← 이전 편집다음 편집 →
Brokey (토론 | 기여)
사무관, 인터페이스 관리자, 관리자
428 편집
Brokey (토론)의 459 판 편집을 되돌림
태그: 편집 취소 되돌려진 기여
편집 요약 없음
태그: 수동 되돌리기
354번째 줄: 354번째 줄:
var SEARCH_DOWN_OFFSET = 5;
var SEARCH_DOWN_OFFSET = 5;
var CONTENT_TOP = 24;
var CONTENT_TOP = 24;
var MAX_BACKGROUND_SHIFT = 72;
var touchStartY = null;
var backgroundShift = 0;
var resetTimer = 0;


function syncV35Layout() {
function getCactionsParts() {
var menu = document.getElementById('p-cactions');
 
if (!menu) {
return null;
}
 
return {
menu: menu,
label:
document.getElementById('p-cactions-label') ||
menu.querySelector(
'label, .vector-menu-heading, button'
),
checkbox:
menu.querySelector(
'input.vector-menu-checkbox, input[type="checkbox"]'
),
content: menu.querySelector('.vector-menu-content')
};
}
 
function setCactionsOpen(open) {
var parts = getCactionsParts();
 
if (!parts) {
return;
}
 
parts.menu.classList.toggle('pvz-cactions-open', open);
parts.menu.classList.toggle(
'vector-menu-dropdown-active',
open
);
 
if (parts.checkbox) {
parts.checkbox.checked = open;
}
 
if (parts.label) {
parts.label.setAttribute(
'aria-expanded',
open ? 'true' : 'false'
);
}
 
if (parts.content) {
parts.content.setAttribute(
'aria-hidden',
open ? 'false' : 'true'
);
}
}
 
function handleCactionsClick(event) {
var parts = getCactionsParts();
var label;
 
if (!parts) {
return;
}
 
label = event.target.closest('#p-cactions-label');
 
if (label) {
event.preventDefault();
event.stopImmediatePropagation();
 
setCactionsOpen(
!parts.menu.classList.contains(
'pvz-cactions-open'
)
);
return;
}
 
if (
parts.menu.classList.contains('pvz-cactions-open') &&
!event.target.closest('#p-cactions')
) {
setCactionsOpen(false);
}
}
 
function clampBackgroundShift(value) {
return Math.max(
-MAX_BACKGROUND_SHIFT,
Math.min(MAX_BACKGROUND_SHIFT, value)
);
}
 
function setBackgroundShift(value, resetting) {
var root = document.documentElement;
 
backgroundShift = clampBackgroundShift(value);
 
root.classList.toggle(
'pvz-background-resetting',
!!resetting
);
 
root.style.setProperty(
'--pvz-background-overscroll-y',
backgroundShift + 'px'
);
}
 
function resetBackgroundShift() {
window.clearTimeout(resetTimer);
setBackgroundShift(0, true);
 
resetTimer = window.setTimeout(function () {
document.documentElement.classList.remove(
'pvz-background-resetting'
);
}, 200);
}
 
function handleTouchStart(event) {
if (event.touches.length !== 1) {
touchStartY = null;
return;
}
 
window.clearTimeout(resetTimer);
document.documentElement.classList.remove(
'pvz-background-resetting'
);
 
touchStartY = event.touches[0].clientY;
}
 
function handleTouchMove(event) {
var currentY;
var delta;
var root;
var scrollTop;
var maxScrollTop;
var atTop;
var atBottom;
 
if (
touchStartY === null ||
event.touches.length !== 1
) {
return;
}
 
currentY = event.touches[0].clientY;
delta = currentY - touchStartY;
root = document.documentElement;
scrollTop = Math.max(
window.scrollY,
root.scrollTop,
document.body.scrollTop
);
maxScrollTop = Math.max(
0,
root.scrollHeight - window.innerHeight
);
atTop = scrollTop <= 0;
atBottom = scrollTop >= maxScrollTop - 1;
 
if (atTop && delta > 0) {
setBackgroundShift(delta * 0.42, false);
return;
}
 
if (atBottom && delta < 0) {
setBackgroundShift(delta * 0.42, false);
return;
}
 
if (backgroundShift !== 0) {
setBackgroundShift(0, false);
}
}
 
function handleTouchEnd() {
touchStartY = null;
 
if (backgroundShift !== 0) {
resetBackgroundShift();
}
}
 
function syncV39Layout() {
var content = document.querySelector('#content');
var content = document.querySelector('#content');
var leftNavigation = document.getElementById('left-navigation');
var leftNavigation = document.getElementById('left-navigation');
477번째 줄: 667번째 줄:
}
}


function initV35Layout() {
function initV39Interface() {
var observer;
var observer;
var parts = getCactionsParts();
if (parts) {
setCactionsOpen(
!!(
parts.checkbox &&
parts.checkbox.checked
)
);
}
syncV39Layout();
document.addEventListener(
'click',
handleCactionsClick,
true
);
document.addEventListener(
'touchstart',
handleTouchStart,
{ passive: true }
);
document.addEventListener(
'touchmove',
handleTouchMove,
{ passive: true }
);
document.addEventListener(
'touchend',
handleTouchEnd,
{ passive: true }
);


syncV35Layout();
document.addEventListener(
'touchcancel',
handleTouchEnd,
{ passive: true }
);


window.addEventListener(
window.addEventListener(
'resize',
'resize',
syncV35Layout,
syncV39Layout,
{ passive: true }
{ passive: true }
);
);
490번째 줄: 720번째 줄:
window.addEventListener(
window.addEventListener(
'orientationchange',
'orientationchange',
syncV35Layout,
syncV39Layout,
{ passive: true }
{ passive: true }
);
);


observer = new MutationObserver(function () {
observer = new MutationObserver(function () {
window.requestAnimationFrame(syncV35Layout);
window.requestAnimationFrame(syncV39Layout);
});
});


507번째 줄: 737번째 줄:
document.addEventListener(
document.addEventListener(
'DOMContentLoaded',
'DOMContentLoaded',
initV35Layout,
initV39Interface,
{ once: true }
{ once: true }
);
);
} else {
} else {
initV35Layout();
initV39Interface();
}
}
}());
}());
원본 주소 "https://pvzkrwiki.com/wiki/미디어위키:Gadget-Vector.js"