Difference between revisions of "MediaWiki:Common.js"

/* Any JavaScript here will be loaded for all users on every page load. */
//<pre>
/** Test if an element has a certain class **************************************
 *
 * Description: Uses regular expressions and caching for better performance.
 */
var hasClass = ( function() {
	var reCache = {};
	return function( element, className ) {
		return ( reCache[className] ? reCache[className] : ( reCache[className] = new RegExp( "(?:\\s|^)" + className + "(?:\\s|$)" ) ) ).test( element.className );
	};
})();

/** Collapsible tables *********************************************************
 *
 * Description: Allows tables to be collapsed, showing only the header.
 * See [[wikipedia:Wikipedia:NavFrame]].
 */

var autoCollapse = 2;
var collapseCaption = 'hide';
var expandCaption = 'show';

function collapseTable( tableIndex ) {
	var Button = document.getElementById( 'collapseButton' + tableIndex );
	var Table = document.getElementById( 'collapsibleTable' + tableIndex );

	if ( !Table || !Button ) {
		return false;
	}

	var Rows = Table.rows;

	if ( Button.firstChild.data == collapseCaption ) {
		for ( var i = 1; i < Rows.length; i++ ) {
			Rows[i].style.display = 'none';
		}
		Button.firstChild.data = expandCaption;
	} else {
		for ( var i = 1; i < Rows.length; i++ ) {
			Rows[i].style.display = Rows[0].style.display;
		}
		Button.firstChild.data = collapseCaption;
	}
}

function createCollapseButtons() {
	var tableIndex = 0;
	var NavigationBoxes = new Object();
	var Tables = document.getElementsByTagName( 'table' );

	for ( var i = 0; i < Tables.length; i++ ) {
		if ( hasClass( Tables[i], 'collapsible' ) ) {
			/* only add button and increment count if there is a header row to work with */
			var HeaderRow = Tables[i].getElementsByTagName( 'tr' )[0];
			if ( !HeaderRow ) {
				continue;
			}
			var Header = HeaderRow.getElementsByTagName( 'th' )[0];
			if ( !Header ) {
				continue;
			}

			NavigationBoxes[tableIndex] = Tables[i];
			Tables[i].setAttribute( 'id', 'collapsibleTable' + tableIndex );

			var Button = document.createElement( 'span' );
			var ButtonLink = document.createElement( 'a' );
			var ButtonText = document.createTextNode( collapseCaption );

			Button.style.styleFloat = 'right';
			Button.style.cssFloat = 'right';
			Button.style.fontWeight = 'normal';
			Button.style.textAlign = 'right';
			Button.style.width = '6em';

			ButtonLink.style.color = Header.style.color;
			ButtonLink.setAttribute( 'id', 'collapseButton' + tableIndex );
			ButtonLink.setAttribute( 'href', 'javascript:collapseTable(' + tableIndex + ');' );
			ButtonLink.appendChild( ButtonText );

			Button.appendChild( document.createTextNode( '[' ) );
			Button.appendChild( ButtonLink );
			Button.appendChild( document.createTextNode( ']' ) );

			Header.insertBefore( Button, Header.childNodes[0] );
			tableIndex++;
		}
	}

	for ( var i = 0;  i < tableIndex; i++ ) {
		if (
			hasClass( NavigationBoxes[i], 'collapsed' ) ||
			( tableIndex >= autoCollapse && hasClass( NavigationBoxes[i], 'autocollapse' ) )
		)
		{
			collapseTable( i );
		}
	}
}

addOnloadHook( createCollapseButtons );

///////////////////////////////////////////////////////////////////////////////////////////////////////////
// ADVANCED AJAX AUTO-REFRESHING ARTICLES
// Code courtesy of "pcj" of WoWWiki.
// Coding style fixes & code comments by Jack Phoenix <jack@countervandalism.net>
// Date: 7 October 2010
///////////////////////////////////////////////////////////////////////////////////////////////////////////

// Array of special pages where AJAX RC is active.
// Use *canonical* names (see page source, the value of wgCanonicalSpecialPageName if you don't know it)
ajaxPages = [ 'Recentchanges', 'Watchlist', 'Log' ];

// Internationalizable texts, courtesy of wikia:User:Grunny
var refreshText = 'Automatically refresh:';
if( typeof AjaxRCRefreshText == 'string' ) {
	refreshText = AjaxRCRefreshText;
}

var refreshHover = 'Enable auto-refreshing page loads';
if( typeof AjaxRCRefreshHoverText == 'string' ) {
	refreshHover = AjaxRCRefreshHoverText;
}

/**
 * Sets a cookie with the given options
 * @param c_name String: name of the cookie to set
 * @param value String: 'on' or 'off'
 * @param expiredays Integer: The cookie expires after this many days
 */
function setCookie( c_name, value, expiredays ) {
	var exdate = new Date();
	exdate.setDate( exdate.getDate() + expiredays );
	document.cookie = c_name + '=' + escape( value ) + ( ( expiredays === null ) ? '' : ';expires=' + exdate.toGMTString() );
}

/**
 * Gets a cookie with the specified name
 * @param c_name String: cookie name
 * @return Cookie name or nothing
 */
function getCookie( c_name ) {
	if( document.cookie.length > 0 ) {
		c_start = document.cookie.indexOf( c_name + '=' );
		if( c_start != -1 ) {
			c_start = c_start + c_name.length + 1;
			c_end = document.cookie.indexOf( ';', c_start );
			if( c_end == -1 ) {
				c_end = document.cookie.length;
			}
			return unescape( document.cookie.substring( c_start, c_end ) );
		}
	}
	return '';
}

// @todo FIXME: use MediaWiki's AJAX framework?
function getXmlHttpRequestObject() {
	if( window.XMLHttpRequest ) {
		return new XMLHttpRequest(); // Not Internet Explorer
	} else if( window.ActiveXObject ) {
		return new ActiveXObject( "Microsoft.XMLHTTP" ); // Internet Explorer
	} else {
		// fail silently
	}
}

getRCDataRO = getXmlHttpRequestObject();
var cr = new RegExp( "\r", 'gm' );
var lf = new RegExp( "\n", 'gm' );
var endText = new RegExp( '</div>[\t\s]*?<!-- end content -->[\t\s]*?<div class="visualClear">', 'mi' );
var rcTimer;
var rcRefresh = 60000;

function preloadAJAXRC() {
	if( skin == 'monaco' ) {
		s = 1;
	} else {
		s = 0;
	}

	ajaxRCCookie = ( getCookie( 'ajaxload-' + wgPageName ) == 'on' ) ? true : false;
	document.getElementsByTagName( 'h1' )[0].innerHTML += ' <span style="font-size: xx-small; border-bottom: 1px dotted; cursor:help;" title="' + refreshHover + '">' + refreshText + '</span><input type="checkbox" id="ajaxRCtoggle" onClick="toggleRC();">';
	document.getElementById( 'ajaxRCtoggle' ).checked = ajaxRCCookie;
	if( getCookie( 'ajaxload-' + wgPageName ) == 'on' ) {
		loadRCData();
	}
}

function toggleRC() {
	if( document.getElementById( 'ajaxRCtoggle' ).checked === true ) {
		setCookie( 'ajaxload-' + wgPageName, 'on', 30 );
		loadRCData();
	} else {
		setCookie( 'ajaxload-' + wgPageName, 'off', 30 );
		clearTimeout( rcTimer );
	}
}

function loadRCData() {
	if( getRCDataRO.readyState == 4 || getRCDataRO.readyState === 0 ) {
		if( location.href.indexOf( '/wiki/' ) ) {
			rcURL = 'http://' + location.hostname + '/wiki/' + wgPageName + location.search;
		} else {
			rcURL = 'http://' + location.hostname + '/' + wgPageName + location.search;
		}

		getRCDataRO.open( 'GET', rcURL, true );
		getRCDataRO.onreadystatechange = parseRCdata;
		getRCDataRO.send( null );
	}
}

function parseRCdata() {
	if( getRCDataRO.readyState == 4 ) {
		textFilter = new RegExp( '<div id="bodyContent">.*?</div>[\t\s]*?<!-- end content -->[\t\s]*?<div class="visualClear">', 'i' );
		rawRCdata = getRCDataRO.responseText.replace( cr, '' ).replace( lf, '' );
		filteredRCdata = textFilter.exec( rawRCdata );
		updatedText = filteredRCdata[0].replace( '<div id="bodyContent">', '' ).replace( endText, '' );
		document.getElementById( 'bodyContent' ).innerHTML = updatedText;
		rcTimer = setTimeout( 'loadRCData();', rcRefresh );
	}
}

// Only load this JS for certain, pre-defined special pages
for( x in ajaxPages ) {
	if( wgCanonicalSpecialPageName == ajaxPages[x] ) {
		addOnloadHook( preloadAJAXRC );
	}
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////
// END OF AJAX AUTO-REFRESH
///////////////////////////////////////////////////////////////////////////////////////////////////////////

/*
    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 = new Array();

	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 );
}
/* end getElementsByClass */

/** Username replace function ([[template:USERNAME]]) *******************************
  * Inserts user name into <span class="insertusername"></span>
  */
function UserNameReplace() {
	if( typeof( disableUsernameReplace ) != 'undefined' && disableUsernameReplace || wgUserName == null ) {
		return;
    }
	var spans = getElementsByClass( 'insertusername', null, 'span' );

	for( var i = 0; i < spans.length; i++ ) {
		spans[i].innerHTML = wgUserName;
	}
}
addOnloadHook( UserNameReplace );

// **************************************************
// Experimental JavaScript countdown timer (Splarka)
// Version 0.0.3
// **************************************************
//
// Usage example:
//  <span class="countdown" style="display:none;">
//  Only <span class="countdowndate">January 01 2007 00:00:00 PST</span> until New years.
//  </span>
//  <span class="nocountdown">JavaScript disabled.</span>
function updatetimer( i ) {
	var now = new Date();
	var then = timers[i].eventdate;
	var diff = count = Math.floor( ( then.getTime() - now.getTime( ) ) / 1000 );

	// catch bad date strings
	if( isNaN( diff ) ) {
		timers[i].firstChild.nodeValue = '** ' + timers[i].eventdate + ' **';
		return;
	}

	// determine plus/minus
	if( diff < 0 ) {
		diff = -diff;
		var tpm = ' ';
	} else {
		var tpm = ' ';
	}

	// calcuate the diff
	var left = ( diff % 60 ) + ' seconds';
	diff = Math.floor( diff / 60 );
	if( diff > 0 ) {
		left = ( diff % 60 ) + ' minutes ' + left;
	}
	diff = Math.floor( diff / 60 );
	if( diff > 0 ) {
		left = ( diff % 24 ) + ' hours ' + left;
	}
	diff = Math.floor( diff / 24 );
	if( diff > 0 ) {
		left = diff + ' days ' + left;
	}
	timers[i].firstChild.nodeValue = tpm + left;

	// a setInterval() is more efficient, but calling setTimeout()
	// makes errors break the script rather than infinitely recurse
	timeouts[i] = setTimeout( 'updatetimer(' + i + ')', 1000 );
}

function checktimers() {
	// hide 'nocountdown' and show 'countdown'
	var nocountdowns = getElementsByClassName( document, 'span', 'nocountdown' );
	for( var i in nocountdowns ) {
		nocountdowns[i].style.display = 'none';
	}
	var countdowns = getElementsByClassName( document, 'span', 'countdown' );
	for( var i in countdowns ) {
		countdowns[i].style.display = 'inline';
	}

	//set up global objects timers and timeouts.
	timers = getElementsByClassName( document, 'span', 'countdowndate' ); // global
	timeouts = new Array(); // generic holder for the timeouts, global
	if( timers.length == 0 ) {
		return;
	}
	for( var i in timers ) {
		timers[i].eventdate = new Date( timers[i].firstChild.nodeValue );
		updatetimer( i ); // start it up
	}
}
addOnloadHook( checktimers );

// **************************************************
//  - end -  Experimental JavaScript countdown timer
// **************************************************