미디어위키:Gadget-Vector.js: 두 판 사이의 차이
식물 vs 좀비 위키
편집 요약 없음 |
편집 요약 없음 |
||
| 343번째 줄: | 343번째 줄: | ||
} else { | } else { | ||
initV27Interface(); | initV27Interface(); | ||
} | |||
}()); | |||
(function () { | |||
'use strict'; | |||
function syncRightNavigation() { | |||
var content = document.querySelector('#content'); | |||
var navigation = document.getElementById('right-navigation'); | |||
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') { | |||
document.addEventListener( | |||
'DOMContentLoaded', | |||
initRightNavigationAlignment, | |||
{ once: true } | |||
); | |||
} else { | |||
initRightNavigationAlignment(); | |||
} | } | ||
}()); | }()); | ||
