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

식물 vs 좀비 위키
← 이전 편집다음 편집 →
Brokey (토론 | 기여)
사무관, 인터페이스 관리자, 관리자
428 편집
편집 요약 없음
편집 요약 없음
350번째 줄: 350번째 줄:
'use strict';
'use strict';


function syncRightNavigation() {
var ACTION_OFFSET = 230;
var content = document.querySelector('#content');
var SEARCH_GAP = 15;
var navigation = document.getElementById('right-navigation');
var SEARCH_WIDTH = 175;
var views;
var actions;
var rightGap;
 
if (!content || !navigation) {
return;
}
 
rightGap = Math.max(
0,
window.innerWidth - content.getBoundingClientRect().right
);
 
document.documentElement.style.setProperty(
'--pvz-content-right-gap',
rightGap + 'px'
);
 
navigation.style.setProperty('position', 'absolute', 'important');
navigation.style.setProperty('top', '30px', 'important');
navigation.style.setProperty('right', rightGap + 'px', 'important');
navigation.style.setProperty('left', 'auto', 'important');
navigation.style.setProperty('display', 'flex', 'important');
navigation.style.setProperty('justify-content', 'flex-end', 'important');
navigation.style.setProperty('align-items', 'flex-end', 'important');
navigation.style.setProperty('width', 'max-content', 'important');
navigation.style.setProperty('float', 'none', 'important');
navigation.style.setProperty('margin', '0', 'important');
navigation.style.setProperty('transform', 'none', 'important');
 
views = navigation.querySelector('#p-views');
actions = navigation.querySelector('#p-cactions');
 
[views, actions].forEach(function (menu) {
if (!menu) {
return;
}
 
menu.style.setProperty('float', 'none', 'important');
menu.style.setProperty('right', 'auto', 'important');
menu.style.setProperty('left', 'auto', 'important');
menu.style.setProperty('margin-right', '0', 'important');
menu.style.setProperty('transform', 'none', 'important');
});
}
 
function initRightNavigationAlignment() {
var observer;
 
syncRightNavigation();
 
window.addEventListener('resize', syncRightNavigation, { passive: true });
window.addEventListener(
'orientationchange',
syncRightNavigation,
{ passive: true }
);
 
observer = new MutationObserver(function () {
window.requestAnimationFrame(syncRightNavigation);
});
 
observer.observe(document.body, {
childList: true,
subtree: true
});
}


if (document.readyState === 'loading') {
function syncV33Layout() {
document.addEventListener(
'DOMContentLoaded',
initRightNavigationAlignment,
{ once: true }
);
} else {
initRightNavigationAlignment();
}
}());
 
 
(function () {
'use strict';
 
function syncV32Navigation() {
var content = document.querySelector('#content');
var content = document.querySelector('#content');
var leftNavigation = document.getElementById('left-navigation');
var leftNavigation = document.getElementById('left-navigation');
var rightNavigation = document.getElementById('right-navigation');
var rightNavigation = document.getElementById('right-navigation');
var search = document.getElementById('pvz-content-search');
var rightGap;
var rightGap;
var navigationTop;
var navigationTop;


if (!content || !leftNavigation || !rightNavigation) {
if (!content || !leftNavigation) {
return;
return;
}
}
466번째 줄: 385번째 줄:
);
);


rightNavigation.style.setProperty(
if (rightNavigation) {
'top',
rightNavigation.style.setProperty(
navigationTop + 'px',
'position',
'important'
'absolute',
);
'important'
);
rightNavigation.style.setProperty(
'top',
navigationTop + 'px',
'important'
);
rightNavigation.style.setProperty(
'right',
(rightGap + ACTION_OFFSET) + 'px',
'important'
);
rightNavigation.style.setProperty(
'left',
'auto',
'important'
);
rightNavigation.style.setProperty(
'display',
'flex',
'important'
);
rightNavigation.style.setProperty(
'align-items',
'flex-end',
'important'
);
rightNavigation.style.setProperty(
'justify-content',
'flex-end',
'important'
);
rightNavigation.style.setProperty(
'width',
'max-content',
'important'
);
rightNavigation.style.setProperty(
'margin',
'0',
'important'
);
rightNavigation.style.setProperty(
'transform',
'none',
'important'
);
}


rightNavigation.style.setProperty(
if (search) {
'right',
search.style.setProperty(
(rightGap + 15) + 'px',
'position',
'important'
'absolute',
);
'important'
 
);
rightNavigation.style.setProperty(
search.style.setProperty(
'left',
'top',
'auto',
navigationTop + 'px',
'important'
'important'
);
);
search.style.setProperty(
'right',
(rightGap + SEARCH_GAP) + 'px',
'important'
);
search.style.setProperty(
'left',
'auto',
'important'
);
search.style.setProperty(
'width',
SEARCH_WIDTH + 'px',
'important'
);
search.style.setProperty(
'max-width',
SEARCH_WIDTH + 'px',
'important'
);
}
}
}


function initV32Navigation() {
function initV33Layout() {
var observer;
var observer;


syncV32Navigation();
syncV33Layout();


window.addEventListener(
window.addEventListener(
'resize',
'resize',
syncV32Navigation,
syncV33Layout,
{ passive: true }
{ passive: true }
);
);
498번째 줄: 485번째 줄:
window.addEventListener(
window.addEventListener(
'orientationchange',
'orientationchange',
syncV32Navigation,
syncV33Layout,
{ passive: true }
{ passive: true }
);
);


observer = new MutationObserver(function () {
observer = new MutationObserver(function () {
window.requestAnimationFrame(syncV32Navigation);
window.requestAnimationFrame(syncV33Layout);
});
});


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