미디어위키:MainPageManifesto.js

/* =========================================
   Main page manifesto optical centering
   =========================================
   New shared systems use unprefixed names. Existing prefixed page classes
   remain only because they are legacy layout contracts.

   The prose stays left-aligned. This script measures the actual rendered
   line fragments and shifts only the paragraphs so their visual mass is
   centered inside the 660px manifesto column. The title remains geometrically centered. The vertical -100px placement and
   integer-pixel snap remain owned jointly by MainPage.css and this script.

   The title divider is the hard horizontal boundary. Optical correction is
   clamped so no rendered line can cross either end of that divider.
*/
(function (window, document, mw) {
    'use strict';

    var SELECTOR = '.main-portal .main-manifesto-inner';
    var SHIFT_PROPERTY = '--manifesto-optical-shift-x';
    var SNAP_X_PROPERTY = '--manifesto-snap-x';
    var SNAP_Y_PROPERTY = '--manifesto-snap-y';
    var MAX_SHIFT = 48;
    var DIVIDER_SAFE_INSET = 1;
    var resizeTimer = 0;
    var observed = typeof WeakSet === 'function' ? new WeakSet() : null;
    var resizeObserver = typeof ResizeObserver === 'function' ? new ResizeObserver(function (entries) {
        entries.forEach(function (entry) {
            schedule(entry.target);
        });
    }) : null;

    function isVisible(element) {
        var rect;
        if (!element || !element.isConnected) return false;
        rect = element.getBoundingClientRect();
        return rect.width > 0 && rect.height > 0;
    }

    function getLineRects(paragraph) {
        var range;
        var rects;

        if (!paragraph || !paragraph.textContent || !paragraph.textContent.trim()) return [];

        range = document.createRange();
        range.selectNodeContents(paragraph);
        rects = Array.prototype.slice.call(range.getClientRects());
        if (typeof range.detach === 'function') range.detach();

        return rects.filter(function (rect) {
            return rect.width > 1 && rect.height > 1;
        });
    }

    function measureAndApply(inner) {
        var innerRect;
        var weightedCenter = 0;
        var totalWeight = 0;
        var desiredCenter;
        var minimumLeft = Infinity;
        var maximumRight = -Infinity;
        var minimumShift;
        var maximumShift;
        var shift;
        var snapX;
        var snapY;

        if (!isVisible(inner)) return;

        /*
         * Remove previous corrections first. The wrapper is then snapped to
         * whole CSS-pixel coordinates without transforms, so the glyph raster
         * origin remains stable on Windows Chromium as well.
         */
        inner.style.setProperty(SHIFT_PROPERTY, '0px');
        inner.style.setProperty(SNAP_X_PROPERTY, '0px');
        inner.style.setProperty(SNAP_Y_PROPERTY, '0px');

        window.requestAnimationFrame(function () {
            if (!isVisible(inner)) return;

            innerRect = inner.getBoundingClientRect();
            snapX = Math.round(innerRect.left) - innerRect.left;
            snapY = Math.round(innerRect.top) - innerRect.top;

            if (Math.abs(snapX) < 0.001) snapX = 0;
            if (Math.abs(snapY) < 0.001) snapY = 0;

            inner.style.setProperty(SNAP_X_PROPERTY, snapX.toFixed(3) + 'px');
            inner.style.setProperty(SNAP_Y_PROPERTY, snapY.toFixed(3) + 'px');
            inner.setAttribute('data-pixel-snap-x', snapX.toFixed(3));
            inner.setAttribute('data-pixel-snap-y', snapY.toFixed(3));

            window.requestAnimationFrame(function () {
                if (!isVisible(inner)) return;

                innerRect = inner.getBoundingClientRect();
                desiredCenter = innerRect.left + (innerRect.width / 2);

                Array.prototype.forEach.call(inner.querySelectorAll('p'), function (paragraph) {
                    getLineRects(paragraph).forEach(function (rect) {
                        /* Area weighting approximates the visible typographic mass. */
                        var weight = rect.width * rect.height;
                        weightedCenter += (rect.left + (rect.width / 2)) * weight;
                        totalWeight += weight;
                        minimumLeft = Math.min(minimumLeft, rect.left);
                        maximumRight = Math.max(maximumRight, rect.right);
                    });
                });

                if (!totalWeight || !isFinite(minimumLeft) || !isFinite(maximumRight)) {
                    inner.style.setProperty(SHIFT_PROPERTY, '0px');
                    inner.removeAttribute('data-optical-shift-x');
                    return;
                }

                shift = desiredCenter - (weightedCenter / totalWeight);
                shift = Math.max(-MAX_SHIFT, Math.min(MAX_SHIFT, shift));

                /*
                 * The title divider spans the full inner box. Keep every rendered
                 * line inside that same horizontal range. A long line that already
                 * reaches the divider therefore limits the optical correction rather
                 * than being pushed beyond it.
                 */
                minimumShift = Math.ceil((innerRect.left + DIVIDER_SAFE_INSET) - minimumLeft);
                maximumShift = Math.floor((innerRect.right - DIVIDER_SAFE_INSET) - maximumRight);

                if (minimumShift <= maximumShift) {
                    shift = Math.max(minimumShift, Math.min(maximumShift, shift));
                } else {
                    /* The text itself is wider than the divider; do not compound it. */
                    shift = 0;
                }

                shift = Math.round(shift);
                inner.style.setProperty(SHIFT_PROPERTY, shift + 'px');
                inner.setAttribute('data-optical-shift-x', String(shift));
                inner.setAttribute('data-optical-shift-min', String(minimumShift));
                inner.setAttribute('data-optical-shift-max', String(maximumShift));
            });
        });
    }

    function schedule(inner) {
        if (!inner) return;
        window.requestAnimationFrame(function () {
            measureAndApply(inner);
        });
    }

    function mount(root) {
        var scope = root && root.querySelectorAll ? root : document;
        var candidates = [];

        if (scope.matches && scope.matches(SELECTOR)) candidates.push(scope);
        candidates = candidates.concat(Array.prototype.slice.call(scope.querySelectorAll(SELECTOR)));

        candidates.forEach(function (inner) {
            if (resizeObserver && (!observed || !observed.has(inner))) {
                resizeObserver.observe(inner);
                if (observed) observed.add(inner);
            }
            schedule(inner);
        });
    }

    function recalculateAll() {
        Array.prototype.forEach.call(document.querySelectorAll(SELECTOR), schedule);
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function () { mount(document); }, { once:true });
    } else {
        mount(document);
    }

    if (document.fonts && document.fonts.ready) {
        document.fonts.ready.then(recalculateAll).catch(function () {});
        if (typeof document.fonts.load === 'function') {
            Promise.all([
                document.fonts.load('400 14px YiSunShinMain'),
                document.fonts.load('400 36px YiSunShinMain')
            ]).then(recalculateAll).catch(function () {});
        }
    }

    window.addEventListener('resize', function () {
        window.clearTimeout(resizeTimer);
        resizeTimer = window.setTimeout(recalculateAll, 120);
    }, { passive:true });

    try {
        if (mw && mw.hook) {
            mw.hook('wikipage.content').add(function (content) {
                mount(content && content[0] ? content[0] : document);
            });
        }
    } catch (err) {}

    window.MainPageManifesto = window.MainPageManifesto || {};
    window.MainPageManifesto.recalculate = recalculateAll;
})(window, document, window.mw);