MediaWiki:Common.js: Difference between revisions

Revision as of 17:27, 20 July 2026

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