MediaWiki:Gadget-TabSystem.js

// Source: http://www.dustindiaz.com/getelementsbyclass/
// getElementsByClass, which complements getElementById and getElementsByTagName, returns an array of all subelements of ''node'' that are tagged with a specific CSS class (''searchClass'') and are of the tag name ''tag''. If tag is null, it searches for any suitable elements regardless of the tag name.
// Example: getElementsByClass( 'infobox', document.getElementById( 'content' ), 'div' ) selects the same elements as the CSS declaration #content div.infobox

function getElementsByClass( searchClass, node, tag ) {
	var classElements = [];

	if( node === null ) {
		node = document;
	}

	if( tag === null ) {
		tag = '*';
	}

	var els = node.getElementsByTagName( tag );
	var elsLen = els.length;
	var tester = new ClassTester( searchClass );

	for( i = 0, j = 0; i < elsLen; i++ ) {
		if( tester.isMatch( els[i] ) ) {
			classElements[j] = els[i];
			j++;
		}
	}

	return classElements;
}

function ClassTester( className ) {
	this.regex = new RegExp( "(^|\\s)" + className + "(\\s|$)" );
}

ClassTester.prototype.isMatch = function( element ) {
	return this.regex.test( element.className );
};

// JS Tab System, Jacked and Hacked from the jsprefs in wikibits.js -Dantman

function tabSystem() {
	var tabcontainers = $( 'div.tabcontainer' );
	for( var tc = 0; tc < tabcontainers.length; tc++ ) {
		if ( !tabcontainers[tc] || !document.createElement ) {
			return;
		}
		if ( tabcontainers[tc].nodeName.toLowerCase() == 'a' ) {
			return; // Occasional IE problem
		}
		tabcontainers[tc].className += ' jstabs';
		var sections = [];
		var children = tabcontainers[tc].childNodes;
		var seci = 0;
		var selectedid;
		for ( var i = 0; i < children.length; i++ ) {
			if ( children[i].className && children[i].className.match( /tab/i ) ) {
				children[i].id = 'tabsection-' + seci + '-' + tc;
				children[i].className += ' tabsection';
				if ( navigator.userAgent.indexOf('Opera') || ( navigator.vendor == 'KDE' || ( document.childNodes && !document.all && !navigator.taintEnabled ) ) ) {
					children[i].className += ' tabsection operatabsection';
				}
				var legends = getElementsByClass( 'tab', children[i], 'div' );
				sections[seci] = {};
				legends[0].className = 'mainTab';
				sections[seci].html = legends[0].innerHTML;
				sections[seci].secid = children[i].id;
				seci++;
				if ( sections.length != 1 ) {
					children[i].style.display = 'none';
				} else {
					selectedid = children[i].id;
				}
			}
		}
		var toc = document.createElement( 'ul' );
		toc.className = 'tabtoc';
		toc.id = 'tabtoc-' + tc;
		toc.selectedid = selectedid;
		for ( i = 0; i < sections.length; i++ ) {
			var li = document.createElement( 'li' );
			if ( i === 0 ) {
				li.className = 'selected';
			}
			var a = document.createElement( 'a' );
			a.href = '#' + sections[i].secid;
			a.onmousedown = a.onclick = uncoverTabSection;
			a.innerHTML = sections[i].html;
			a.tc = tc;
			a.secid = sections[i].secid;
			li.appendChild( a );
			toc.appendChild( li );
		}
		tabcontainers[tc].parentNode.insertBefore( toc, tabcontainers[tc] );
	}
}

function uncoverTabSection() {
	var oldsecid = this.parentNode.parentNode.selectedid;
	var newsec = document.getElementById( this.secid );
	if ( oldsecid != this.secid ) {
		var ul = document.getElementById( 'tabtoc-' + this.tc );
		document.getElementById( oldsecid ).style.display = 'none';
		newsec.style.display = 'block';
		$(window).scroll();
		$(window).resize();
		ul.selectedid = this.secid;
		var lis = ul.getElementsByTagName( 'li' );
		for ( var i = 0; i< lis.length; i++ ) {
			lis[i].className = '';
		}
		this.parentNode.className = 'selected';
		setTimeout(function() { $('.slideshow-current').click(); }, 100);
	}
	return false;
}

/* Fix hidden section links */
window.onhashchange = function() {
	escapedHash = $.escapeSelector(decodeURI(location.hash.split('#').pop()));
	tabId = $('#' + escapedHash).closest('.tabsection').attr('id');
	if (tabId) {
		$('a[href="#' + tabId + '"]').click();
	}
	hiddenParents = $('#' + escapedHash).parents('.mw-collapsed');
	if (hiddenParents.length) {
		hiddenParents.each(function() {
			$(this).find('.mw-collapsible-toggle-collapsed').first().click();
		});
	}
	if (tabId || hiddenParents.length) {
		location.href = location.hash;
	}
}
setTimeout(function() {
	if (location.hash) {
		window.dispatchEvent(new HashChangeEvent('hashchange'));
	}
}, 100);

$( tabSystem );