• Wikisimpsons needs more Featured Article, Picture, Quote, Episode and Comprehensive article nominations!
  • Wikisimpsons has a Discord server! Click here for your invite! Join to talk about the wiki, Simpsons and Tapped Out news, or just to talk to other users.
  • Make an account! It's easy, free, and your work on the wiki can be attributed to you.
TwitterFacebookDiscord

Difference between revisions of "MediaWiki:Common.js"

Wikisimpsons - The Simpsons Wiki
(fixes and coding style tweaks)
(new)
(13 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
/* Any JavaScript here will be loaded for all users on every page load. */
 
/* Any JavaScript here will be loaded for all users on every page load. */
//<pre>
 
///////////////////////////////////////////////////////////////////////////////////////////////////////////
 
// 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.
+
/* Any JavaScript here will be loaded for all users on every page load. */
// 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
+
/* Test if an element has a certain class **************************************
var refreshText = 'Automatically refresh:';
+
  *
if( typeof AjaxRCRefreshText == 'string' ) {
+
  * Description: Uses regular expressions and caching for better performance.
refreshText = AjaxRCRefreshText;
+
  * Maintainers: [[User:Mike Dillon]], [[User:R. Koot]], [[User:SG]]
}
 
 
 
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();
+
var hasClass = (function () {
exdate.setDate( exdate.getDate() + expiredays );
+
    var reCache = {};
document.cookie = c_name + '=' + escape( value ) + ( ( expiredays === null ) ? '' : ';expires=' + exdate.toGMTString() );
+
    return function (element, className) {
}
+
        return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className);
 +
    };
 +
})();
 +
  
/**
+
/** Collapsible tables *********************************************************
  * Gets a cookie with the specified name
+
*
  * @param c_name String: cookie name
+
  * Description: Allows tables to be collapsed, showing only the header. See
  * @return Cookie name or nothing
+
  *               [[Wikipedia:NavFrame]].
 +
  * Maintainers: [[User:R. Koot]]
 
  */
 
  */
function getCookie( c_name ) {
+
if( document.cookie.length > 0 ) {
+
var autoCollapse = 2;
c_start = document.cookie.indexOf( c_name + '=' );
+
var collapseCaption = "hide";
if( c_start != -1 ) {
+
var expandCaption = "show";
c_start = c_start + c_name.length + 1;
+
c_end = document.cookie.indexOf( ';', c_start );
+
function collapseTable( tableIndex )
if( c_end == -1 ) {
+
{
c_end = document.cookie.length;
+
    var Button = document.getElementById( "collapseButton" + tableIndex );
}
+
    var Table = document.getElementById( "collapsibleTable" + tableIndex );
return unescape( document.cookie.substring( c_start, c_end ) );
+
}
+
    if ( !Table || !Button ) {
}
+
        return false;
return '';
+
    }
 +
 +
    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;
 +
    }
 
}
 
}
 
+
// @todo FIXME: use MediaWiki's AJAX framework?
+
function createCollapseButtons()
function getXmlHttpRequestObject() {
+
{
if( window.XMLHttpRequest ) {
+
    var tableIndex = 0;
return new XMLHttpRequest(); // Not Internet Explorer
+
    var NavigationBoxes = new Object();
} else if( window.ActiveXObject ) {
+
    var Tables = document.getElementsByTagName( "table" );
return new ActiveXObject( "Microsoft.XMLHTTP" ); // Internet Explorer
+
} else {
+
    for ( var i = 0; i < Tables.length; i++ ) {
// fail silently
+
        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];
getRCDataRO = getXmlHttpRequestObject();
+
            if (!HeaderRow) continue;
var cr = new RegExp( "\r", 'gm' );
+
            var Header = HeaderRow.getElementsByTagName( "th" )[0];
var lf = new RegExp( "\n", 'gm' );
+
            if (!Header) continue;
var endText = new RegExp( '</div>[\t\s]*?<!-- end content -->[\t\s]*?<div class="visualClear">', 'mi' );
+
var rcTimer;
+
            NavigationBoxes[ tableIndex ] = Tables[i];
var rcRefresh = 60000;
+
            Tables[i].setAttribute( "id", "collapsibleTable" + tableIndex );
 
+
function preloadAJAXRC() {
+
            var Button    = document.createElement( "span" );
if( skin == 'monaco' ) {
+
            var ButtonLink = document.createElement( "a" );
s = 1;
+
            var ButtonText = document.createTextNode( collapseCaption );
} else {
+
s = 0;
+
            Button.style.styleFloat = "right";
}
+
            Button.style.cssFloat = "right";
 
+
            Button.style.fontWeight = "normal";
ajaxRCCookie = ( getCookie( 'ajaxload-' + wgPageName ) == 'on' ) ? true : false;
+
            Button.style.textAlign = "right";
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();">';
+
            Button.style.width = "6em";
document.getElementById( 'ajaxRCtoggle' ).checked = ajaxRCCookie;
+
if( getCookie( 'ajaxload-' + wgPageName ) == 'on' ) {
+
            ButtonLink.style.color = Header.style.color;
loadRCData();
+
            ButtonLink.setAttribute( "id", "collapseButton" + tableIndex );
}
+
            ButtonLink.setAttribute( "href", "javascript:collapseTable(" + tableIndex + ");" );
}
+
            ButtonLink.appendChild( ButtonText );
 
+
function toggleRC() {
+
            Button.appendChild( document.createTextNode( "[" ) );
if( document.getElementById( 'ajaxRCtoggle' ).checked === true ) {
+
            Button.appendChild( ButtonLink );
setCookie( 'ajaxload-' + wgPageName, 'on', 30 );
+
            Button.appendChild( document.createTextNode( "]" ) );
loadRCData();
+
} else {
+
            Header.insertBefore( Button, Header.childNodes[0] );
setCookie( 'ajaxload-' + wgPageName, 'off', 30 );
+
            tableIndex++;
clearTimeout( rcTimer );
+
        }
}
+
    }
}
+
 
+
    for ( var i = 0; i < tableIndex; i++ ) {
function loadRCData() {
+
        if ( hasClass( NavigationBoxes[i], "collapsed" ) || ( tableIndex >= autoCollapse && hasClass( NavigationBoxes[i], "autocollapse" ) ) ) {
if( getRCDataRO.readyState == 4 || getRCDataRO.readyState === 0 ) {
+
            collapseTable( i );
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 );
+
   
 
+
addOnloadHook( createCollapseButtons );
// **************************************************
 
// 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
 
// **************************************************
 

Revision as of 11:08, February 4, 2009

/* Any JavaScript here will be loaded for all users on every page load. */

/* Any JavaScript here will be loaded for all users on every page load. */

/* Test if an element has a certain class **************************************
 *
 * Description: Uses regular expressions and caching for better performance.
 * Maintainers: [[User:Mike Dillon]], [[User:R. Koot]], [[User:SG]]
 */
 
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:NavFrame]].
 *  Maintainers: [[User:R. Koot]]
 */
 
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 );