MediaWiki:Common.js: Difference between revisions

From Step Mods | Change The Game
No edit summary
No edit summary
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. */


/*<nowiki>*/
/** Collapsible tables *********************************************************
/**** class CollapsibleTables.js
* (c) 2007 by Patrick Westerhoff [poke]
  *
  *
  * This class allows to make tables collapsible and adds a show/hide button to
  * Description: Allows tables to be collapsed, showing only the header. See
* affected tables. Tables which class attribute contains 'collapsible' or
  *                         http://www.mediawiki.org/wiki/Manual:Collapsible_tables.
* 'expandable' are affected by this class and can be collapsed; the latter
  *  Maintainers: [[en:User:R. Koot]]
  * automatically hides the content of all sections.
* Header rows are used to divide the table into sections which can be collapsed
* separately. By default the first row of the table is interpreted as a header
* row, however this can be overwritten by adding 'collapsible' to the class
* attribute of header rows. You can also hide a section individually by default
  * when in 'collapsible' mode by using 'expandable' as the row's class name
  * instead.
  */
  */
 
   
function CollapsibleTables ()
var autoCollapse = 2;
{
var collapseCaption = 'hide';
  var classCollapsible = 'collapsible';
var expandCaption = 'show';
  var classExpandable = 'expandable';
   
  var linkTextShow    = '[show]';
function collapseTable( tableIndex ) {
  var linkTextHide    = '[hide]';
         var Button = document.getElementById( 'collapseButton' + tableIndex );
 
        var Table = document.getElementById( 'collapsibleTable' + tableIndex );
  var reCollapsible    = new RegExp( '(?:\\s|^)' + classCollapsible + '(?:\\s|$)' );
  var reExpandable    = new RegExp( '(?:\\s|^)' + classExpandable + '(?:\\s|$)' );
         if ( !Table || !Button ) {
  var sections         = new Array();
                return false;
 
  // link element
  var linkElement              = document.createElement( 'a' );
  linkElement.style.fontSize    = '85%';
  linkElement.style.fontWeight  = 'normal';
  linkElement.style.width      = '3em';
  linkElement.style.cssFloat    = 'right';
  linkElement.style.styleFloat  = 'right';
  linkElement.style.textAlign  = 'center';
  linkElement.style.marginLeft  = '1em';
  linkElement.style.padding    = '0px 3px';
  linkElement.href              = 'javas' + 'cript:void(0);';
 
  initialize();
 
  /** private void initialize () :: initializes CollapsibleTables class **/
  function initialize ()
  {
    if ( wgIsArticle == false && window.location.href.indexOf( 'action=submit' ) < 0 && wgNamespaceNumber != -1 )
      return;
   
    var docContent    = document.getElementById( 'bodyContent' ) || document.getElementById( 'article' ) || document.getElementById( 'mw_contentholder' );
    var tables        = docContent.getElementsByTagName( 'table' );
    var sectionId    = -1;
    var defaultStatus;
   
    for ( var i = 0, n = tables.length; i < n; i++ )
    {
      if ( reCollapsible.test( tables[i].className ) )
         defaultStatus = true;
      else if ( reExpandable.test( tables[i].className ) )
        defaultStatus = false;
      else
        continue;
     
      var tableRows    = tables[i].rows;
      var sectionFound = false;
      var status      = false;
     
      for ( var j = 0, m = tableRows.length; j < m; j++ )
      {
        if ( reCollapsible.test( tableRows[j].className ) )
          status = true;
        else if ( reExpandable.test( tableRows[j].className ) )
          status = false;
        else
        {
          if ( sectionFound )
          {
            sections[ sectionId ].content.push( tableRows[j] );
            tableRows[j].style.display = sections[ sectionId ].status ? '' : 'none';
          }
         
          continue;
         }
         }
       
         var section    = new Object();
         var Rows = Table.rows;
        section.header = tableRows[j];
   
         section.content = new Array();
         if ( Button.firstChild.data == collapseCaption ) {
        section.status  = defaultStatus ? status : false;
                for ( var i = 1; i < Rows.length; i++ ) {
       
                        Rows[i].style.display = 'none';
        sections[ ++sectionId ] = section;
                }
        sectionFound            = true;
                Button.firstChild.data = expandCaption;
       
         } else {
        initHeaderRow( tableRows[j], sectionId, section.status );
                for ( var i = 1; i < Rows.length; i++ ) {
      }
                        Rows[i].style.display = Rows[0].style.display;
     
                }
      if ( sectionFound == false )
                Button.firstChild.data = collapseCaption;
      {
        var section      = new Object();
        section.header    = tableRows[0];
        section.content  = new Array();
        section.status    = defaultStatus;
          
        for ( var j = 1; j < tableRows.length; j++ )
        {
          section.content.push( tableRows[j] );
          tableRows[j].style.display = section.status ? '' : 'none';
         }
         }
       
        sections[ ++sectionId ] = section;
       
        initHeaderRow( tableRows[0], sectionId, defaultStatus );
      }
    }
  }
 
  /** private void initHeaderRow ( headerRow, sectionId, sectionStatus ) :: adds show/hide button **/
  function initHeaderRow ( headerRow, sectionId, sectionStatus )
  {
    var lastCell, link;
   
    headerRow.id = 'collapsible-section_' + sectionId;
    lastCell    = headerRow.cells[ headerRow.cells.length - 1 ];
    link        = linkElement.cloneNode( false );
    link.onclick = toggleSection;
    link.appendChild( document.createTextNode( sectionStatus ? linkTextHide : linkTextShow ) );
   
    lastCell.insertBefore( link, lastCell.firstChild );
  }
 
  /** private void toggleSection () :: onclick event handler **/
  function toggleSection ()
  {
    var trHead  = this.parentNode.parentNode;
    var section = sections[ trHead.id.substr( 20 ) ];
    var content = section.content;
    var display = section.status ? 'none' : '';
     
    for ( var i = 0, n = content.length; i < n; i++ )
      content[i].style.display = display;
   
    section.status      = !section.status;
    this.firstChild.data = section.status ? linkTextHide : linkTextShow;
  }
}
}
/*</nowiki>*/
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.className = 'collapseButton'; // Styles are declared in [[MediaWiki:Common.css]]
                        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 );
                } else if ( hasClass( NavigationBoxes[i], 'innercollapse' ) ) {
                        var element = NavigationBoxes[i];
                        while ( element = element.parentNode ) {
                                if ( hasClass( element, 'outercollapse' ) ) {
                                        collapseTable( i );
                                        break;
                                }
                        }
                }
        }
}
addOnloadHook( createCollapseButtons );
/** 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 );
        };
})();

Revision as of 00:05, July 25, 2012

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

/** Collapsible tables *********************************************************
 *
 *  Description: Allows tables to be collapsed, showing only the header. See
 *                         http://www.mediawiki.org/wiki/Manual:Collapsible_tables.
 *  Maintainers: [[en: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.className = 'collapseButton'; // Styles are declared in [[MediaWiki:Common.css]]
 
                        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 );
                } else if ( hasClass( NavigationBoxes[i], 'innercollapse' ) ) {
                        var element = NavigationBoxes[i];
                        while ( element = element.parentNode ) {
                                if ( hasClass( element, 'outercollapse' ) ) {
                                        collapseTable( i );
                                        break;
                                }
                        }
                }
        }
}
 
addOnloadHook( createCollapseButtons );
 
/** 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 );
        };
})();