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. */


/** Collapsible tables *********************************************************
/*<nowiki>*/
/**** class CollapsibleTables.js
* (c) 2007 by Patrick Westerhoff [poke]
  *
  *
  *  Description: Allows tables to be collapsed, showing only the header. See
  * This class allows to make tables collapsible and adds a show/hide button to
  *               [[Wikipedia:NavFrame]].
  * affected tables. Tables which class attribute contains 'collapsible' or
  * Maintainers: [[User:R. Koot]]
* 'expandable' are affected by this class and can be collapsed; the latter
* 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.
  */
  */
 
var autoCollapse = 2;
function CollapsibleTables ()
var collapseCaption = "hide";
{
var expandCaption = "show";
  var classCollapsible = 'collapsible';
  var classExpandable  = 'expandable';
window.collapseTable = function( tableIndex ){
  var linkTextShow    = '[show]';
    var Button = document.getElementById( "collapseButton" + tableIndex );
  var linkTextHide    = '[hide]';
     var Table = document.getElementById( "collapsibleTable" + tableIndex );
 
   
  var reCollapsible    = new RegExp( '(?:\\s|^)' + classCollapsible + '(?:\\s|$)' );
    if ( !Table || !Button ) {
  var reExpandable     = new RegExp( '(?:\\s|^)' + classExpandable + '(?:\\s|$)' );
         return false;
  var sections         = new Array();
    }
 
  // link element
    var Rows = Table.rows;
  var linkElement              = document.createElement( 'a' );
  linkElement.style.fontSize    = '85%';
    if ( Button.firstChild.data == collapseCaption ) {
  linkElement.style.fontWeight  = 'normal';
        for ( var i = 1; i < Rows.length; i++ ) {
  linkElement.style.width      = '3em';
            Rows[i].style.display = "none";
  linkElement.style.cssFloat    = 'right';
        }
  linkElement.style.styleFloat  = 'right';
        Button.firstChild.data = expandCaption;
  linkElement.style.textAlign  = 'center';
    } else {
  linkElement.style.marginLeft  = '1em';
        for ( var i = 1; i < Rows.length; i++ ) {
  linkElement.style.padding    = '0px 3px';
            Rows[i].style.display = Rows[0].style.display;
  linkElement.href              = 'javas' + 'cript:void(0);';
        }
 
        Button.firstChild.data = collapseCaption;
  initialize();
    }
 
}
  /** private void initialize () :: initializes CollapsibleTables class **/
  function initialize ()
function createCollapseButtons(){
  {
     var tableIndex = 0;
     if ( wgIsArticle == false && window.location.href.indexOf( 'action=submit' ) < 0 && wgNamespaceNumber != -1 )
     var NavigationBoxes = new Object();
      return;
     var Tables = document.getElementsByTagName( "table" );
   
     var docContent    = document.getElementById( 'bodyContent' ) || document.getElementById( 'article' ) || document.getElementById( 'mw_contentholder' );
     for ( var i = 0; i < Tables.length; i++ ) {
     var tables        = docContent.getElementsByTagName( 'table' );
        if ( hasClass( Tables[i], "collapsible" ) ) {
    var sectionId    = -1;
    var defaultStatus;
            /* only add button and increment count if there is a header row to work with */
   
            var HeaderRow = Tables[i].getElementsByTagName( "tr" )[0];
     for ( var i = 0, n = tables.length; i < n; i++ )
            if (!HeaderRow) continue;
    {
            var Header = HeaderRow.getElementsByTagName( "th" )[0];
      if ( reCollapsible.test( tables[i].className ) )
            if (!Header) continue;
        defaultStatus = true;
      else if ( reExpandable.test( tables[i].className ) )
            NavigationBoxes[ tableIndex ] = Tables[i];
        defaultStatus = false;
            Tables[i].setAttribute( "id", "collapsibleTable" + tableIndex );
      else
        continue;
            var Button    = document.createElement( "span" );
     
            var ButtonLink = document.createElement( "a" );
      var tableRows    = tables[i].rows;
            var ButtonText = document.createTextNode( collapseCaption );
      var sectionFound = false;
      var status      = false;
            Button.className = "collapseButton"; //Styles are declared in Common.css
     
      for ( var j = 0, m = tableRows.length; j < m; j++ )
            ButtonLink.style.color = Header.style.color;
      {
            ButtonLink.setAttribute( "id", "collapseButton" + tableIndex );
        if ( reCollapsible.test( tableRows[j].className ) )
            ButtonLink.setAttribute( "href", "#" );
          status = true;
            addHandler( ButtonLink,  "click", new Function( "evt", "collapseTable(" + tableIndex + " ); return killEvt( evt );") );
        else if ( reExpandable.test( tableRows[j].className ) )
            ButtonLink.appendChild( ButtonText );
          status = false;
        else
            Button.appendChild( document.createTextNode( "[" ) );
        {
            Button.appendChild( ButtonLink );
          if ( sectionFound )
             Button.appendChild( document.createTextNode( "]" ) );
          {
             sections[ sectionId ].content.push( tableRows[j] );
             Header.insertBefore( Button, Header.firstChild );
             tableRows[j].style.display = sections[ sectionId ].status ? '' : 'none';
            tableIndex++;
          }
         
          continue;
         }
         }
     }
       
   
        var section     = new Object();
    for ( var i = 0i < tableIndex; i++ ) {
        section.header = tableRows[j];
         if ( hasClass( NavigationBoxes[i], "collapsed" ) || ( tableIndex >= autoCollapse && hasClass( NavigationBoxes[i], "autocollapse" ) ) ) {
        section.content = new Array();
            collapseTable( i );
        section.status = defaultStatus ? status : false;
         }
       
         else if ( hasClass( NavigationBoxes[i], "innercollapse" ) ) {
        sections[ ++sectionId ] = section;
            var element = NavigationBoxes[i];
        sectionFound            = true;
            while (element = element.parentNode) {
       
                if ( hasClass( element, "outercollapse" ) ) {
         initHeaderRow( tableRows[j], sectionId, section.status );
                    collapseTable ( i );
      }
                    break;
     
                }
      if ( sectionFound == false )
            }
      {
        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>*/
$( createCollapseButtons );

Revision as of 00:18, June 30, 2012

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

 /*<nowiki>*/
/**** class CollapsibleTables.js
 * (c) 2007 by Patrick Westerhoff [poke]
 *
 * This class allows to make tables collapsible and adds a show/hide button to
 * affected tables. Tables which class attribute contains 'collapsible' or
 * 'expandable' are affected by this class and can be collapsed; the latter
 * 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 classCollapsible = 'collapsible';
  var classExpandable  = 'expandable';
  var linkTextShow     = '[show]';
  var linkTextHide     = '[hide]';
  
  var reCollapsible    = new RegExp( '(?:\\s|^)' + classCollapsible + '(?:\\s|$)' );
  var reExpandable     = new RegExp( '(?:\\s|^)' + classExpandable  + '(?:\\s|$)' );
  var sections         = new Array();
  
  // 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();
        section.header  = tableRows[j];
        section.content = new Array();
        section.status  = defaultStatus ? status : false;
        
        sections[ ++sectionId ] = section;
        sectionFound            = true;
        
        initHeaderRow( tableRows[j], sectionId, section.status );
      }
      
      if ( sectionFound == false )
      {
        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>*/