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'; if ( legends[0] && legends[0].firstChild.nodeValue ) { sections[seci].text = legends[0].firstChild.nodeValue; } else { sections[seci].text = '# ' + seci; }				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.appendChild( document.createTextNode( sections[i].text ) ); a.tc = tc; a.secid = sections[i].secid; li.appendChild( a ); toc.appendChild( li ); }		tabcontainers[tc].parentNode.insertBefore( toc, tabcontainers[tc] ); if (location.hash) { window.dispatchEvent(new HashChangeEvent('hashchange')); }	} }

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; }

window.onhashchange = function { tabId = $(location.hash).closest('.tabsection').attr('id'); if ( tabId ) { $('a[href="#' + tabId + '"]').click; location.href = location.hash; } }

$( tabSystem );