미디어위키:Gadget-Vector.js: 두 판 사이의 차이
식물 vs 좀비 위키
편집 요약 없음 태그: 되돌려진 기여 |
편집 요약 없음 태그: 수동 되돌리기 되돌려진 기여 |
||
| 255번째 줄: | 255번째 줄: | ||
'use strict'; | 'use strict'; | ||
function | function removeIds(root) { | ||
var | var nodes; | ||
if (!root) { | |||
return; | |||
} | |||
if (root.hasAttribute && root.hasAttribute('id')) { | |||
root.removeAttribute('id'); | |||
} | |||
nodes = root.querySelectorAll('[id], [aria-labelledby], [aria-controls]'); | |||
Array.prototype.forEach.call(nodes, function (node) { | |||
node.removeAttribute('id'); | |||
node.removeAttribute('aria-labelledby'); | |||
node.removeAttribute('aria-controls'); | |||
}); | }); | ||
} | } | ||
| 286번째 줄: | 294번째 줄: | ||
} | } | ||
function | function buildRightPanel(panel) { | ||
var | var rightPanel = document.getElementById('pvz-right-panel'); | ||
var | var portals; | ||
if (! | if (!panel || !document.body) { | ||
return; | return; | ||
} | } | ||
if (!rightPanel) { | |||
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 | function syncPanelTop() { | ||
var content = document.querySelector('.skin-vector-legacy #content'); | var content = document.querySelector('.skin-vector-legacy #content'); | ||
var | var top; | ||
if (!content) { | if (!content) { | ||
| 306번째 줄: | 327번째 줄: | ||
} | } | ||
top = content.getBoundingClientRect().top + window.scrollY; | |||
document.documentElement.style.setProperty('--pvz-content- | document.documentElement.style.setProperty('--pvz-content-top', top + 'px'); | ||
} | } | ||
function | function installSidePanels() { | ||
var panel = document.querySelector('.skin-vector-legacy #mw-panel'); | var panel = document.querySelector('.skin-vector-legacy #mw-panel'); | ||
if (!panel) { | |||
return; | |||
if (panel) { | |||
} | } | ||
moveLogoOutsidePanel(panel); | |||
buildRightPanel(panel); | |||
syncPanelTop(); | syncPanelTop(); | ||
} | } | ||
function | function initSidePanels() { | ||
installSidePanels(); | |||
window.addEventListener('resize', syncPanelTop, { passive: true }); | |||
window.addEventListener('resize', | window.addEventListener('orientationchange', syncPanelTop, { passive: true }); | ||
window.addEventListener('orientationchange', | |||
} | } | ||
if (document.readyState === 'loading') { | if (document.readyState === 'loading') { | ||
document.addEventListener('DOMContentLoaded', | document.addEventListener('DOMContentLoaded', initSidePanels, { once: true }); | ||
} else { | } else { | ||
initSidePanels(); | |||
} | } | ||
}()); | }()); | ||
