User:Erutuon/scripts/navFrame.js

Note: You may have to bypass your browser’s cache to see the changes. In addition, after saving a sitewide CSS file such as MediaWiki:Common.css, it will take 5-10 minutes before the changes take effect, even if you clear your cache.

Mozilla / Firefox / Safari: hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (Command-R on a Macintosh);
Konqueror and Chrome: click Reload or press F5;
Opera: clear the cache in Tools → Preferences;
Internet Explorer: hold Ctrl while clicking Refresh, or press Ctrl-F5.

This script lacks a documentation subpage. Please create it.

Useful links: root page • root page’s subpages • links • redirects • your own

(function NavFrameIIFE () {
'use strict';

var NavigationBarHide = 'hide ▲';
var NavigationBarShow = 'show ▼';

function getToggleCategory(element, defaultCategory) {
	if ($(element).find('table').first().is(".translations"))
		return "translations";
	
	var heading = element;
	while ((heading = heading.previousSibling)) {
		if (/[hH][4-6]/.test(heading.nodeName)) {
			if (heading.getElementsByTagName('span')[1])
				heading = heading.getElementsByTagName('span')[0];
			return jQuery(heading).text().toLowerCase()
			// jQuery's .text() is inconsistent about whitespace:
				.replace(/^\s+|\s+$/g, '').replace(/\s+/g, ' ')
				// remove numbers added by the "Auto-number headings" pref:
				.replace(/^[1-9][0-9.]+ ?/, '');
		} else if (/[hH][1-3]/.test(heading.nodeName))
			break;
	}
	
	return defaultCategory;
}

function createNavToggle(navFrame) {
	var navHead, navContent;
	for (var i = 0, children = navFrame.childNodes; i < children.length; ++i) {
		var child = children[i];
		if (child.nodeName === "DIV") {
			var classList = child.classList;
			if (classList.contains("NavHead"))
				navHead = child;
			if (classList.contains("NavContent"))
				navContent = child;
		}
	}
	if (!(navHead && navContent))
		return;
	// Step 1, don't react when a subitem is clicked.
	$(navHead).find("a").on("click", function (e) {
		e.stopPropagation();
	});
			
	// Step 2, toggle visibility when bar is clicked.
	// NOTE This function was chosen due to some funny behaviour in Safari.
	var $navToggle = $('<a>');
	
	$('<span>').addClass('NavToggle')
		.append($navToggle)
		.prependTo(navHead);
	
	navHead.style.cursor = "pointer";
	navHead.onclick = VisibilityToggles.register(getToggleCategory(navFrame, "other boxes"),
		function show() {
			$navToggle.html(NavigationBarHide);
			if (navContent)
				navContent.style.display = "block";
		},
		function hide() {
			$navToggle.html(NavigationBarShow);
			if (navContent)
				navContent.style.display = "none";
		});
}

function enableNavFrames() {
	// NavToggles
	var divs = jQuery(".NavFrame");
	for (var i = 0; i < divs.length; i++)
		createNavToggle(divs[i]);
}

window.listOfToggleEnablingFunctions.push(enableNavFrames);

})();