MediaWiki:Common.js

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


/***************************************
 * Name: hasClass
 * Description: Checks if a element has a specified class name.  Uses regular expressions and caching for better performance.
 * Maintainers (Wikipedia): [[User:Mike Dillon]], [[User:R. Koot]], [[User:SG]]
 * Source: Wikipedia Common.js, imported 2/1/10
 * Additional Notes: This is a utility method used in other methods.
 */
 
var hasClass = (function () {
    var reCache = {};
    return function (element, className) {
        return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className);
    };
})();
 
/***********************************************************
 *  Name: collapseTable
 *  Description: Collapses a single table, showing only the header.
 *  Maintainers: (Wikipedia) [[User:R. Koot]], (Dragon Quest Wiki) [[User:FlyingRagnar]]
 *  Source: Wikipedia Common.js, imported 2/1/10
 *  Additional Notes: This is the primary method used to collapse navigational templates.
 *  This code has been updated to use the jQuery toggle() function.  Various effects were tested, but due
 *  to the fact that multiple <tr>s are being toggled, they did not look good.  As a result, it does just a basic toggle
 *  with no effects.
 */
mw.loader.load( 'jquery.effects.core' );
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 targt = "#collapsibleTable" + tableIndex + " tr";
    $( targt + ":first-child").addClass("master");    
    $( targt + ":not(.master)").toggle();
 
    if ( Button.firstChild.data == collapseCaption ) {
        Button.firstChild.data = expandCaption;
    } else {
        Button.firstChild.data = collapseCaption;
    }
}

/***********************************************************
 *  Name: createTableCollapseButtons
 *  Description: Runs at page load, finds each table with class collapsible and inserts the necessary 
 *  elements to make the table have collapsible functionality.  The actual collapsing is then handled
 *  by the collapseTable function.
 *  Maintainers: (Wikipedia) [[User:R. Koot]], (Dragon Quest Wiki) [[User:FlyingRagnar]]
 *  Source: Wikipedia Common.js, imported 2/1/10
 *  Additional Notes: This method sets up the collapsing functionality. Dragon Quest wiki does not currently use the 'innercollapse', 'outercollapse', or 'autocollapse'  
 *  functionality. It is generally preferred to allow tables to size themselves rather than specify a fixed width.
 *  Usage: Create a table and give it the class "collapsible".  Ensure that the table has a header row.  Add the class
 *  "collapsed" if you wish the table to be collapsed on page load.
 */
function createTableCollapseButtons()
{
    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.className = "collapseButton";  //Styles are declared in Common.css

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

            // fix width of table to be the same when shown or hidden (IE only)
            // Tables[i].style.width = Tables[i].offsetWidth;
 
            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 );
        } 
        else if ( hasClass( NavigationBoxes[i], "innercollapse" ) ) {
            var element = NavigationBoxes[i];
            while (element = element.parentNode) {
                if ( hasClass( element, "outercollapse" ) ) {
                    collapseTable ( i );
                    break;
                }
            }
        }
    }
}
 
addOnloadHook( createTableCollapseButtons );

/***********************************************************
 *  Name: collapseSpoiler
 *  Description: Toggles a spoiler for display on a page.
 *  Maintainers: [[User:FlyingRagnar]]
 *  Additional Notes: Similar to collapseTable, this function toggles spoilers
 *  for display.  The jQuery blind effect is used when they are toggled.
 */
mw.loader.load( 'jquery.effects.blind' );
mw.loader.load( 'jquery.ui.button' );
var collapseSpoilerCaption = "Hide spoilers";
var expandSpoilerCaption = "Show spoilers";
function collapseSpoiler( spoilerIndex )
{
    var Button = document.getElementById( "collapseSpoilerButton" + spoilerIndex );
    var Div = document.getElementById( "collapsibleSpoiler" + spoilerIndex );
 
    if ( !Div || !Button ) {
        return false;
    }
    
    var options = {};
    var targt = "#collapsibleSpoiler" + spoilerIndex;    
    $( targt ).toggle("blind", options, 500);

    if ( Button.firstChild.innerHTML == collapseSpoilerCaption ) {
        Button.firstChild.innerHTML = expandSpoilerCaption;
    } else {
        Button.firstChild.innerHTML = collapseSpoilerCaption;
    }
}

/***********************************************************
 *  Name: createSpoilerCollapseButtons
 *  Description: Runs on page load, adds functionality to toggle spoilers
 *  Maintainers: [[User:FlyingRagnar]]
 *  Additional Notes: Works very similar to createTableCollapseButtons.  
 *  Uses a jQuery button to trigger the toggle of spoilers.  All spoilers
 *  are hidden by default when a page loads.
 */ 
function createSpoilerCollapseButtons()
{
    var spoilerIndex = 0;
    var Spoilers = document.getElementsByTagName( "div" );

    // These methods don't work in IE
    //var SpoilerHeaders = document.getElementsByClassName( "spoilerstart" );
    //var Spoilers = document.getElementsByClassName( "spoiler" );
 
    for ( var i = 0; i < Spoilers.length; i++ ) {
         if ( hasClass( Spoilers[i], "spoiler" ) ) {
            Spoilers[i].setAttribute( "id", "collapsibleSpoiler" + spoilerIndex );
            spoilerIndex++;
         } else if ( hasClass ( Spoilers[i], "spoilerstart" ) ) {
            var Button     = document.createElement( "button" );
            var ButtonText = document.createTextNode( collapseSpoilerCaption );
 
            Button.setAttribute( "id", "collapseSpoilerButton" + spoilerIndex );
            Button.setAttribute( "onclick", "collapseSpoiler(" + spoilerIndex + ");" );
            Button.appendChild( ButtonText );
            
            // fix width of table to be the same when shown or hidden (IE only)
            // Tables[i].style.width = Tables[i].offsetWidth;
                        
            Spoilers[i].insertBefore( Button, Spoilers[i].childNodes[0] );
            $( "button", ".spoilerstart" ).button();
            // Apparently button() is not supported on IE7 or earlier.  Oh well.
            
          }
    }
 
    for ( var i = 0;  i < spoilerIndex; i++ ) {
            collapseSpoiler( i );
    }
}
 
addOnloadHook( createSpoilerCollapseButtons );

/***********************************************************
 *  Name: createJQueryTabs
 *  Description: Runs at page load, inserts jQuery tabs into a page wherever a <div> with class "tabs" is found.
 *  Maintainers: [[User:FlyingRagnar]]
 *  Additional Notes: This function effectively replaces the Tabber extension which was 
 *  previously used to insert tabs into a page.  The template [[Template:VersionTabs]] is
 *  the primary method to use when inserting jQuery tabs into a page.  It is tightly 
 *  coupled to this function.
 */
mw.loader.load( 'jquery.ui.tabs' );
function createJQueryTabs()
{
    var tabGroup = 0;
    var Tabs = document.getElementsByTagName( "div" );
 
    for ( var i = 0; i < Tabs.length; i++ ) {
        if ( hasClass( Tabs[i], "tabs" ) ) {
 
            Tabs[i].setAttribute("id", "tabs" + tabGroup);

            var children = Tabs[i].childNodes;
            var h = 0;
            for( var j = 0; j < children.length; j++ ) {
               if ( children[j].nodeName == "UL" ) {
                  var Tlinks = children[j].getElementsByTagName( "a" );
                  for( var k = h; k < Tlinks.length; k++ ) {
                     Tlinks[k].setAttribute("href", "#tabs" + tabGroup + "-" + (k+1)); 
                  }
               } else if ( children[j].nodeName == "DIV" ) {
                  children[j].setAttribute("id", "tabs" + tabGroup + "-" + (h+1));
                  h++; 
               }
            }
            // apply the jQuery code to take effect
            jQuery( "#tabs" + tabGroup ).tabs({ /*event: "mouseover"*/ });
            tabGroup++;
        }
    }
}
jQuery( createJQueryTabs );

mw.loader.load( 'jquery.ui.accordion' );
function accordionVideos()
{
   jQuery( "#accordion" ).accordion({ collapsible: true, active: false });
}
jQuery( accordionVideos );

mw.loader.load( 'jquery.clickmenu' );
function activateClickMenu()
{
  $( "#list" ).clickMenu();
}
jQuery( activateClickMenu );

mw.loader.load('ext.datatables');
function activateDataTables()
{
  $( "#datatable" ).dataTable();
}
jQuery( activateDataTables );