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

식물 vs 좀비 위키
← 이전 편집
Brokey (토론 | 기여)
사무관, 인터페이스 관리자, 관리자
428 편집
편집 요약 없음
편집 요약 없음
태그: 수동 되돌리기
 
(같은 사용자의 중간 판 22개는 보이지 않습니다)
76번째 줄: 76번째 줄:
}
}
}
}


function shortenHistoryLabel() {
function shortenHistoryLabel() {
136번째 줄: 135번째 줄:
'use strict';
'use strict';


function installContentSearch() {
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 content = document.querySelector('.skin-vector-legacy #content');
var form = document.querySelector('#searchform');
var form = document.querySelector('#searchform');
var wrapper;
var wrapper;


if (!content || !form) {
if (!content || !form || !document.body) {
return;
return;
}
}
152번째 줄: 186번째 줄:
wrapper.setAttribute('role', 'search');
wrapper.setAttribute('role', 'search');
wrapper.setAttribute('aria-label', '사이트 검색');
wrapper.setAttribute('aria-label', '사이트 검색');
content.insertBefore(wrapper, content.firstChild);
}
 
if (wrapper.parentNode !== document.body) {
document.body.insertBefore(wrapper, content);
}
}


159번째 줄: 196번째 줄:
}
}


installSearchButtonIcon(wrapper);
document.documentElement.classList.add('pvz-content-search-ready');
document.documentElement.classList.add('pvz-content-search-ready');
}
}


function initContentSearch() {
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;
var observer;


installContentSearch();
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 () {
observer = new MutationObserver(function () {
installContentSearch();
window.requestAnimationFrame(syncV35Layout);
});
});


178번째 줄: 708번째 줄:


if (document.readyState === 'loading') {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initContentSearch, { once: true });
document.addEventListener(
'DOMContentLoaded',
initV35Layout,
{ once: true }
);
} else {
} else {
initContentSearch();
initV35Layout();
}
}
}());
}());
원본 주소 "https://pvzkrwiki.com/wiki/미디어위키:Gadget-Vector.js"