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
* 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">▾</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 */
}() );