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 */