미디어위키:CategoryNav.js

/* =========================================
COASTLINE: BLACK ICE - CategoryNav
대문 프레임 공통 기하 모델과 상단 카테고리 SVG 네비
========================================= */

/*
새 공통 기능에는 프로젝트 접두사를 사용하지 않는다.
window.CLBI.categoryNav는 기존 Common.js 호출과의 호환을 위해서만 유지한다.

이 파일은 대문 프레임 기하의 단일 소유자다.
CategoryPillar.js, PortalSectionNav.js, BottomGuideNav.js는 SVG DOM을 다시 파싱하지 않고
window.PortalFrame이 제공하는 동일한 경계와 좌표 변환만 사용한다.
*/

(function (window, document, mw) {
    'use strict';

    var SVG_NS = 'http://www.w3.org/2000/svg';
    var XLINK_NS = 'http://www.w3.org/1999/xlink';
    var FRAME_BUILD = '20260721-portal-frame-section-fit-008';

    var ITEMS = [
        { key:'era', label:'시대', title:'시대' },
        { key:'settings', label:'설정', title:'설정' },
        { key:'project', label:'프로젝트', title:'프로젝트:소개' },
        { key:'corporations', label:'기업 및 공동체', title:'기업_및_공동체' },
        { key:'military', label:'군, 정치집단', title:'군_정치집단' }
    ];

    /*
    대문 프레임의 공유 규격.
    cut은 폭에 따라 변하지 않는다. 1880px 디자인 폭과 축소 셸에서 같은 경사를 유지한다.
    */
    var SPEC = Object.freeze ? Object.freeze({
        buttonHeight:22,
        gap:2,
        cut:10,
        outerBorder:1,
        insetLineOffset:1.5,
        count:ITEMS.length
    }) : {
        buttonHeight:22,
        gap:2,
        cut:10,
        outerBorder:1,
        insetLineOffset:1.5,
        count:ITEMS.length
    };

    function buildPath(title) {
        if (typeof window.buildWikiPath === 'function') {
            return window.buildWikiPath(title);
        }
        return '/index.php/' + encodeURI(String(title || '').replace(/ /g, '_'));
    }

    function readWidth(element) {
        var rect;
        var width;

        if (!element) return 0;
        rect = element.getBoundingClientRect ? element.getBoundingClientRect() : null;
        width = rect ? Math.floor(rect.width || 0) : 0;

        if (!width && element.clientWidth) width = Math.floor(element.clientWidth);
        return width || 0;
    }

    function getRenderableWidth(nav, mount) {
        var candidates = [
            nav,
            mount,
            mount ? mount.parentElement : null,
            mount && mount.closest ? mount.closest('.main-portal') : null,
            document.querySelector('.liberty-content-main .mw-parser-output'),
            document.querySelector('.liberty-content-main'),
            document.querySelector('.liberty-content')
        ];
        var i;
        var width;

        for (i = 0; i < candidates.length; i++) {
            width = readWidth(candidates[i]);
            if (width > 0) return width;
        }

        if (document.documentElement && document.documentElement.clientWidth) {
            return Math.max(320, Math.floor(document.documentElement.clientWidth - 48));
        }
        return 1200;
    }

    function itemIndex(keyOrIndex) {
        var key;
        var i;

        if (typeof keyOrIndex === 'number' && isFinite(keyOrIndex)) {
            i = Math.floor(keyOrIndex);
            return i >= 0 && i < ITEMS.length ? i : -1;
        }

        key = String(keyOrIndex || '');
        for (i = 0; i < ITEMS.length; i++) {
            if (ITEMS[i].key === key) return i;
        }
        return -1;
    }

    function calculateGeometry(width) {
        var usableWidth = Math.max(320, Math.floor(width || 0));
        var count = ITEMS.length;
        var top = [];
        var bottom = [];
        var center = count / 2;
        var i;
        var x;

        /*
        사선은 버튼의 속성이 아니라 count + 1개의 공유 경계의 속성이다.
        버튼 i의 우변과 버튼 i+1의 좌변은 반드시 같은 경계를 사용한다.
        */
        for (i = 0; i <= count; i++) {
            x = Math.round((usableWidth * i) / count);

            if (i === 0 || i === count) {
                top.push(x);
                bottom.push(x);
            } else if (i < center) {
                top.push(x - SPEC.cut);
                bottom.push(x);
            } else {
                top.push(x);
                bottom.push(x - SPEC.cut);
            }
        }

        return {
            version:FRAME_BUILD,
            width:usableWidth,
            height:SPEC.buttonHeight,
            count:count,
            cut:SPEC.cut,
            gap:SPEC.gap,
            top:top,
            bottom:bottom
        };
    }

    function clonePoints(points) {
        return (points || []).map(function (point) {
            return [Number(point[0]), Number(point[1])];
        });
    }

    function getSegmentPoints(keyOrIndex, geometry) {
        var index = itemIndex(keyOrIndex);
        var halfGap;
        var leftOffset;
        var rightOffset;

        if (!geometry || index < 0 || index >= geometry.count) return null;

        halfGap = geometry.gap / 2;
        leftOffset = index === 0 ? 0 : halfGap;
        rightOffset = index === geometry.count - 1 ? 0 : halfGap;

        return [
            [geometry.top[index] + leftOffset, 0],
            [geometry.top[index + 1] - rightOffset, 0],
            [geometry.bottom[index + 1] - rightOffset, geometry.height],
            [geometry.bottom[index] + leftOffset, geometry.height]
        ];
    }

    function getSegmentEdge(keyOrIndex, side, geometry) {
        var points = getSegmentPoints(keyOrIndex, geometry);

        if (!points) return null;
        if (side === 'left') return [points[0], points[3]];
        if (side === 'right') return [points[1], points[2]];
        return null;
    }

    function lineXAtY(pointA, pointB, y) {
        var dy;

        if (!pointA || !pointB) return NaN;
        dy = pointB[1] - pointA[1];
        if (Math.abs(dy) < 0.000001) return pointA[0];
        return pointA[0] + (y - pointA[1]) * (pointB[0] - pointA[0]) / dy;
    }

    function getCentroid(points) {
        var totalX = 0;
        var totalY = 0;

        points.forEach(function (point) {
            totalX += point[0];
            totalY += point[1];
        });
        return [totalX / points.length, totalY / points.length];
    }

    function intersectLines(lineA, lineB) {
        var p = lineA.point;
        var r = lineA.direction;
        var q = lineB.point;
        var s = lineB.direction;
        var cross = r[0] * s[1] - r[1] * s[0];
        var qMinusP;
        var t;

        if (Math.abs(cross) < 0.000001) return [p[0], p[1]];

        qMinusP = [q[0] - p[0], q[1] - p[1]];
        t = (qMinusP[0] * s[1] - qMinusP[1] * s[0]) / cross;
        return [p[0] + t * r[0], p[1] + t * r[1]];
    }

    function insetPolygon(points, distance) {
        var center = getCentroid(points);
        var shiftedLines = [];
        var count = points.length;
        var i;

        for (i = 0; i < count; i++) {
            var start = points[i];
            var end = points[(i + 1) % count];
            var dx = end[0] - start[0];
            var dy = end[1] - start[1];
            var length = Math.sqrt(dx * dx + dy * dy) || 1;
            var normal = [-dy / length, dx / length];
            var midpoint = [(start[0] + end[0]) / 2, (start[1] + end[1]) / 2];
            var towardCenter = [center[0] - midpoint[0], center[1] - midpoint[1]];

            if (normal[0] * towardCenter[0] + normal[1] * towardCenter[1] < 0) {
                normal[0] *= -1;
                normal[1] *= -1;
            }

            shiftedLines.push({
                point:[
                    start[0] + normal[0] * distance,
                    start[1] + normal[1] * distance
                ],
                direction:[dx, dy]
            });
        }

        return shiftedLines.map(function (line, index) {
            var previous = shiftedLines[(index + count - 1) % count];
            return intersectLines(previous, line);
        });
    }

    function roundCoordinate(value) {
        return Math.round(Number(value) * 100) / 100;
    }

    function pointsToString(points) {
        return points.map(function (point) {
            return roundCoordinate(point[0]) + ',' + roundCoordinate(point[1]);
        }).join(' ');
    }

    function createSvgElement(name) {
        return document.createElementNS(SVG_NS, name);
    }

    function createPolygon(className, points) {
        var polygon = createSvgElement('polygon');
        polygon.setAttribute('class', className);
        polygon.setAttribute('points', pointsToString(points));
        return polygon;
    }

    function createEdgeLine(className, start, end) {
        var line = createSvgElement('line');

        line.setAttribute('class', className);
        line.setAttribute('x1', roundCoordinate(start[0]));
        line.setAttribute('y1', roundCoordinate(start[1]));
        line.setAttribute('x2', roundCoordinate(end[0]));
        line.setAttribute('y2', roundCoordinate(end[1]));
        line.setAttribute('vector-effect', 'non-scaling-stroke');
        line.setAttribute('pointer-events', 'none');
        return line;
    }

    function createSegment(item, index, geometry) {
        var anchor = createSvgElement('a');
        var outerPoints = getSegmentPoints(index, geometry);
        var surfacePoints = insetPolygon(outerPoints, SPEC.outerBorder);
        var insetPoints = insetPolygon(outerPoints, SPEC.insetLineOffset);
        var outer = createPolygon('portal-cat-edge', outerPoints);
        var surface = createPolygon('portal-cat-surface', surfacePoints);
        var topEdge = createEdgeLine('portal-cat-inset portal-cat-inset-top', insetPoints[0], insetPoints[1]);
        var rightEdge = createEdgeLine('portal-cat-inset portal-cat-inset-right', insetPoints[1], insetPoints[2]);
        var bottomEdge = createEdgeLine('portal-cat-inset portal-cat-inset-bottom', insetPoints[2], insetPoints[3]);
        var leftEdge = createEdgeLine('portal-cat-inset portal-cat-inset-left', insetPoints[3], insetPoints[0]);
        var hit = createPolygon('portal-cat-hit', outerPoints);
        var text = createSvgElement('text');
        var href = buildPath(item.title);
        var center = getCentroid(surfacePoints);

        anchor.setAttribute('class', 'portal-cat-anchor');
        anchor.setAttribute('href', href);
        anchor.setAttributeNS(XLINK_NS, 'xlink:href', href);
        anchor.setAttribute('aria-label', item.label);
        anchor.setAttribute('data-category-key', item.key);

        outer.setAttribute('pointer-events', 'none');
        surface.setAttribute('pointer-events', 'none');
        hit.setAttribute('pointer-events', 'all');

        text.setAttribute('class', 'portal-cat-label');
        text.setAttribute('x', Math.round(center[0]));
        text.setAttribute('y', Math.round(geometry.height / 2) + 1);
        text.setAttribute('font-size', '12');
        text.setAttribute('font-weight', '700');
        text.setAttribute('text-anchor', 'middle');
        text.setAttribute('dominant-baseline', 'middle');
        text.setAttribute('pointer-events', 'none');
        text.textContent = item.label;

        anchor.appendChild(outer);
        anchor.appendChild(surface);
        anchor.appendChild(topEdge);
        anchor.appendChild(rightEdge);
        anchor.appendChild(bottomEdge);
        anchor.appendChild(leftEdge);
        anchor.appendChild(hit);
        anchor.appendChild(text);
        return anchor;
    }

    function clearNode(node) {
        while (node && node.firstChild) node.removeChild(node.firstChild);
    }

    function setAttributeIfChanged(node, name, value) {
        var next = String(value);
        if (!node || !node.getAttribute || node.getAttribute(name) === next) return false;
        node.setAttribute(name, next);
        return true;
    }

    function findTopSvg(node) {
        var current = node;
        var svg;

        if (!current) return null;
        if (current.matches && current.matches('.portal-category-svg:not(.portal-guide-svg)')) {
            return current;
        }

        if (current.querySelector) {
            svg = current.querySelector('[data-component="category-nav"] .portal-category-svg');
            if (!svg) svg = current.querySelector('.portal-category-svg:not(.portal-guide-svg)');
            if (svg) return svg;
        }

        while (current && current !== document) {
            if (current.__portalFrameSvg) return current.__portalFrameSvg;
            current = current.parentNode;
        }
        return null;
    }

    function getGeometry(node) {
        var current = node;
        var svg;

        while (current && current !== document) {
            if (current.__portalFrameGeometry && current.__portalFrameGeometry.version === FRAME_BUILD) {
                return current.__portalFrameGeometry;
            }
            current = current.parentNode;
        }

        svg = findTopSvg(node);
        return svg && svg.__portalFrameGeometry && svg.__portalFrameGeometry.version === FRAME_BUILD
            ? svg.__portalFrameGeometry
            : null;
    }

    function attachGeometry(mount, nav, svg, geometry) {
        [mount, nav, svg].forEach(function (node) {
            if (!node) return;
            node.__portalFrameGeometry = geometry;
            node.__portalFrameSvg = svg;
            if (node.setAttribute) setAttributeIfChanged(node, 'data-portal-frame-build', FRAME_BUILD);
        });
    }

    function getSvgPadding(svg) {
        var geometry = getGeometry(svg);
        var nav = svg && svg.closest ? svg.closest('.portal-category-nav') : null;
        var style;
        var rect;
        var renderedHeight;
        var scale;
        var top;
        var bottom;

        if (!geometry || !nav || !window.getComputedStyle) return { top:3, bottom:3 };

        style = window.getComputedStyle(nav);
        rect = svg.getBoundingClientRect ? svg.getBoundingClientRect() : null;
        renderedHeight = rect && rect.height ? rect.height : Number(svg.clientHeight || 0);
        scale = renderedHeight > 0 ? geometry.height / renderedHeight : 1;
        top = parseFloat(style.paddingTop) || 0;
        bottom = parseFloat(style.paddingBottom) || 0;

        return {
            top:top > 0 ? top * scale : 3,
            bottom:bottom > 0 ? bottom * scale : 3
        };
    }

    function getElementScale(element) {
        var rect;
        var width;
        var height;

        if (!element || !element.getBoundingClientRect) {
            return { x:1, y:1 };
        }

        rect = element.getBoundingClientRect();
        width = Number(element.clientWidth || element.offsetWidth || 0);
        height = Number(element.clientHeight || element.offsetHeight || 0);

        return {
            x:width > 0 && rect.width > 0 ? rect.width / width : 1,
            y:height > 0 && rect.height > 0 ? rect.height / height : 1
        };
    }

    function mapXToElement(topNode, targetElement, x) {
        var svg = findTopSvg(topNode);
        var geometry = getGeometry(svg);
        var sourceRect;
        var targetRect;
        var scaleX;

        if (!svg || !geometry || !targetElement || !targetElement.getBoundingClientRect) return NaN;

        sourceRect = svg.getBoundingClientRect();
        targetRect = targetElement.getBoundingClientRect();
        if (!(sourceRect.width > 0) || !(targetRect.width > 0)) return NaN;

        /*
        길라잡이는 001에서 승인된 화면 좌표 폭을 그대로 유지한다.
        이 함수는 의도적으로 화면 px 차이를 반환하며, 하단 작품 섹션의
        로컬 좌표 투영은 projectSegmentEdgeToElement()가 별도로 담당한다.
        */
        scaleX = sourceRect.width / geometry.width;
        return sourceRect.left + Number(x) * scaleX - targetRect.left;
    }

    function projectSegmentEdgeToElement(topNode, keyOrIndex, side, targetElement, startY, endY) {
        var svg = findTopSvg(topNode);
        var geometry = getGeometry(svg);
        var edge = getSegmentEdge(keyOrIndex, side, geometry);
        var sourceRect;
        var targetRect;
        var targetScale;
        var sourceScaleX;
        var sourceScaleY;
        var screenA;
        var screenB;

        if (!svg || !geometry || !edge || !targetElement || !targetElement.getBoundingClientRect) {
            return null;
        }

        sourceRect = svg.getBoundingClientRect();
        targetRect = targetElement.getBoundingClientRect();
        targetScale = getElementScale(targetElement);
        if (
            !(sourceRect.width > 0) ||
            !(sourceRect.height > 0) ||
            !(targetRect.width > 0) ||
            !(targetScale.x > 0) ||
            !(targetScale.y > 0)
        ) {
            return null;
        }

        sourceScaleX = sourceRect.width / geometry.width;
        sourceScaleY = sourceRect.height / geometry.height;
        screenA = [sourceRect.left + edge[0][0] * sourceScaleX, sourceRect.top + edge[0][1] * sourceScaleY];
        screenB = [sourceRect.left + edge[1][0] * sourceScaleX, sourceRect.top + edge[1][1] * sourceScaleY];

        function localPoint(y) {
            var localY = Number(y);
            var targetScreenY = targetRect.top + localY * targetScale.y;
            var screenX = lineXAtY(screenA, screenB, targetScreenY);
            return [(screenX - targetRect.left) / targetScale.x, localY];
        }

        return [localPoint(startY), localPoint(endY)];
    }

    function syncDependents(mount) {
        var portal = mount && mount.closest ? mount.closest('.main-portal') : null;

        if (window.CategoryPillar && typeof window.CategoryPillar.renderAll === 'function') {
            window.CategoryPillar.renderAll(mount || document);
        }
        if (window.PortalSectionNav && typeof window.PortalSectionNav.renderAll === 'function') {
            window.PortalSectionNav.renderAll(portal || document);
        }
        if (window.BottomGuideNav && typeof window.BottomGuideNav.render === 'function') {
            window.BottomGuideNav.render(portal || document);
        }
    }

    function dispatchFrameUpdate(mount, nav, svg, geometry) {
        var detail = { mount:mount, nav:nav, svg:svg, geometry:geometry, version:FRAME_BUILD };
        var event;

        try {
            event = new window.CustomEvent('portalframe:updated', { detail:detail });
        } catch (err) {
            event = document.createEvent('CustomEvent');
            event.initCustomEvent('portalframe:updated', false, false, detail);
        }
        document.dispatchEvent(event);
    }

    function buildSvg(width) {
        var geometry = calculateGeometry(width);
        var svg = createSvgElement('svg');

        svg.setAttribute('class', 'portal-category-svg');
        svg.setAttribute('viewBox', '0 0 ' + geometry.width + ' ' + geometry.height);
        svg.setAttribute('width', '100%');
        svg.setAttribute('height', '100%');
        svg.setAttribute('preserveAspectRatio', 'none');
        svg.setAttribute('aria-hidden', 'false');
        svg.setAttribute('data-portal-frame-build', FRAME_BUILD);

        ITEMS.forEach(function (item, index) {
            svg.appendChild(createSegment(item, index, geometry));
        });

        return {
            svg:svg,
            geometry:geometry,
            key:[geometry.width, geometry.height, geometry.cut, geometry.gap, ITEMS.length, FRAME_BUILD].join('|')
        };
    }

    function renderSvgIntoNav(nav, mount) {
        var result = buildSvg(getRenderableWidth(nav, mount));
        var existing = nav.querySelector('svg.portal-category-svg');

        if (nav.__categoryNavRenderKey === result.key && existing) {
            attachGeometry(mount, nav, existing, nav.__portalFrameGeometry || result.geometry);
            return false;
        }

        nav.__categoryNavRenderKey = result.key;
        clearNode(nav);
        nav.appendChild(result.svg);
        attachGeometry(mount, nav, result.svg, result.geometry);
        dispatchFrameUpdate(mount, nav, result.svg, result.geometry);
        syncDependents(mount);
        return true;
    }

    function scheduleRender(nav, mount) {
        if (!nav || nav.__categoryNavFrame) return;

        nav.__categoryNavFrame = window.requestAnimationFrame(function () {
            nav.__categoryNavFrame = null;
            renderSvgIntoNav(nav, mount);
        });
    }

    function renderCategoryNavMount(mount) {
        var nav;
        var observer;

        if (!mount) return false;

        nav = mount.querySelector(':scope > .portal-category-nav');
        if (!nav) {
            clearNode(mount);
            nav = document.createElement('nav');
            nav.className = 'portal-category-nav';
            nav.setAttribute('aria-label', 'Main categories');
            mount.appendChild(nav);
        }

        setAttributeIfChanged(nav, 'data-portal-frame-build', FRAME_BUILD);
        setAttributeIfChanged(mount, 'data-category-nav-rendered', '1');
        setAttributeIfChanged(mount, 'data-portal-frame-build', FRAME_BUILD);
        scheduleRender(nav, mount);

        if (!mount.__categoryNavObserver && window.ResizeObserver) {
            observer = new window.ResizeObserver(function () {
                scheduleRender(nav, mount);
            });
            observer.observe(mount);
            mount.__categoryNavObserver = observer;
        } else if (!window.ResizeObserver && !mount.__categoryNavResizeBound) {
            mount.__categoryNavResizeBound = true;
            window.addEventListener('resize', function () {
                scheduleRender(nav, mount);
            }, { passive:true });
        }
        return true;
    }

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

        if (scope.matches && scope.matches('[data-component="category-nav"]')) mounts.push(scope);
        Array.prototype.forEach.call(
            scope.querySelectorAll('[data-component="category-nav"]'),
            function (mount) {
                if (mounts.indexOf(mount) === -1) mounts.push(mount);
            }
        );

        mounts.forEach(renderCategoryNavMount);
        return mounts.length;
    }

    var frameApi = {
        version:FRAME_BUILD,
        spec:SPEC,
        items:ITEMS.slice(),
        calculateGeometry:calculateGeometry,
        getGeometry:getGeometry,
        getTopSvg:findTopSvg,
        getSegmentPoints:function (keyOrIndex, geometry) {
            return clonePoints(getSegmentPoints(keyOrIndex, geometry));
        },
        getSegmentEdge:function (keyOrIndex, side, geometry) {
            return clonePoints(getSegmentEdge(keyOrIndex, side, geometry));
        },
        lineXAtY:lineXAtY,
        insetPolygon:function (points, distance) {
            return clonePoints(insetPolygon(points, distance));
        },
        roundCoordinate:roundCoordinate,
        getSvgPadding:getSvgPadding,
        getElementScale:getElementScale,
        mapXToElement:mapXToElement,
        projectSegmentEdgeToElement:projectSegmentEdgeToElement
    };

    var categoryApi = {
        version:FRAME_BUILD,
        frameVersion:FRAME_BUILD,
        init:renderAllCategoryNavs,
        renderMount:renderCategoryNavMount,
        renderAll:renderAllCategoryNavs,
        geometry:frameApi
    };

    window.PortalFrame = frameApi;
    window.CategoryNav = categoryApi;
    window.CLBI = window.CLBI || {};
    window.CLBI.categoryNav = categoryApi;

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function () {
            renderAllCategoryNavs(document);
        });
    } else {
        renderAllCategoryNavs(document);
    }

    if (mw && mw.hook) {
        mw.hook('wikipage.content').add(function ($content) {
            var root = $content && $content[0] ? $content[0] : document;
            renderAllCategoryNavs(root);
        });
    }
}(window, document, window.mw));