미디어위키:Gadget-Vector.js: 두 판 사이의 차이
식물 vs 좀비 위키
편집 요약 없음 |
편집 요약 없음 태그: 수동 되돌리기 |
||
| (같은 사용자의 중간 판 24개는 보이지 않습니다) | |||
| 75번째 줄: | 75번째 줄: | ||
spin(); | spin(); | ||
} | } | ||
} | |||
function shortenHistoryLabel() { | |||
var historyLink = document.querySelector('#ca-history > a'); | |||
if (!historyLink) { | |||
return; | |||
} | |||
Array.prototype.forEach.call(historyLink.childNodes, function (node) { | |||
if (node.nodeType === Node.TEXT_NODE) { | |||
node.nodeValue = node.nodeValue.replace(/역사 보기/g, '역사'); | |||
} | |||
}); | |||
if (historyLink.textContent.trim() === '역사 보기') { | |||
historyLink.textContent = '역사'; | |||
} | |||
historyLink.setAttribute('title', '역사'); | |||
} | } | ||
| 80번째 줄: | 100번째 줄: | ||
var observer; | var observer; | ||
shortenHistoryLabel(); | |||
syncFromMarkup(); | syncFromMarkup(); | ||
document.addEventListener('click', handleClick, true); | document.addEventListener('click', handleClick, true); | ||
observer = new MutationObserver(function () { | observer = new MutationObserver(function () { | ||
shortenHistoryLabel(); | |||
syncFromMarkup(); | syncFromMarkup(); | ||
}); | }); | ||
| 106번째 줄: | 128번째 줄: | ||
} else { | } else { | ||
init(); | init(); | ||
} | |||
}()); | |||
(function () { | |||
'use strict'; | |||
function installSearchButtonIcon(wrapper) { | |||
var simpleSearch; | |||
var searchButton; | |||
var icon; | |||
if (!wrapper) { | |||
return; | |||
} | |||
simpleSearch = wrapper.querySelector('#simpleSearch'); | |||
if (!simpleSearch) { | |||
return; | |||
} | |||
searchButton = | |||
simpleSearch.querySelector('#searchButton') || | |||
simpleSearch.querySelector('.searchButton:not(#mw-searchButton)'); | |||
if (!searchButton) { | |||
return; | |||
} | |||
searchButton.classList.add('pvz-primary-search-button'); | |||
icon = simpleSearch.querySelector('.pvz-search-button-icon'); | |||
if (!icon) { | |||
icon = document.createElement('span'); | |||
icon.className = 'pvz-search-button-icon'; | |||
icon.setAttribute('aria-hidden', 'true'); | |||
simpleSearch.appendChild(icon); | |||
} | |||
} | |||
function installTopSearch() { | |||
var content = document.querySelector('.skin-vector-legacy #content'); | |||
var form = document.querySelector('#searchform'); | |||
var wrapper; | |||
if (!content || !form || !document.body) { | |||
return; | |||
} | |||
wrapper = document.getElementById('pvz-content-search'); | |||
if (!wrapper) { | |||
wrapper = document.createElement('div'); | |||
wrapper.id = 'pvz-content-search'; | |||
wrapper.setAttribute('role', 'search'); | |||
wrapper.setAttribute('aria-label', '사이트 검색'); | |||
} | |||
if (wrapper.parentNode !== document.body) { | |||
document.body.insertBefore(wrapper, content); | |||
} | |||
if (form.parentNode !== wrapper) { | |||
wrapper.appendChild(form); | |||
} | |||
installSearchButtonIcon(wrapper); | |||
document.documentElement.classList.add('pvz-content-search-ready'); | |||
} | |||
function initTopSearch() { | |||
var observer; | |||
installTopSearch(); | |||
observer = new MutationObserver(function () { | |||
installTopSearch(); | |||
}); | |||
observer.observe(document.body, { | |||
childList: true, | |||
subtree: true | |||
}); | |||
} | |||
if (document.readyState === 'loading') { | |||
document.addEventListener('DOMContentLoaded', initTopSearch, { once: true }); | |||
} else { | |||
initTopSearch(); | |||
} | |||
}()); | |||
(function () { | |||
'use strict'; | |||
function syncSearchLeft() { | |||
var content = document.querySelector('.skin-vector-legacy #content'); | |||
var left; | |||
if (!content) { | |||
return; | |||
} | |||
left = content.getBoundingClientRect().left + window.scrollX; | |||
document.documentElement.style.setProperty('--pvz-content-left', left + 'px'); | |||
} | |||
function initSearchAlignment() { | |||
syncSearchLeft(); | |||
window.addEventListener('resize', syncSearchLeft, { passive: true }); | |||
window.addEventListener('orientationchange', syncSearchLeft, { passive: true }); | |||
} | |||
if (document.readyState === 'loading') { | |||
document.addEventListener('DOMContentLoaded', initSearchAlignment, { once: true }); | |||
} else { | |||
initSearchAlignment(); | |||
} | |||
}()); | |||
(function () { | |||
'use strict'; | |||
function removeObsoleteInterface() { | |||
var ids = [ | |||
'pvz-related-toggle', | |||
'pvz-related-menu', | |||
'pvz-right-panel', | |||
'pvz-left-panel-toggle', | |||
'pvz-right-panel-toggle' | |||
]; | |||
ids.forEach(function (id) { | |||
var element = document.getElementById(id); | |||
if (element) { | |||
element.remove(); | |||
} | |||
}); | |||
} | |||
function restoreLogoToPanel(panel) { | |||
var wrapper = document.getElementById('pvz-sidebar-logo'); | |||
var logo = | |||
(wrapper && wrapper.querySelector('#p-logo')) || | |||
document.querySelector('#p-logo'); | |||
if (!panel || !logo) { | |||
return; | |||
} | |||
if (logo.parentNode !== panel) { | |||
panel.insertBefore(logo, panel.firstChild); | |||
} | |||
if (wrapper) { | |||
wrapper.remove(); | |||
} | |||
} | |||
function syncPanelTop() { | |||
var content = document.querySelector('.skin-vector-legacy #content'); | |||
var top; | |||
if (!content) { | |||
return; | |||
} | |||
top = content.getBoundingClientRect().top + window.scrollY; | |||
document.documentElement.style.setProperty('--pvz-content-top', top + 'px'); | |||
} | |||
function syncSearchLeft() { | |||
var content = document.querySelector('.skin-vector-legacy #content'); | |||
var left; | |||
if (!content) { | |||
return; | |||
} | |||
left = content.getBoundingClientRect().left + window.scrollX; | |||
document.documentElement.style.setProperty('--pvz-content-left', left + 'px'); | |||
} | |||
function installV27Interface() { | |||
var panel = document.querySelector('.skin-vector-legacy #mw-panel'); | |||
removeObsoleteInterface(); | |||
restoreLogoToPanel(panel); | |||
syncPanelTop(); | |||
syncSearchLeft(); | |||
} | |||
function initV27Interface() { | |||
installV27Interface(); | |||
window.addEventListener('resize', function () { | |||
syncPanelTop(); | |||
syncSearchLeft(); | |||
}, { passive: true }); | |||
window.addEventListener('orientationchange', function () { | |||
syncPanelTop(); | |||
syncSearchLeft(); | |||
}, { passive: true }); | |||
} | |||
if (document.readyState === 'loading') { | |||
document.addEventListener('DOMContentLoaded', initV27Interface, { once: true }); | |||
} else { | |||
initV27Interface(); | |||
} | |||
}()); | |||
(function () { | |||
'use strict'; | |||
function installGrassDividers(root) { | |||
var scope = root || document; | |||
var wrappers; | |||
var legacyHeadings; | |||
wrappers = scope.querySelectorAll( | |||
'.skin-vector-legacy .mw-parser-output .mw-heading2' | |||
); | |||
Array.prototype.forEach.call(wrappers, function (wrapper) { | |||
var divider; | |||
wrapper.classList.add('pvz-grass-heading'); | |||
divider = wrapper.querySelector( | |||
':scope > .pvz-grass-divider' | |||
); | |||
if (!divider) { | |||
divider = document.createElement('span'); | |||
divider.className = 'pvz-grass-divider'; | |||
divider.setAttribute('aria-hidden', 'true'); | |||
wrapper.appendChild(divider); | |||
} | |||
}); | |||
legacyHeadings = scope.querySelectorAll( | |||
'.skin-vector-legacy .mw-parser-output > h2' | |||
); | |||
Array.prototype.forEach.call(legacyHeadings, function (heading) { | |||
var divider; | |||
if (heading.closest('.mw-heading2')) { | |||
return; | |||
} | |||
heading.classList.add('pvz-grass-heading'); | |||
divider = heading.querySelector( | |||
':scope > .pvz-grass-divider' | |||
); | |||
if (!divider) { | |||
divider = document.createElement('span'); | |||
divider.className = 'pvz-grass-divider'; | |||
divider.setAttribute('aria-hidden', 'true'); | |||
heading.appendChild(divider); | |||
} | |||
}); | |||
} | |||
function initGrassDividers() { | |||
var observer; | |||
installGrassDividers(document); | |||
observer = new MutationObserver(function (mutations) { | |||
mutations.forEach(function (mutation) { | |||
Array.prototype.forEach.call( | |||
mutation.addedNodes, | |||
function (node) { | |||
if (node.nodeType !== Node.ELEMENT_NODE) { | |||
return; | |||
} | |||
if ( | |||
node.matches( | |||
'.mw-heading2, .mw-parser-output > h2' | |||
) | |||
) { | |||
installGrassDividers(node.parentNode); | |||
return; | |||
} | |||
installGrassDividers(node); | |||
} | |||
); | |||
}); | |||
}); | |||
observer.observe(document.body, { | |||
childList: true, | |||
subtree: true | |||
}); | |||
} | |||
if (document.readyState === 'loading') { | |||
document.addEventListener( | |||
'DOMContentLoaded', | |||
initGrassDividers, | |||
{ once: true } | |||
); | |||
} else { | |||
initGrassDividers(); | |||
} | |||
}()); | |||
(function () { | |||
'use strict'; | |||
var ACTION_OFFSET = 230; | |||
var SEARCH_WIDTH = 205; | |||
var SEARCH_DOWN_OFFSET = 5; | |||
var CONTENT_TOP = 24; | |||
function getCactionsParts() { | |||
var menu = document.getElementById('p-cactions'); | |||
if (!menu) { | |||
return null; | |||
} | |||
return { | |||
menu: menu, | |||
label: | |||
document.getElementById('p-cactions-label') || | |||
menu.querySelector('.vector-menu-heading'), | |||
checkbox: menu.querySelector( | |||
'input.vector-menu-checkbox, input[type="checkbox"]' | |||
), | |||
content: menu.querySelector('.vector-menu-content') | |||
}; | |||
} | |||
function isCactionsOpen(parts) { | |||
if (!parts) { | |||
return false; | |||
} | |||
if (parts.checkbox && parts.checkbox.checked) { | |||
return true; | |||
} | |||
if ( | |||
parts.menu.classList.contains('vector-menu-dropdown-active') || | |||
parts.menu.classList.contains('pvz-cactions-open') | |||
) { | |||
return true; | |||
} | |||
if (parts.label) { | |||
return parts.label.getAttribute('aria-expanded') === 'true'; | |||
} | |||
return false; | |||
} | |||
function closeCactions(parts) { | |||
if (!parts) { | |||
return; | |||
} | |||
if (parts.checkbox) { | |||
parts.checkbox.checked = false; | |||
parts.checkbox.dispatchEvent( | |||
new Event('change', { bubbles: true }) | |||
); | |||
} | |||
parts.menu.classList.remove( | |||
'pvz-cactions-open', | |||
'vector-menu-dropdown-active' | |||
); | |||
if (parts.label) { | |||
parts.label.setAttribute('aria-expanded', 'false'); | |||
} | |||
if (parts.content) { | |||
parts.content.setAttribute('aria-hidden', 'true'); | |||
} | |||
} | |||
function handleCactionsClick(event) { | |||
var parts = getCactionsParts(); | |||
var label; | |||
if (!parts) { | |||
return; | |||
} | |||
label = event.target.closest( | |||
'#p-cactions-label, #p-cactions > .vector-menu-heading' | |||
); | |||
if (label && isCactionsOpen(parts)) { | |||
event.preventDefault(); | |||
event.stopImmediatePropagation(); | |||
closeCactions(parts); | |||
return; | |||
} | |||
if ( | |||
isCactionsOpen(parts) && | |||
!event.target.closest('#p-cactions') | |||
) { | |||
closeCactions(parts); | |||
} | |||
} | |||
function syncV35Layout() { | |||
var content = document.querySelector('#content'); | |||
var leftNavigation = document.getElementById('left-navigation'); | |||
var rightNavigation = document.getElementById('right-navigation'); | |||
var search = document.getElementById('pvz-content-search'); | |||
var rightGap; | |||
var navigationTop; | |||
if (!content || !leftNavigation) { | |||
return; | |||
} | |||
rightGap = Math.max( | |||
0, | |||
window.innerWidth - content.getBoundingClientRect().right | |||
); | |||
navigationTop = | |||
leftNavigation.getBoundingClientRect().top + | |||
window.scrollY; | |||
if (!Number.isFinite(navigationTop)) { | |||
navigationTop = CONTENT_TOP; | |||
} | |||
document.documentElement.style.setProperty( | |||
'--pvz-content-right-gap', | |||
rightGap + 'px' | |||
); | |||
document.documentElement.style.setProperty( | |||
'--pvz-navigation-top', | |||
navigationTop + 'px' | |||
); | |||
if (rightNavigation) { | |||
rightNavigation.style.setProperty( | |||
'position', | |||
'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' | |||
); | |||
} | |||
if (search) { | |||
search.style.setProperty( | |||
'position', | |||
'absolute', | |||
'important' | |||
); | |||
search.style.setProperty( | |||
'top', | |||
(navigationTop + SEARCH_DOWN_OFFSET) + 'px', | |||
'important' | |||
); | |||
search.style.setProperty( | |||
'right', | |||
rightGap + '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 initV35Layout() { | |||
var observer; | |||
syncV35Layout(); | |||
document.addEventListener( | |||
'click', | |||
handleCactionsClick, | |||
true | |||
); | |||
window.addEventListener( | |||
'resize', | |||
syncV35Layout, | |||
{ passive: true } | |||
); | |||
window.addEventListener( | |||
'orientationchange', | |||
syncV35Layout, | |||
{ passive: true } | |||
); | |||
observer = new MutationObserver(function () { | |||
window.requestAnimationFrame(syncV35Layout); | |||
}); | |||
observer.observe(document.body, { | |||
childList: true, | |||
subtree: true | |||
}); | |||
} | |||
if (document.readyState === 'loading') { | |||
document.addEventListener( | |||
'DOMContentLoaded', | |||
initV35Layout, | |||
{ once: true } | |||
); | |||
} else { | |||
initV35Layout(); | |||
} | } | ||
}()); | }()); | ||
