MediaWiki:Common.js: Difference between revisions

From GearKnob Wiki
Jump to navigationJump to search
(Added tab support.)
 
(Trying an import of Halopedia's TabSystem.js to try and get the system working.)
 
Line 1: Line 1:
/**
function getElementsByClass( searchClass, node, tag ) {
* JS Tab System, jacked and hacked from the jsprefs in wikibits.js
var classElements = [];
*
 
* Original code by Dantman
if( node === null ) {
* Refactored a bit by Jack Phoenix on 11 April 2014
node = document;
* Support for linking to a particular tab by MatmaRex on 30 December 2016.
}
* @note Should be rewritten to properly use jQuery like how mediawiki.special.preferences.js does.
 
*/
if( tag === null ) {
var TabSystem = {
tag = '*';
/**
}
* @property {boolean}
 
* Is the user's browser a KHTML-based one (usually, but not always, Konqueror)?
var els = node.getElementsByTagName( tag );
*/
var elsLen = els.length;
isKHTML: ( navigator.vendor == 'KDE' || ( document.childNodes && !document.all && !navigator.taintEnabled ) ),
var tester = new ClassTester( searchClass );
 
/**
for( i = 0, j = 0; i < elsLen; i++ ) {
* @property {boolean}
if( tester.isMatch( els[i] ) ) {
* Is the user's browser Opera?
classElements[j] = els[i];
*/
j++;
isOpera: navigator.userAgent.toLowerCase().indexOf( 'opera' ) != -1,
}
}
/*
 
Written by Jonathan Snook, http://www.snook.ca/jonathan
return classElements;
Add-ons by Robert Nyman, http://www.robertnyman.com
}
Author says "The credit comment is all it takes, no license. Go crazy with it!:-)"
 
From http://www.robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/
function ClassTester( className ) {
*/
this.regex = new RegExp( "(^|\\s)" + className + "(\\s|$)" );
getElementsByClassName: function( oElm, strTagName, oClassNames ) {
}
var arrReturnElements = [];
 
if ( typeof oElm.getElementsByClassName == 'function' ) {
ClassTester.prototype.isMatch = function( element ) {
/* Use a native implementation where possible FF3, Saf3.2, Opera 9.5 */
return this.regex.test( element.className );
var arrNativeReturn = oElm.getElementsByClassName( oClassNames );
};
if ( strTagName == '*' ) {
 
return arrNativeReturn;
// JS Tab System, Jacked and Hacked from the jsprefs in wikibits.js -Dantman
}
 
for ( var h = 0; h < arrNativeReturn.length; h++ ) {
function tabSystem() {
if ( arrNativeReturn[h].tagName.toLowerCase() == strTagName.toLowerCase() ) {
var tabcontainers = $( 'div.tabcontainer' );
arrReturnElements[arrReturnElements.length] = arrNativeReturn[h];
for( var tc = 0; tc < tabcontainers.length; tc++ ) {
}
if ( !tabcontainers[tc] || !document.createElement ) {
}
return;
return arrReturnElements;
}
}
if ( tabcontainers[tc].nodeName.toLowerCase() == 'a' ) {
var arrElements = ( strTagName == '*' && oElm.all ) ? oElm.all : oElm.getElementsByTagName( strTagName );
return; // Occasional IE problem
var arrRegExpClassNames = [];
if ( typeof oClassNames == 'object' ) {
for ( var i = 0; i < oClassNames.length; i++ ) {
arrRegExpClassNames[arrRegExpClassNames.length] =
new RegExp( "(^|\\s)" + oClassNames[i].replace( /\-/g, "\\-" ) + "(\\s|$)" );
}
} else {
arrRegExpClassNames[arrRegExpClassNames.length] =
new RegExp( "(^|\\s)" + oClassNames.replace( /\-/g, "\\-" ) + "(\\s|$)" );
}
}
tabcontainers[tc].className += ' jstabs';
var oElement;
var sections = [];
var bMatchesAll;
var children = tabcontainers[tc].childNodes;
for ( var j = 0; j < arrElements.length; j++ ) {
var seci = 0;
oElement = arrElements[j];
var selectedid;
bMatchesAll = true;
for ( var i = 0; i < children.length; i++ ) {
for ( var k = 0; k < arrRegExpClassNames.length; k++ ) {
if ( children[i].className && children[i].className.match( /tab/i ) ) {
if ( !arrRegExpClassNames[k].test( oElement.className ) ) {
children[i].id = 'tabsection-' + seci + '-' + tc;
bMatchesAll = false;
children[i].className += ' tabsection';
break;
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' );
if ( bMatchesAll ) {
sections[seci] = {};
arrReturnElements[arrReturnElements.length] = oElement;
legends[0].className = 'mainTab';
}
if ( legends[0] && legends[0].firstChild.nodeValue ) {
}
sections[seci].text = legends[0].firstChild.nodeValue;
} else {
return arrReturnElements;
sections[seci].text = '# ' + seci;
},
/**
* Main function that performs all the magic on all div elements that have
* class="tab" and are inside a div that has class="tabcontainer".
*/
main: function() {
var tabcontainers = TabSystem.getElementsByClassName( document, '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;
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';
// Opera and KHTML-based browsers get a special class
if ( TabSystem.isOpera || TabSystem.isKHTML ) {
children[i].className += ' tabsection operatabsection';
}
var legends = TabSystem.getElementsByClassName( children[i], 'div', 'tab' );
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 {
var selectedid = children[i].id;
}
}
}
}
sections[seci].secid = children[i].id;
seci++;
var toc = document.createElement( 'ul' );
if ( sections.length != 1 ) {
toc.className = 'tabtoc';
children[i].style.display = 'none';
toc.id = 'tabtoc-' + tc;
} else {
toc.selectedid = selectedid;
selectedid = children[i].id;
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.appendChild( document.createTextNode( sections[i].text ) );
a.secid = sections[i].secid;
li.appendChild( a );
toc.appendChild( li );
// Capture current value of variables in the closure
( function ( i, a ) {
$( window ).on( 'hashchange', function () {
if ( location.hash === '#' + sections[i].secid ) {
TabSystem.uncoverTabSection( toc, a );
}
} )
if ( location.hash === '#' + sections[i].secid ) {
TabSystem.uncoverTabSection( toc, a );
}
} )( i, a );
}
}
tabcontainers[tc].parentNode.insertBefore( toc, tabcontainers[tc] );
}
}
},
var toc = document.createElement( 'ul' );
toc.className = 'tabtoc';
/**
toc.id = 'tabtoc-' + tc;
* Show the contents of a tab section when the user clicks on the tab.
toc.selectedid = selectedid;
*
for ( i = 0; i < sections.length; i++ ) {
* @return {boolean} Always false
var li = document.createElement( 'li' );
*/
if ( i === 0 ) {
uncoverTabSection: function( ul, a ) {
li.className = 'selected';
var oldsecid = ul.selectedid;
var newsec = document.getElementById( a.secid );
if ( oldsecid != a.secid ) {
document.getElementById( oldsecid ).style.display = 'none';
newsec.style.display = 'block';
ul.selectedid = a.secid;
var lis = ul.getElementsByTagName( 'li' );
for ( var i = 0; i < lis.length; i++ ) {
lis[i].className = '';
}
}
a.parentNode.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'));
}
}
return false;
}
}
};
}
 
// Attach the onload handler using jQuery.
function uncoverTabSection() {
$( function() {
var oldsecid = this.parentNode.parentNode.selectedid;
TabSystem.main();
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() {
escapedHash = $.escapeSelector(decodeURI(location.hash.split('#').pop()));
tabId = $('#' + escapedHash).closest('.tabsection').attr('id');
if ( tabId ) {
$('a[href="#' + tabId + '"]').click();
location.href = location.hash;
}
}
 
$( tabSystem );

Latest revision as of 17:00, 10 November 2021

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() {
	escapedHash = $.escapeSelector(decodeURI(location.hash.split('#').pop()));
	tabId = $('#' + escapedHash).closest('.tabsection').attr('id');
	if ( tabId ) {
		$('a[href="#' + tabId + '"]').click();
		location.href = location.hash;
	}
}

$( tabSystem );