MediaWiki:Common.js

/** 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 ); 
   }; 
})();