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.
/* 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">← 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">▾</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">▾</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">▾</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>' +
'<div id="mf-search-bar"><div id="mf-search-inner"><form action="/wiki/Special:Search" id="mf-search-form"><input type="text" name="search" id="mf-search-input" placeholder="Search the wiki..." autocomplete="off" /><button type="submit" id="mf-search-btn" 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></form><div id="mf-search-suggestions"></div></div></div>';
document.body.insertBefore( header, document.body.firstChild );
/* ── 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" );
} );
} );
/* ── Search bar suggestions ──────────────────────────────────────────────── */
var searchInput = document.getElementById( "mf-search-input" );
var suggestionsBox = document.getElementById( "mf-search-suggestions" );
var searchDebounce = null;
if ( searchInput && suggestionsBox ) {
searchInput.addEventListener( "input", function () {
var query = searchInput.value.trim();
clearTimeout( searchDebounce );
if ( query.length < 2 ) {
suggestionsBox.style.display = "none";
suggestionsBox.innerHTML = "";
return;
}
searchDebounce = setTimeout( function () {
new mw.Api().get( {
action: "opensearch",
search: query,
limit: 8,
namespace: 0
} ).then( function ( data ) {
var titles = data[ 1 ] || [];
if ( titles.length === 0 ) {
suggestionsBox.style.display = "none";
suggestionsBox.innerHTML = "";
return;
}
suggestionsBox.innerHTML = "";
titles.forEach( function ( title ) {
var a = document.createElement( "a" );
a.href = mw.util.getUrl( title );
a.textContent = title;
a.className = "mf-suggestion";
suggestionsBox.appendChild( a );
} );
suggestionsBox.style.display = "block";
} );
}, 200 );
} );
searchInput.addEventListener( "focus", function () {
if ( suggestionsBox.children.length > 0 ) {
suggestionsBox.style.display = "block";
}
} );
document.addEventListener( "click", function ( e ) {
if ( !e.target.closest( "#mf-search-bar" ) ) {
suggestionsBox.style.display = "none";
}
} );
}
}() );