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.

/* Menhirs Fate Wiki - Custom Header */
( 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 );

    /* ── Custom Header ─────────────────────────────────────────────────────────────── */
    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">' +
            '<a href="https://www.menhirsfate.com/" class="mf-nav-item mf-nav-back">&larr; MenhirsFate.com</a>' +
            '<a href="/wiki/Main_Page" class="mf-nav-item">Home</a>' +
            '<div class="mf-has-dropdown"><span class="mf-nav-label">Nations <span class="mf-caret">&#9662;</span></span><div class="mf-dropdown">' +
                '<a href="/wiki/The_Crownlands/Avereaux">Avereaux</a>' +
                '<a href="/wiki/The_Wonder">The Wonder</a>' +
                '<a href="/wiki/Valdraeth">Valdraeth</a>' +
                '<a href="/wiki/The_Urdrevan_People">The Urdrevan People</a>' +
                '<a href="/wiki/The_Republic_of_Portavas">The Republic of Portavas</a>' +
                '<a href="/wiki/The_Hammerstadt_Charter">The Hammerstadt Charter</a>' +
                '<a href="/wiki/Kairos">Kairos</a>' +
                '<a href="/wiki/Syradonia">Syradonia</a>' +
                '<a href="/wiki/Morvalis">Morvalis</a>' +
            '</div></div>' +
            '<div class="mf-has-dropdown"><span class="mf-nav-label">Gameplay <span class="mf-caret">&#9662;</span></span><div class="mf-dropdown">' +
                '<a href="/wiki/Look_and_Feel">Look and Feel</a>' +
                '<a href="/wiki/Basic_Skills">Basic Skills</a>' +
                '<a href="/wiki/Magical_Skills">Magical Skills</a>' +
                '<a href="/wiki/Monstering">Monstering</a>' +
                '<a href="/wiki/Accessibility">Accessibility</a>' +
            '</div></div>' +
            '<div class="mf-has-dropdown"><span class="mf-nav-label">Resources <span class="mf-caret">&#9662;</span></span><div class="mf-dropdown">' +
                '<a href="/wiki/Funded_Builds">Funded Builds</a>' +
                '<a href="/wiki/Camping_Information">Camping Information</a>' +
                '<a href="/wiki/Special:Categories">Browse by Category</a>' +
            '</div></div>' +
        '</div></nav>';
    document.body.insertBefore( header, document.body.firstChild );

    /* ── Fix sitename typo wherever it appears in Citizen UI ──────────────── */
    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" );
        }
    } );

    /* ── Mobile hamburger ────────────────────────────────────────────────────────────── */
    var ribbon = document.getElementById( "mf-ribbon-inner" );
    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 );

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

    ribbon.addEventListener( "click", function ( e ) {
        if ( e.target.tagName === "A" ) {
            ribbon.classList.remove( "mf-open" );
            burger.classList.remove( "mf-open" );
        }
    } );

    /* ── Dropdown toggles ────────────────────────────────────────────────────────────── */
    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 () {
        var open = document.querySelectorAll( ".mf-has-dropdown.mf-dropdown-open" );
        Array.prototype.forEach.call( open, function ( el ) {
            el.classList.remove( "mf-dropdown-open" );
        } );
    } );

}() );