MediaWiki:Common.js: Difference between revisions

Revision as of 12:26, 11 March 2026

/* Menhirs Fate Wiki - Custom Header & Footer */
( function () {
    "use strict";

    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 );

    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-nav-item 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-nav-item 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-nav-item 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 );

    var footer = document.createElement( "div" );
    footer.id = "mf-footer";
    footer.innerHTML = '<div id="mf-footer-main">' +
        '<div class="mf-footer-col"><h4>Contact</h4><div class="mf-social-icons">' +
        '<a href="https://www.youtube.com/@MenhirsFate" target="_blank" rel="noopener" title="YouTube" class="mf-social-yt"><svg viewBox="0 0 24 24" width="36" height="36"><path fill="currentColor" d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31.9 31.9 0 0 0 0 12a31.9 31.9 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31.9 31.9 0 0 0 24 12a31.9 31.9 0 0 0-.5-5.8zM9.6 15.6V8.4l6.3 3.6-6.3 3.6z"/></svg></a>' +
        '<a href="https://discord.gg/menhirsfate" target="_blank" rel="noopener" title="Discord" class="mf-social-dc"><svg viewBox="0 0 24 24" width="36" height="36"><path fill="currentColor" d="M20.3 4.4A19.6 19.6 0 0 0 15.5 3a14 14 0 0 0-.6 1.3 18.2 18.2 0 0 0-5.8 0A14 14 0 0 0 8.5 3 19.6 19.6 0 0 0 3.7 4.4 20.5 20.5 0 0 0 .2 17.6a19.8 19.8 0 0 0 6 3 14.7 14.7 0 0 0 1.3-2.1 12.8 12.8 0 0 1-2-.9l.5-.4a14.1 14.1 0 0 0 12 0l.5.4a12.8 12.8 0 0 1-2 .9 14.7 14.7 0 0 0 1.3 2.1 19.8 19.8 0 0 0 6-3A20.5 20.5 0 0 0 20.3 4.4zM8 14.8c-1.1 0-2-1-2-2.3s.9-2.3 2-2.3 2.1 1 2 2.3-.9 2.3-2 2.3zm8 0c-1.1 0-2-1-2-2.3s.9-2.3 2-2.3 2.1 1 2 2.3-.9 2.3-2 2.3z"/></svg></a>' +
        '<a href="https://www.facebook.com/MenhirsFate" target="_blank" rel="noopener" title="Facebook" class="mf-social-fb"><svg viewBox="0 0 24 24" width="36" height="36"><circle cx="12" cy="12" r="12" fill="currentColor"/><path fill="#111" d="M16 12.4h-2.5v7.1h-3v-7.1H9V9.8h1.5V8.1c0-1.2.6-3.1 3.1-3.1h2.3v2.5h-1.7c-.3 0-.7.1-.7.7v1.6H16l-.3 2.6z"/></svg></a>' +
        '</div></div>' +
        '<div class="mf-footer-col"><h4>Information</h4>' +
        '<a href="https://www.menhirsfate.com/contact-us/">Contact Us</a>' +
        '<a href="https://www.menhirsfate.com/volunteer-application/">Volunteer Application</a>' +
        '<a href="https://www.menhirsfate.com/my-account/">My Account</a>' +
        '<a href="https://www.menhirsfate.com/policies/">Policies</a>' +
        '<a href="https://www.menhirsfate.com/terms-and-conditions/">Terms and Conditions</a>' +
        '<a href="https://www.menhirsfate.com/branding-guidelines/">Branding Guidelines</a></div>' +
        '<div class="mf-footer-col"><h4>Wiki</h4>' +
        '<a href="/wiki/Main_Page">Main Page</a>' +
        '<a href="/wiki/Special:RecentChanges">Recent Changes</a>' +
        '<a href="/wiki/Special:AllPages">All Pages</a>' +
        '<a href="/wiki/Special:Categories">Categories</a></div>' +
        '</div>' +
        '<div id="mf-footer-copy">Copyright &copy; ' + new Date().getFullYear() + ' Menhirs Fate</div>';

    document.body.appendChild( footer );

    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" );
        }
    } );

    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" );
        } );
    } );

}() );