MediaWiki:DynamicNav.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)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

// Faster Dynamic Navigation

/**
 * Translations of texts
 * If you would like to provide a translation, please request for translator rights at [[I:A]] first!
 * To translate, follow how it is done for other languages.
 * Do not translate the "barhide", "barshow", "titlehide" and "titleshow" strings,
 * just add your translation on the right side of the line after the colon.
 * Please also keep the arrows intact as you translate.
 */
var NavigationMessages = {
	'en': {
		'barhide': '(hide)',
		'barshow': '(show)',
		'titlehide': 'hide contents',
		'titleshow': 'show contents'
	}
}

// Please leave the lines below alone if you are just here to translate, thank you!
var NavigationUserLanguage = mw.config.get('wgUserLanguage');
// Match the message to the user's defined language (maintained for backward-compatibility)
if (NavigationMessages[NavigationUserLanguage] == undefined) {
	// Fallback to English if translations are not available
	var NavigationUserLanguage = "en";
}
var NavigationBarHide = NavigationMessages[NavigationUserLanguage]['barhide'];
var NavigationBarShow = NavigationMessages[NavigationUserLanguage]['barshow'];
var NavigationTitleHide = NavigationMessages[NavigationUserLanguage]['titlehide'];
var NavigationTitleShow = NavigationMessages[NavigationUserLanguage]['titleshow'];

function hasClass(element, cls) {
	return element?.classList?.contains?.(cls);
}

// shows and hides content and picture (if available) of navigation bars
function toggleNavigationBar(e) {
	e = e || window.event;
	var target = e.target || e.srcElement;
	var NavFrame, NavToggle;

	if (hasClass(target, 'navigation')) {
		NavFrame = target.parentNode.parentNode;
		NavToggle = target;
	} else if (hasClass(target, 'NavHead')) {
		NavFrame = target.parentNode;

		if (hasClass(target.lastChild, 'navigation'))
		NavToggle = target.lastChild;
	else
		return;
	}

	if (NavToggle.firstChild.data == NavigationBarHide) {
		for (var NavChild=NavFrame.firstChild; NavChild != null; NavChild=NavChild.nextSibling) {
			if (hasClass(NavChild, 'NavContent') || hasClass(NavChild, 'NavPic'))
				NavChild.style.display = 'none';
		}
		NavToggle.firstChild.data = NavigationBarShow;
		NavToggle.parentNode.setAttribute('title', NavigationTitleShow);
	} else if (NavToggle.firstChild.data == NavigationBarShow) {
		for (var NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling) {
			if (hasClass(NavChild, 'NavContent') || hasClass(NavChild, 'NavPic'))
				NavChild.style.display = 'block';
		}
		NavToggle.firstChild.data = NavigationBarHide;
		NavToggle.parentNode.setAttribute('title', NavigationTitleHide);
	}
}
 
// adds show/hide-button to navigation bars
function createNavigationBarToggleButton() {
	// iterate over all div elements
	var NavFrame=document.getElementsByTagName("div");

	for (var i=0; i < NavFrame.length; i++) {
		if (!hasClass(NavFrame[i], "NavFrame"))
			continue;

		var NavToggle = document.createElement("a");
		var NavToggleText = document.createTextNode(hasClass(NavFrame[i], "selected") ? NavigationBarShow : NavigationBarHide);

		NavToggle.className = 'navigation';
		NavToggle.appendChild(NavToggleText);

		// add NavToggle-Button as element inside of NavHead
		for (var j=0; j < NavFrame[i].childNodes.length; j++) {
			var NavHead = NavFrame[i].childNodes[j];

			if (!hasClass(NavHead, "NavHead"))
				continue;
			NavHead.appendChild(NavToggle);
			NavHead.onclick = toggleNavigationBar;

			// only bother to emulate click if if toggle button was added
			if (document.createEvent) { // DOM 2 and DOM 3 compliant browsers
				var e = document.createEvent("MouseEvents");
				e.initMouseEvent("click", true,true, window, 0,0,0,0,0, false,false,false,false, 0, null);
				NavHead.dispatchEvent(e);
			} else if (NavHead.fireEvent) { // IE
				NavHead.fireEvent("onclick");
			}
			break;
		}
	}
}

$( createNavigationBarToggleButton );