MediaWiki:Common.js
MediaWiki interface page
More actions
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.
/* \u2500\u2500\u2500 Menhirs Fate Wiki \u2014 Custom Header & Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Static parchment-banner header and dark footer.\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n( 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">← 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">▾</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">▾</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">▾</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>'
].join( '\n' );
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 © ' + new Date().getFullYear() + ' Menhirs Fate',
'</div>'
].join( '\n' );
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 dropdownToggles = document.querySelectorAll( '.mf-has-dropdown > .mf-nav-label' );
Array.prototype.forEach.call( dropdownToggles, function ( label ) {
label.addEventListener( 'click', function ( e ) {
e.stopPropagation();
var parent = this.parentNode;
var siblings = document.querySelectorAll( '.mf-has-dropdown.mf-dropdown-open' );
Array.prototype.forEach.call( siblings, 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' );
} );
} );
}() );