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.

/* EDFM: two small, purely presentational enhancements. Neither is required
 * for the site to function -- both degrade gracefully with JS off -- and
 * neither is achievable in pure CSS, which is why they exist here instead
 * of in MediaWiki:Common.css. Kept deliberately tiny: no framework, no
 * build step, vanilla DOM APIs only.
 */
( function () {
	'use strict';

	/* 1. Eyebrow placement (see Template:Article header, .edfm-eyebrow in
	 * Common.css). MediaWiki always renders the real #firstHeading (the
	 * page's H1) before the article body in the DOM -- there is no
	 * template or CSS hook that lets wikitext content appear earlier than
	 * that. The eyebrow is authored as ordinary wikitext at the top of the
	 * article; this just moves that already-rendered, already-accessible
	 * element to sit visually above the title instead of below it. If this
	 * script doesn't run for any reason, the eyebrow still renders --
	 * directly under the title rather than above it -- so nothing breaks,
	 * this only affects placement.
	 */
	function placeEyebrow() {
		var eyebrow = document.querySelector( '.edfm-eyebrow' );
		var heading = document.getElementById( 'firstHeading' );
		if ( eyebrow && heading && heading.parentNode ) {
			heading.parentNode.insertBefore( eyebrow, heading );
		}
	}

	/* 2. "You are here" sidebar highlighting. MediaWiki's default sidebar
	 * has no built-in current-page indication -- this compares each
	 * sidebar link's URL to the current page and flags the match so
	 * Common.css can style it (see .edfm-nav-current). Wrapped in try/catch
	 * per-link only so one malformed href can't stop the rest from being
	 * checked.
	 */
	function highlightCurrentNavLink() {
		var links = document.querySelectorAll( '#mw-panel .vector-menu-content-list a[href]' );
		var herePath = window.location.pathname;
		for ( var i = 0; i < links.length; i++ ) {
			var a = links[ i ];
			try {
				if ( new URL( a.href, window.location.href ).pathname === herePath ) {
					a.parentNode.classList.add( 'edfm-nav-current' );
				}
			} catch ( e ) {
				/* malformed href on this one link -- skip it, not fatal */
			}
		}
	}

	if ( document.readyState === 'loading' ) {
		document.addEventListener( 'DOMContentLoaded', function () {
			placeEyebrow();
			highlightCurrentNavLink();
		} );
	} else {
		placeEyebrow();
		highlightCurrentNavLink();
	}
}() );