|
|
| (5 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_INLINE_V2N_START */
| |
| (function () {
| |
| "use strict";
| |
| | |
| if (
| |
| !document.body ||
| |
| !document.body.classList.contains(
| |
| "page-Main_Page"
| |
| )
| |
| ) {
| |
| return;
| |
| }
| |
| | |
| function findTools() {
| |
| return (
| |
| document.getElementById(
| |
| "vector-page-tools-dropdown"
| |
| )
| |
| ||
| |
| document.querySelector(
| |
| ".vector-page-tools-landmark"
| |
| )
| |
| );
| |
| }
| |
| | |
| function moveToolsBesideViews() {
| |
| var views =
| |
| document.getElementById("p-views");
| |
| | |
| var tools =
| |
| findTools();
| |
| | |
| if (
| |
| !views ||
| |
| !tools ||
| |
| !views.parentNode
| |
| ) {
| |
| return false;
| |
| }
| |
| | |
| var host =
| |
| views.parentNode;
| |
| | |
| /*
| |
| * Physically place Tools immediately after the
| |
| * Read/Edit/Edit source/View history menu.
| |
| */
| |
| if (
| |
| tools.parentNode !== host ||
| |
| tools.previousElementSibling !== views
| |
| ) {
| |
| host.insertBefore(
| |
| tools,
| |
| views.nextSibling
| |
| );
| |
| }
| |
| | |
| tools.classList.add(
| |
| "rv-tools-inline"
| |
| );
| |
| | |
| tools.setAttribute(
| |
| "data-rv-tools-inline",
| |
| "2n"
| |
| );
| |
| | |
| host.setAttribute(
| |
| "data-rv-tools-host",
| |
| "2n"
| |
| );
| |
| | |
| return true;
| |
| }
| |
| | |
| function scheduleMove() {
| |
| window.requestAnimationFrame(
| |
| function () {
| |
| window.requestAnimationFrame(
| |
| moveToolsBesideViews
| |
| );
| |
| }
| |
| );
| |
| }
| |
| | |
| if (
| |
| document.readyState === "loading"
| |
| ) {
| |
| document.addEventListener(
| |
| "DOMContentLoaded",
| |
| scheduleMove,
| |
| {
| |
| once: true
| |
| }
| |
| );
| |
| } else {
| |
| scheduleMove();
| |
| }
| |
| | |
| window.addEventListener(
| |
| "load",
| |
| scheduleMove
| |
| );
| |
| | |
| /*
| |
| * Vector may finish building toolbar controls
| |
| * after Common.js first executes.
| |
| */
| |
| window.setTimeout(
| |
| scheduleMove,
| |
| 100
| |
| );
| |
| | |
| window.setTimeout(
| |
| scheduleMove,
| |
| 400
| |
| );
| |
| | |
| window.setTimeout(
| |
| scheduleMove,
| |
| 1000
| |
| );
| |
| | |
| var observer =
| |
| new MutationObserver(
| |
| function () {
| |
| var tools =
| |
| findTools();
| |
| | |
| var views =
| |
| document.getElementById(
| |
| "p-views"
| |
| );
| |
| | |
| if (
| |
| tools &&
| |
| views &&
| |
| (
| |
| tools.parentNode !==
| |
| views.parentNode
| |
| ||
| |
| tools.previousElementSibling !==
| |
| views
| |
| )
| |
| ) {
| |
| scheduleMove();
| |
| }
| |
| }
| |
| );
| |
| | |
| observer.observe(
| |
| document.body,
| |
| {
| |
| childList: true,
| |
| subtree: true
| |
| }
| |
| );
| |
| }());
| |
| /* RV_DATA_TOOLS_INLINE_V2N_END */
| |
