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

식물 vs 좀비 위키
편집 요약 없음
태그: 되돌려진 기여
편집 요약 없음
태그: 수동 되돌리기 되돌려진 기여
255번째 줄: 255번째 줄:
'use strict';
'use strict';


function removeRelatedInterface() {
function removeIds(root) {
var ids = ['pvz-related-toggle', 'pvz-related-menu'];
var nodes;


ids.forEach(function (id) {
if (!root) {
var element = document.getElementById(id);
return;
}
 
if (root.hasAttribute && root.hasAttribute('id')) {
root.removeAttribute('id');
}


if (element) {
nodes = root.querySelectorAll('[id], [aria-labelledby], [aria-controls]');
element.remove();
 
}
Array.prototype.forEach.call(nodes, function (node) {
node.removeAttribute('id');
node.removeAttribute('aria-labelledby');
node.removeAttribute('aria-controls');
});
});
}
}
286번째 줄: 294번째 줄:
}
}


function syncPanelTop() {
function buildRightPanel(panel) {
var content = document.querySelector('.skin-vector-legacy #content');
var rightPanel = document.getElementById('pvz-right-panel');
var top;
var portals;


if (!content) {
if (!panel || !document.body) {
return;
return;
}
}


top = content.getBoundingClientRect().top + window.scrollY;
if (!rightPanel) {
document.documentElement.style.setProperty('--pvz-content-top', top + 'px');
rightPanel = document.createElement('aside');
rightPanel.id = 'pvz-right-panel';
rightPanel.setAttribute('aria-label', '오른쪽 보조 메뉴');
document.body.appendChild(rightPanel);
}
 
rightPanel.textContent = '';
portals = panel.querySelectorAll('.vector-menu-portal, .portal');
 
Array.prototype.forEach.call(portals, function (portal) {
var clone = portal.cloneNode(true);
removeIds(clone);
rightPanel.appendChild(clone);
});
}
}


function syncSearchLeft() {
function syncPanelTop() {
var content = document.querySelector('.skin-vector-legacy #content');
var content = document.querySelector('.skin-vector-legacy #content');
var left;
var top;


if (!content) {
if (!content) {
306번째 줄: 327번째 줄:
}
}


left = content.getBoundingClientRect().left + window.scrollX;
top = content.getBoundingClientRect().top + window.scrollY;
document.documentElement.style.setProperty('--pvz-content-left', left + 'px');
document.documentElement.style.setProperty('--pvz-content-top', top + 'px');
}
}


function installV26Interface() {
function installSidePanels() {
var panel = document.querySelector('.skin-vector-legacy #mw-panel');
var panel = document.querySelector('.skin-vector-legacy #mw-panel');


removeRelatedInterface();
if (!panel) {
 
return;
if (panel) {
moveLogoOutsidePanel(panel);
}
}


moveLogoOutsidePanel(panel);
buildRightPanel(panel);
syncPanelTop();
syncPanelTop();
syncSearchLeft();
}
}


function initV26Interface() {
function initSidePanels() {
installV26Interface();
installSidePanels();
 
window.addEventListener('resize', syncPanelTop, { passive: true });
window.addEventListener('resize', function () {
window.addEventListener('orientationchange', syncPanelTop, { passive: true });
syncPanelTop();
syncSearchLeft();
}, { passive: true });
 
window.addEventListener('orientationchange', function () {
syncPanelTop();
syncSearchLeft();
}, { passive: true });
}
}


if (document.readyState === 'loading') {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initV26Interface, { once: true });
document.addEventListener('DOMContentLoaded', initSidePanels, { once: true });
} else {
} else {
initV26Interface();
initSidePanels();
}
}
}());
}());