MediaWiki:Common.js: Difference between revisions

Revision as of 14:19, 29 September 2007

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

/** Collapsible tables code *****************************************************
 *  Description: Allows tables to be collapsed, showing only the header
 *  Author: User:Bigfoot Lover @ BionicWiki.com
 *  Added: 24 September 2007
 */

/* Add a hook to make buttons, where need be, on every pageload */
addOnloadHook( createTableButtons );

/* Define global variables:
 * autoShrink is the number of tables that must exist on the page for usage of "class=collapsible autocollapse"
 * minimizeSymbol can be either a symbol such as a minus sign or a word such as hide or disappear
 * maximizeSymbol can be either a symbol such as a plus sign or a word such as show or appear */

var autoShrink = 2;
var minimizeSymbol = "min";
var maximizeSymbol = "max";

/* Define functions that do-the-work */
/* Function toggleTableView() toggles a specified table's view from minimized to maximized, or vice versa */ 
function toggleTableView( tableIndex, tableShrink )
{
    var Table = document.getElementById( "collapsibleTable" + tableIndex );
    /* If there is no collapsible tables on the page, no need to do any shrinking */
    if (!Table) {
      return false;
    }

    var Button = document.getElementById( "collapseButton" + tableIndex );
    /* If no collapsible buttons, no need to do any shrinking */
    if (!Button ) {
        return false;
    }

    /* Grab the rows of the specified table */
    var Rows = Table.getElementsByTagName( "tr" ); 

    /* Do the hiding/unhiding */
    if ( Button.firstChild.data == minimizeSymbol || tableShrink == 1 ) {
        /* if the button is set to minimize its contents, 
         * then loop through the rows and mark them hidden */
        var count = 1;
        while (Rows.length > count) {
          if (Rows[count].parentNode.parentNode.id == ("collapsibleTable" + tableIndex))
          {
            Rows[count].style.display = "none";
          }
          count++;
        }
        /* After marking, change the table to show the maximize symbol */
        Button.firstChild.data = maximizeSymbol;
    } else {
        /* if the button is set to maximize its contents, 
         * then loop through the rows and mark them visible */     
        var count = 1;
        while (Rows.length > count) {
          if(Rows[count].parentNode.parentNode.id == ("collapsibleTable" + tableIndex))
          {
              Rows[count].style.display = Rows[0].style.display;
          }
          count++;
        }
        /* After marking, change the table to show the minimize symbol */
        Button.firstChild.data = minimizeSymbol;
    }
}

/* Funtion createTableButtons() creates the plus or minus symbol and alignment text
 * to be applied on collapsible tables */
function createTableButtons()
{
    /* Define local variables */
    var tableIndex = 0;
    var NavBoxes = new Object();
    var Tables = document.getElementsByTagName( "table" );

    /* Use two count variables to handle cases where continue is used */
    var loopcount = 0;
    var count = 0;    
    while (Tables.length > loopcount) {
        /* For all collapsible table on the page, this code goes through
         * them and makes a button for each one individually */
        count = loopcount;
        loopcount++;
        if ( usesClass( Tables[count], "collapsible" ) ) {

            /* Proceed only if a header row and header exist */
            var HeaderRow = Tables[count].getElementsByTagName( "tr" )[0];
            if (!HeaderRow) continue;
            var Header = HeaderRow.getElementsByTagName( "th" )[0];
            if (!Header) continue;

            /* Log where you are in the looping */
            NavBoxes[ tableIndex ] = Tables[count];

            /* Set the identifier of the table being edited in this iteration */
            Tables[count].setAttribute( "id", "collapsibleTable" + tableIndex );

            /* Create the button assuming it is a minimized table
             * to do the initial creation. */
            var Button = document.createElement( "span" );
            var ButtonLink = document.createElement( "a" );
            var ButtonText = document.createTextNode( maximizeSymbol );

            /* Define where the button floats and its font and size.
             * The width should be set to the max character count of
             * the mininizeSymbol and maximizeSymbol + 2. ie. min and max
             * are 3 letters each + 2 = 5em */
            Button.style.styleFloat = "right";
            Button.style.cssFloat = "right";
            Button.style.fontWeight = "normal";
            Button.style.textAlign = "right";
            Button.style.width = "5em";

            /* Set the link color and identifier */
            ButtonLink.style.color = Header.style.color;
            ButtonLink.setAttribute( "id", "collapseButton" + tableIndex );

            /* Set the destination of the button */
            ButtonLink.setAttribute( "href", "javascript:toggleTableView(" + tableIndex + ");" );
            ButtonLink.appendChild( ButtonText );
            Button.appendChild( document.createTextNode( "[" ) );
            Button.appendChild( ButtonLink );
            Button.appendChild( document.createTextNode( "]" ) );

            /* Load the next header and table for the next iteration */
            Header.insertBefore( Button, Header.childNodes[0] );
            tableIndex++;
        }
    }

    /* Earlier in this function, assumed all tables are minimized to do the initial creation.
     * Now, loop again through the tables and set those to maximized that need setting,
     * and set the rows of those that don't as hidden */
    loopcount = 0;
    while (tableIndex > loopcount) {
        /* If autocollapse or collapse is not invalid, maximize; otherwise, minimize */
        if (((autoShrink > tableIndex) && usesClass( NavBoxes[loopcount], "autocollapse" )) || !usesClass( NavBoxes[loopcount], "collapsed" ) ) {
           toggleTableView( loopcount, 0 );
        }
        else {
           toggleTableView( loopcount, 1 );
        }
        loopcount++;
    }
}

/* Override tocShowText and tocHideText ************************/
/* Add a hook that gets called every pageload */
addOnloadHook( modTOCButtons );
function modTOCButtons()
{
    /* Set the global variables to be the same */
    tocHideText = minimizeSymbol;
    tocShowText = maximizeSymbol;
    /* Toggle twice to flush the display */
    /* because Common.js is executed after the internal Wikibits.js */
    var toc = document.getElementById('toc');
    if (toc) {
        toggleToc();
        toggleToc();
    }
    /* Note: For all TOC's to load pre-collapsed, call toggleToc() only once */
}
</pre>