|
|
| (7 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* RV_DATA_MAIN_PAGE_VIEWPORT_CENTER_V2D_START */ | | /* Search enhancement is maintained in the RoovetData skin. Page layout is rendered by MediaWiki and CSS. */ |
| (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 */
| |
