MediaWiki:Common.js: Difference between revisions

Latest revision as of 20:15, 12 March 2026

/* Menhirs Fate Wiki - Custom Header
 * Menu items are loaded from MediaWiki:Mf-navigation
 * Edit that page to change nav links, dropdowns, and ordering.
 */
( function () {
    "use strict";

    /* ── Google Fonts ─────────────────────────────────────────────────── */
    var link = document.createElement( "link" );
    link.rel = "stylesheet";
    link.href = "https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&display=swap";
    document.head.appendChild( link );

    /* ── Build header shell ───────────────────────────────────────────── */
    var header = document.createElement( "div" );
    header.id = "mf-header";
    header.innerHTML =
        '<div id="mf-header-top">' +
            '<a href="https://www.menhirsfate.com/" id="mf-logo-link">' +
                '<img src="https://www.menhirsfate.com/wp-content/uploads/2024/08/white-logo-scaled-120x65.png" alt="Menhirs Fate" id="mf-logo" />' +
            '</a>' +
        '</div>' +
        '<nav id="mf-ribbon">' +
            '<div id="mf-ribbon-inner">' +
                '<span id="mf-nav-loading" style="color:#844725;font-style:italic;padding:0 17px;line-height:50px;">Loading…</span>' +
            '</div>' +
        '</nav>';
    document.body.insertBefore( header, document.body.firstChild );

    /* ── Hamburger button ─────────────────────────────────────────────── */
    var burger = document.createElement( "button" );
    burger.id = "mf-burger";
    burger.setAttribute( "aria-label", "Toggle menu" );
    burger.innerHTML = "<span></span><span></span><span></span>";
    document.getElementById( "mf-header-top" ).appendChild( burger );

    var ribbon = document.getElementById( "mf-ribbon-inner" );

    burger.addEventListener( "click", function () {
        ribbon.classList.toggle( "mf-open" );
        burger.classList.toggle( "mf-open" );
    } );

    /* ── Parse navigation config ──────────────────────────────────────── */
    function parseNavConfig( text ) {
        var items = [];
        /* Strip all HTML comments before parsing */
        text = text.replace( /<!--[\s\S]*?-->/g, "" );
        var lines = text.split( "\n" );
        var current = null;

        lines.forEach( function ( line ) {
            /* skip blanks */
            if ( /^\s*$/.test( line ) ) return;

            var subMatch = line.match( /^\s*\*\*\s+(.+?)\s*\|\s*(.+?)\s*$/ );
            if ( subMatch && current ) {
                current.children.push( { label: subMatch[1], url: subMatch[2].trim() } );
                return;
            }

            var dropMatch = line.match( /^\s*\*\s+(.+?)\s*>\s*$/ );
            if ( dropMatch ) {
                current = { label: dropMatch[1].trim(), children: [] };
                items.push( current );
                return;
            }

            var linkMatch = line.match( /^\s*\*\s+(.+?)\s*\|\s*(.+?)\s*$/ );
            if ( linkMatch ) {
                var parts = linkMatch[2].split( "|" ).map( function(s){ return s.trim(); } );
                var url = parts[0];
                var flags = parts.slice(1);
                current = null;
                items.push( { label: linkMatch[1].trim(), url: url, flags: flags } );
            }
        } );

        return items;
    }

    /* ── Build nav HTML from parsed items ─────────────────────────────── */
    function buildNav( items ) {
        var html = "";
        var dropdownCount = 0;

        items.forEach( function ( item ) {
            if ( item.children ) {
                /* dropdown */
                html += '<div class="mf-has-dropdown">' +
                    '<span class="mf-nav-label">' + item.label + ' <span class="mf-caret">&#9662;</span></span>' +
                    '<div class="mf-dropdown">';
                item.children.forEach( function ( child ) {
                    html += '<a href="' + child.url + '">' + child.label + '</a>';
                } );
                html += '</div></div>';
                dropdownCount++;
            } else {
                /* simple link */
                var cls = "mf-nav-item";
                if ( item.flags && item.flags.indexOf( "back" ) !== -1 ) {
                    cls += " mf-nav-back";
                }
                html += '<a href="' + item.url + '" class="' + cls + '">' + item.label + '</a>';
            }
        } );

        /* Search — inline input for desktop, icon-only for narrow screens */
        html += '<div id="mf-search-wrap">' +
            '<form action="/wiki/Special:Search" id="mf-search-form">' +
                '<input type="text" name="search" id="mf-search-input" placeholder="Search…" autocomplete="off" />' +
                '<button type="submit" id="mf-search-btn" aria-label="Search">' +
                    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>' +
                '</button>' +
            '</form>' +
            '<button type="button" id="mf-search-icon" aria-label="Search">' +
                '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>' +
            '</button>' +
            '<div id="mf-search-suggestions"></div>' +
        '</div>';

        /* Update grid columns: back-link(auto) + N nav items(1fr each) + search(auto) */
        var navItemCount = 0;
        items.forEach( function(i) { if ( !i.flags || i.flags.indexOf("back") === -1 ) navItemCount++; } );

        return { html: html, navItemCount: navItemCount };
    }

    /* ── Fetch config and render ──────────────────────────────────────── */
    mw.loader.using( "mediawiki.api" ).then( function () {
    new mw.Api().get( {
        action: "query",
        titles: "MediaWiki:Mf-navigation",
        prop: "revisions",
        rvprop: "content",
        rvslots: "main",
        format: "json"
    } ).then( function ( data ) {
        var pages = data.query.pages;
        var page = pages[ Object.keys( pages )[0] ];
        if ( !page.revisions ) return;

        var raw = page.revisions[0].slots.main["*"];
        var items = parseNavConfig( raw );
        var result = buildNav( items );

        ribbon.innerHTML = result.html;

        /* Set grid columns dynamically */
        var cols = "auto repeat(" + result.navItemCount + ", 1fr) auto";
        ribbon.style.gridTemplateColumns = cols;

        initDropdowns();
        initSearch();
    } );

    /* ── Dropdown toggle logic ────────────────────────────────────────── */
    function initDropdowns() {
        var labels = document.querySelectorAll( ".mf-has-dropdown > .mf-nav-label" );
        Array.prototype.forEach.call( labels, function ( label ) {
            label.addEventListener( "click", function ( e ) {
                e.stopPropagation();
                var parent = this.parentNode;
                var open = document.querySelectorAll( ".mf-has-dropdown.mf-dropdown-open" );
                Array.prototype.forEach.call( open, function ( s ) {
                    if ( s !== parent ) s.classList.remove( "mf-dropdown-open" );
                } );
                parent.classList.toggle( "mf-dropdown-open" );
            } );
        } );

        document.addEventListener( "click", function ( e ) {
            if ( !e.target.closest( ".mf-has-dropdown" ) ) {
                var open = document.querySelectorAll( ".mf-has-dropdown.mf-dropdown-open" );
                Array.prototype.forEach.call( open, function ( el ) {
                    el.classList.remove( "mf-dropdown-open" );
                } );
            }
        } );

        /* Close mobile menu on link click */
        ribbon.addEventListener( "click", function ( e ) {
            if ( e.target.tagName === "A" ) {
                ribbon.classList.remove( "mf-open" );
                burger.classList.remove( "mf-open" );
            }
        } );
    }

    /* ── Search with suggestions ──────────────────────────────────────── */
    function initSearch() {
        var input = document.getElementById( "mf-search-input" );
        var sugBox = document.getElementById( "mf-search-suggestions" );
        var iconBtn = document.getElementById( "mf-search-icon" );
        var debounce = null;

        if ( !input || !sugBox ) return;

        /* Icon button (shown on narrow screens) expands inline search */
        var searchSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>';
        var closeSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
        if ( iconBtn ) {
            iconBtn.addEventListener( "click", function () {
                var wrap = document.getElementById( "mf-search-wrap" );
                wrap.classList.toggle( "mf-search-expanded" );
                if ( wrap.classList.contains( "mf-search-expanded" ) ) {
                    iconBtn.innerHTML = closeSvg;
                    input.focus();
                } else {
                    iconBtn.innerHTML = searchSvg;
                    input.value = "";
                    sugBox.style.display = "none";
                    sugBox.innerHTML = "";
                }
            } );
        }

        /* Autocomplete suggestions */
        input.addEventListener( "input", function () {
            var q = input.value.trim();
            clearTimeout( debounce );
            if ( q.length < 2 ) {
                sugBox.style.display = "none";
                sugBox.innerHTML = "";
                return;
            }
            debounce = setTimeout( function () {
                mw.loader.using( "mediawiki.api" ).then( function () { new mw.Api().get( {
                    action: "opensearch",
                    search: q,
                    limit: 6,
                    namespace: 0
                } ).then( function ( data ) {
                    var titles = data[1] || [];
                    if ( !titles.length ) {
                        sugBox.style.display = "none";
                        sugBox.innerHTML = "";
                        return;
                    }
                    sugBox.innerHTML = "";
                    titles.forEach( function ( t ) {
                        var a = document.createElement( "a" );
                        a.href = mw.util.getUrl( t );
                        a.textContent = t;
                        a.className = "mf-suggestion";
                        sugBox.appendChild( a );
                    } );
                    sugBox.style.display = "block";
                } );
                } ); /* end mw.loader.using in search */
            }, 200 );
        } );

        input.addEventListener( "focus", function () {
            if ( sugBox.children.length ) sugBox.style.display = "block";
        } );

        document.addEventListener( "click", function ( e ) {
            if ( !e.target.closest( "#mf-search-wrap" ) ) {
                sugBox.style.display = "none";
            }
        } );
    }

    } ); /* end mw.loader.using */

    /* ── Fix sitename typo wherever it appears ────────────────────────── */
    document.querySelectorAll( ".citizen-footer__sitetitle, .citizen-footer a, .mw-logo-wordmark" ).forEach( function ( el ) {
        if ( el.textContent.indexOf( "Mehirs" ) !== -1 ) {
            el.textContent = el.textContent.replace( /Mehirs/g, "Menhirs" );
        }
    } );

    /* ── Citizen header z-index ───────────────────────────────────────── */
    /* Handled in Common.css */

}() );