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.

/**
 * Pin the main navigation into Citizen's header rail as icon buttons, so the
 * common destinations are one click away instead of hidden behind the hamburger.
 *
 * Citizen leaves <div class="citizen-header__start"> empty and offers no config
 * or hook to populate it, so it is filled here. The hamburger drawer is left
 * completely alone and remains the full menu.
 *
 * URLs come from mw.util.getUrl() rather than being hardcoded, so this keeps
 * working if $wgArticlePath ever changes. The markup deliberately copies the
 * classes Citizen's own rail buttons use (see Preferences.mustache), so the
 * buttons inherit the native look instead of needing bespoke CSS.
 *
 * Icons must exist in the skins.citizen.icons pack (60 of them); home, help,
 * upload, recentChanges and die all do.
 *
 * Failure mode: if a Citizen upgrade renames the slot, querySelector returns
 * null, this exits quietly and the hamburger still has every link.
 */
mw.loader.using( 'mediawiki.util' ).then( function () {
	var slot = document.querySelector( '.citizen-header__start' );

	// Bail if the slot is missing (skin changed) or already filled (double-run).
	if ( !slot || slot.childElementCount > 0 ) {
		return;
	}

	var items = [
		{ title: 'Main Page', icon: 'home', label: 'Main page' },
		{ title: 'Help:Getting started', icon: 'help', label: 'How to edit' },
		{ title: 'Special:Upload', icon: 'upload', label: 'Upload a file' },
		{ title: 'Special:RecentChanges', icon: 'recentChanges', label: 'Recent changes' },
		{ title: 'Special:Random', icon: 'die', label: 'Random page' }
	];

	items.forEach( function ( item ) {
		var link = document.createElement( 'a' );
		link.href = mw.util.getUrl( item.title );
		link.title = item.label;
		link.className = 'citizen-header__item citizen-cdx-button--size-large ' +
			'cdx-button cdx-button--fake-button cdx-button--fake-button--enabled ' +
			'cdx-button--weight-quiet cdx-button--icon-only';

		var icon = document.createElement( 'span' );
		icon.className = 'citizen-ui-icon mw-ui-icon-wikimedia-' + item.icon;

		// cdx-button--icon-only hides this visually but keeps it for screen readers.
		var text = document.createElement( 'span' );
		text.textContent = item.label;

		link.appendChild( icon );
		link.appendChild( text );
		slot.appendChild( link );
	} );
} );