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

식물 vs 좀비 위키
← 이전 편집다음 편집 →
Brokey (토론 | 기여)
사무관, 인터페이스 관리자, 관리자
428 편집
편집 요약 없음
태그: 수동 되돌리기
편집 요약 없음
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 getCactionsParts() {
function getCactionsParts() {
370번째 줄: 366번째 줄:
label:
label:
document.getElementById('p-cactions-label') ||
document.getElementById('p-cactions-label') ||
menu.querySelector(
menu.querySelector('.vector-menu-heading'),
'label, .vector-menu-heading, button'
checkbox: menu.querySelector(
),
'input.vector-menu-checkbox, input[type="checkbox"]'
checkbox:
),
menu.querySelector(
'input.vector-menu-checkbox, input[type="checkbox"]'
),
content: menu.querySelector('.vector-menu-content')
content: menu.querySelector('.vector-menu-content')
};
};
389번째 줄: 382번째 줄:


parts.menu.classList.toggle('pvz-cactions-open', open);
parts.menu.classList.toggle('pvz-cactions-open', open);
parts.menu.classList.toggle(
'vector-menu-dropdown-active',
open
);


if (parts.checkbox) {
if (parts.checkbox) {
421번째 줄: 410번째 줄:
}
}


label = event.target.closest('#p-cactions-label');
label = event.target.closest(
'#p-cactions-label, #p-cactions > .vector-menu-heading'
);


if (label) {
if (label) {
428번째 줄: 419번째 줄:


setCactionsOpen(
setCactionsOpen(
!parts.menu.classList.contains(
!parts.menu.classList.contains('pvz-cactions-open')
'pvz-cactions-open'
)
);
);
return;
return;
443번째 줄: 432번째 줄:
}
}


function clampBackgroundShift(value) {
function syncV35Layout() {
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');
667번째 줄: 554번째 줄:
}
}


function initV39Interface() {
function initV35Layout() {
var observer;
var observer;
var parts = getCactionsParts();
if (parts) {
setCactionsOpen(
!!(
parts.checkbox &&
parts.checkbox.checked
)
);
}


syncV39Layout();
setCactionsOpen(false);
syncV35Layout();


document.addEventListener(
document.addEventListener(
686번째 줄: 564번째 줄:
handleCactionsClick,
handleCactionsClick,
true
true
);
document.addEventListener(
'touchstart',
handleTouchStart,
{ passive: true }
);
document.addEventListener(
'touchmove',
handleTouchMove,
{ passive: true }
);
document.addEventListener(
'touchend',
handleTouchEnd,
{ passive: true }
);
document.addEventListener(
'touchcancel',
handleTouchEnd,
{ passive: true }
);
);


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


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


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