MediaWiki:Common.js
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* RV_DATA_MAIN_PAGE_VIEWPORT_CENTER_V2D_START */
(function () {
"use strict";
if (
!document.body ||
!document.body.classList.contains(
"page-Main_Page"
)
) {
return;
}
var animationFrame = 0;
var resizeTimer = 0;
function setImportant(element, property, value) {
if (!element) {
return;
}
element.style.setProperty(
property,
value,
"important"
);
}
function releaseAncestorClipping(home) {
var current = home.parentElement;
while (
current &&
current !== document.body
) {
setImportant(
current,
"overflow-x",
"visible"
);
current = current.parentElement;
}
setImportant(
document.body,
"overflow-x",
"hidden"
);
setImportant(
document.documentElement,
"overflow-x",
"hidden"
);
}
function centerHomepage() {
var home = document.querySelector(
".rdx-home"
);
if (!home) {
return;
}
releaseAncestorClipping(home);
var viewportWidth =
document.documentElement.clientWidth ||
window.innerWidth ||
0;
if (!viewportWidth) {
return;
}
var gutter;
if (viewportWidth <= 700) {
gutter = 0;
} else if (viewportWidth <= 1100) {
gutter = 16;
} else {
gutter = 32;
}
var availableWidth =
viewportWidth - (gutter * 2);
var targetWidth = Math.min(
1180,
availableWidth
);
targetWidth = Math.max(
320,
targetWidth
);
/*
* Reset all earlier CSS positioning before
* measuring the element's natural browser
* location.
*/
setImportant(
home,
"position",
"relative"
);
setImportant(
home,
"left",
"0"
);
setImportant(
home,
"right",
"auto"
);
setImportant(
home,
"width",
targetWidth + "px"
);
setImportant(
home,
"max-width",
"none"
);
setImportant(
home,
"margin-left",
"0"
);
setImportant(
home,
"margin-right",
"0"
);
setImportant(
home,
"transform",
"none"
);
/*
* Force layout calculation after removing
* all previous transforms.
*/
void home.offsetWidth;
var rectangle =
home.getBoundingClientRect();
var desiredLeft = Math.round(
(viewportWidth - targetWidth) / 2
);
var correction = Math.round(
desiredLeft - rectangle.left
);
setImportant(
home,
"transform",
"translate3d(" +
correction +
"px, 0, 0)"
);
home.setAttribute(
"data-rdx-viewport-centered",
"true"
);
home.setAttribute(
"data-rdx-viewport-width",
String(viewportWidth)
);
home.setAttribute(
"data-rdx-target-width",
String(targetWidth)
);
home.setAttribute(
"data-rdx-original-left",
String(
Math.round(rectangle.left)
)
);
home.setAttribute(
"data-rdx-correction",
String(correction)
);
/*
* Verify the rendered result and perform one
* final adjustment for sub-pixel browser
* rounding or delayed Vector layout changes.
*/
window.requestAnimationFrame(
function () {
var finalRectangle =
home.getBoundingClientRect();
var remainingDifference =
Math.round(
desiredLeft -
finalRectangle.left
);
if (
Math.abs(
remainingDifference
) > 1
) {
correction +=
remainingDifference;
setImportant(
home,
"transform",
"translate3d(" +
correction +
"px, 0, 0)"
);
home.setAttribute(
"data-rdx-correction",
String(correction)
);
}
home.setAttribute(
"data-rdx-final-left",
String(
Math.round(
home
.getBoundingClientRect()
.left
)
)
);
}
);
}
function queueCentering() {
if (animationFrame) {
window.cancelAnimationFrame(
animationFrame
);
}
animationFrame =
window.requestAnimationFrame(
function () {
animationFrame =
window.requestAnimationFrame(
centerHomepage
);
}
);
}
function delayedCentering() {
window.clearTimeout(
resizeTimer
);
resizeTimer = window.setTimeout(
queueCentering,
80
);
}
if (
document.readyState === "loading"
) {
document.addEventListener(
"DOMContentLoaded",
queueCentering,
{
once: true
}
);
} else {
queueCentering();
}
window.addEventListener(
"load",
queueCentering
);
window.addEventListener(
"resize",
delayedCentering
);
if (window.visualViewport) {
window.visualViewport.addEventListener(
"resize",
delayedCentering
);
}
/*
* Vector and ResourceLoader can finish portions
* of their layout after DOM ready. Recheck after
* those delayed changes.
*/
window.setTimeout(
queueCentering,
250
);
window.setTimeout(
queueCentering,
750
);
window.setTimeout(
queueCentering,
1500
);
}());
/* RV_DATA_MAIN_PAGE_VIEWPORT_CENTER_V2D_END */
/* RV_DATA_TOOLS_RUNTIME_FIX_V2G_START */
(function () {
"use strict";
if (
!document.body ||
!document.body.classList.contains(
"page-Main_Page"
)
) {
return;
}
var resizeTimer = 0;
function important(
element,
property,
value
) {
if (!element) {
return;
}
element.style.setProperty(
property,
value,
"important"
);
}
function findToolsRoot() {
var selectors = [
"#vector-page-tools-dropdown",
".vector-page-tools-landmark .vector-dropdown"
];
var index;
var roots;
var root;
var content;
for (
index = 0;
index < selectors.length;
index += 1
) {
roots = document.querySelectorAll(
selectors[index]
);
for (
var item = 0;
item < roots.length;
item += 1
) {
root = roots[item];
content = root.querySelector(
".vector-dropdown-content"
);
if (
content &&
root.getBoundingClientRect().width > 0
) {
return root;
}
}
}
return null;
}
function toolsAreOpen(
root,
content
) {
var checkbox =
root.querySelector(
'input[type="checkbox"]'
) ||
document.querySelector(
"#vector-page-tools-dropdown-checkbox"
);
if (checkbox) {
return checkbox.checked;
}
var style =
window.getComputedStyle(content);
return (
style.display !== "none" &&
style.visibility !== "hidden"
);
}
function normalizeDescendants(
content
) {
var descendants =
content.querySelectorAll("*");
for (
var index = 0;
index < descendants.length;
index += 1
) {
var element =
descendants[index];
important(
element,
"float",
"none"
);
important(
element,
"transform",
"none"
);
important(
element,
"translate",
"none"
);
/*
* The escaped menu links were being
* positioned outside their parent panel.
*/
important(
element,
"position",
"static"
);
important(
element,
"max-height",
"none"
);
}
var wrappers =
content.querySelectorAll(
[
".vector-pinnable-container",
".vector-menu",
".vector-menu-content",
".vector-menu-content-list",
"nav",
"ul"
].join(",")
);
for (
var wrapperIndex = 0;
wrapperIndex < wrappers.length;
wrapperIndex += 1
) {
var wrapper =
wrappers[wrapperIndex];
important(
wrapper,
"display",
"block"
);
important(
wrapper,
"box-sizing",
"border-box"
);
important(
wrapper,
"width",
"100%"
);
important(
wrapper,
"min-width",
"0"
);
important(
wrapper,
"max-width",
"100%"
);
important(
wrapper,
"height",
"auto"
);
important(
wrapper,
"min-height",
"0"
);
important(
wrapper,
"margin",
"0"
);
important(
wrapper,
"overflow",
"visible"
);
important(
wrapper,
"columns",
"1"
);
important(
wrapper,
"column-count",
"1"
);
}
var items =
content.querySelectorAll(
".mw-list-item, li"
);
for (
var itemIndex = 0;
itemIndex < items.length;
itemIndex += 1
) {
var menuItem =
items[itemIndex];
important(
menuItem,
"display",
"block"
);
important(
menuItem,
"clear",
"both"
);
important(
menuItem,
"width",
"100%"
);
important(
menuItem,
"height",
"auto"
);
important(
menuItem,
"min-height",
"0"
);
important(
menuItem,
"margin",
"0"
);
important(
menuItem,
"padding",
"0"
);
}
var links =
content.querySelectorAll(
".mw-list-item > a, li > a"
);
for (
var linkIndex = 0;
linkIndex < links.length;
linkIndex += 1
) {
var link =
links[linkIndex];
important(
link,
"display",
"block"
);
important(
link,
"box-sizing",
"border-box"
);
important(
link,
"width",
"100%"
);
important(
link,
"height",
"auto"
);
important(
link,
"min-height",
"42px"
);
important(
link,
"padding",
"10px 16px"
);
important(
link,
"white-space",
"normal"
);
important(
link,
"overflow-wrap",
"anywhere"
);
}
}
function repairTools() {
var root =
findToolsRoot();
if (!root) {
return;
}
var content =
root.querySelector(
".vector-dropdown-content"
);
var button =
root.querySelector(
".vector-dropdown-label"
) ||
root.querySelector("label") ||
root.querySelector("button");
if (
!content ||
!button
) {
return;
}
normalizeDescendants(content);
if (
!toolsAreOpen(
root,
content
)
) {
content.style.removeProperty(
"height"
);
return;
}
var viewportWidth =
document.documentElement.clientWidth ||
window.innerWidth;
var viewportHeight =
document.documentElement.clientHeight ||
window.innerHeight;
var buttonRectangle =
button.getBoundingClientRect();
var panelWidth =
Math.min(
360,
viewportWidth - 20
);
var panelLeft =
buttonRectangle.right -
panelWidth;
panelLeft = Math.max(
10,
Math.min(
panelLeft,
viewportWidth -
panelWidth -
10
)
);
var panelTop =
Math.round(
buttonRectangle.bottom + 6
);
var maximumHeight =
Math.max(
220,
viewportHeight -
panelTop -
12
);
important(
content,
"position",
"fixed"
);
important(
content,
"top",
panelTop + "px"
);
important(
content,
"right",
"auto"
);
important(
content,
"bottom",
"auto"
);
important(
content,
"left",
Math.round(panelLeft) + "px"
);
important(
content,
"z-index",
"2147483000"
);
important(
content,
"box-sizing",
"border-box"
);
important(
content,
"width",
panelWidth + "px"
);
important(
content,
"min-width",
"0"
);
important(
content,
"max-width",
"none"
);
important(
content,
"height",
"auto"
);
important(
content,
"min-height",
"0"
);
important(
content,
"max-height",
maximumHeight + "px"
);
important(
content,
"margin",
"0"
);
important(
content,
"padding",
"0"
);
important(
content,
"overflow-x",
"hidden"
);
important(
content,
"overflow-y",
"auto"
);
important(
content,
"contain",
"none"
);
important(
content,
"background",
"#ffffff"
);
important(
content,
"border",
"1px solid #a2a9b1"
);
important(
content,
"box-shadow",
"0 18px 46px rgba(16,24,40,.25)"
);
/*
* Recalculate after every descendant has
* returned to normal document flow.
*/
window.requestAnimationFrame(
function () {
normalizeDescendants(
content
);
important(
content,
"height",
"auto"
);
var requiredHeight =
Math.min(
content.scrollHeight,
maximumHeight
);
if (requiredHeight > 0) {
important(
content,
"height",
requiredHeight + "px"
);
}
content.setAttribute(
"data-rv-tools-runtime",
"2g"
);
content.setAttribute(
"data-rv-tools-items",
String(
content.querySelectorAll(
".mw-list-item"
).length
)
);
content.setAttribute(
"data-rv-tools-height",
String(requiredHeight)
);
}
);
}
function scheduleRepair() {
window.requestAnimationFrame(
function () {
window.requestAnimationFrame(
repairTools
);
}
);
}
document.addEventListener(
"click",
function (event) {
var toolsButton =
event.target.closest(
[
"#vector-page-tools-dropdown",
".vector-page-tools-landmark"
].join(",")
);
if (toolsButton) {
window.setTimeout(
scheduleRepair,
0
);
window.setTimeout(
scheduleRepair,
80
);
window.setTimeout(
scheduleRepair,
220
);
}
},
true
);
document.addEventListener(
"change",
function (event) {
if (
event.target &&
event.target.matches(
[
"#vector-page-tools-dropdown input",
".vector-page-tools-landmark input"
].join(",")
)
) {
scheduleRepair();
}
},
true
);
window.addEventListener(
"resize",
function () {
window.clearTimeout(
resizeTimer
);
resizeTimer =
window.setTimeout(
scheduleRepair,
80
);
}
);
var observer =
new MutationObserver(
function () {
var root =
findToolsRoot();
if (root) {
var content =
root.querySelector(
".vector-dropdown-content"
);
if (
content &&
toolsAreOpen(
root,
content
)
) {
scheduleRepair();
}
}
}
);
observer.observe(
document.body,
{
attributes: true,
childList: true,
subtree: true,
}
);
scheduleRepair();
window.setTimeout(
scheduleRepair,
400
);
window.setTimeout(
scheduleRepair,
1100
);
}());
/* RV_DATA_TOOLS_RUNTIME_FIX_V2G_END */