MediaWiki:Common.js: Difference between revisions

No edit summary
No edit summary
Line 15: Line 15:


         var Button = document.getElementById( 'collapseButton' + tableIndex );
         var Button = document.getElementById( 'collapseButton' + tableIndex );
      var Table = document.getElementById( 'collapsibleTable' + tableIndex );
      var Table = document.getElementById( 'collapsibleTable' + tableIndex );
   
   
      if ( !Table || !Button ) {
      if ( !Table || !Button ) {
              return false;
              return false;
      }
      }
   
   
      var Rows = Table.rows;
      var Rows = Table.rows;
   
   
      if ( Button.firstChild.data == collapseCaption ) {
      if ( Button.firstChild.data == collapseCaption ) {
              for ( var i = 1; i < Rows.length; i++ ) {
              for ( var i = 1; i < Rows.length; i++ ) {
                      Rows[i].style.display = 'none';
                      Rows[i].style.display = 'none';
              }
              }
              Button.firstChild.data = expandCaption;
              Button.firstChild.data = expandCaption;
      } else {
      } else {
              for ( var i = 1; i < Rows.length; i++ ) {
              for ( var i = 1; i < Rows.length; i++ ) {
                      Rows[i].style.display = Rows[0].style.display;
                      Rows[i].style.display = Rows[0].style.display;
              }
              }
              Button.firstChild.data = collapseCaption;
              Button.firstChild.data = collapseCaption;
      }
      }


}  
}  
Line 40: Line 40:


         var tableIndex = 0;
         var tableIndex = 0;
      var NavigationBoxes = new Object();
      var NavigationBoxes = new Object();
      var Tables = document.getElementsByTagName( 'table' );
      var Tables = document.getElementsByTagName( 'table' );
   
   
      for ( var i = 0; i < Tables.length; i++ ) {
      for ( var i = 0; i < Tables.length; i++ ) {
              if ( hasClass( Tables[i], 'collapsible' ) ) {
              if ( hasClass( Tables[i], 'collapsible' ) ) {
   
   
                      /* only add button and increment count if there is a header row to work with */
                      /* only add button and increment count if there is a header row to work with */
                      var HeaderRow = Tables[i].getElementsByTagName( 'tr' )[0];
                      var HeaderRow = Tables[i].getElementsByTagName( 'tr' )[0];
                      if ( !HeaderRow ) {
                      if ( !HeaderRow ) {
                              continue;
                              continue;
                      }
                      }
                      var Header = HeaderRow.getElementsByTagName( 'th' )[0];
                      var Header = HeaderRow.getElementsByTagName( 'th' )[0];
                      if ( !Header ) {
                      if ( !Header ) {
                              continue;
                              continue;
                      }
                      }
   
   
                      NavigationBoxes[tableIndex] = Tables[i];
                      NavigationBoxes[tableIndex] = Tables[i];
                      Tables[i].setAttribute( 'id', 'collapsibleTable' + tableIndex );
                      Tables[i].setAttribute( 'id', 'collapsibleTable' + tableIndex );
   
   
                      var Button = document.createElement( 'span' );
                      var Button = document.createElement( 'span' );
                      var ButtonLink = document.createElement( 'a' );
                      var ButtonLink = document.createElement( 'a' );
                      var ButtonText = document.createTextNode( collapseCaption );
                      var ButtonText = document.createTextNode( collapseCaption );
   
   
                      Button.className = 'collapseButton'; // Styles are declared in [[MediaWiki:Common.css]]
                      Button.className = 'collapseButton'; // Styles are declared in [[MediaWiki:Common.css]]
   
   
                      ButtonLink.style.color = Header.style.color;
                      ButtonLink.style.color = Header.style.color;
                      ButtonLink.setAttribute( 'id', 'collapseButton' + tableIndex );
                      ButtonLink.setAttribute( 'id', 'collapseButton' + tableIndex );
                      ButtonLink.setAttribute( 'href', "javascript:collapseTable(" + tableIndex + ");" );
                      ButtonLink.setAttribute( 'href', "javascript:collapseTable(" + tableIndex + ");" );
                      ButtonLink.appendChild( ButtonText );
                      ButtonLink.appendChild( ButtonText );
   
   
                      Button.appendChild( document.createTextNode( '[' ) );
                      Button.appendChild( document.createTextNode( '[' ) );
                      Button.appendChild( ButtonLink );
                      Button.appendChild( ButtonLink );
                      Button.appendChild( document.createTextNode( ']' ) );
                      Button.appendChild( document.createTextNode( ']' ) );
   
   
                      Header.insertBefore( Button, Header.childNodes[0] );
                      Header.insertBefore( Button, Header.childNodes[0] );
                      tableIndex++;
                      tableIndex++;
              }
              }
      }
      }
   
   
      for ( var i = 0;  i < tableIndex; i++ ) {
      for ( var i = 0;  i < tableIndex; i++ ) {
              if ( hasClass( NavigationBoxes[i], 'collapsed' ) || ( tableIndex >= autoCollapse && hasClass( NavigationBoxes[i], 'autocollapse' ) ) ) {
              if ( hasClass( NavigationBoxes[i], 'collapsed' ) || ( tableIndex >= autoCollapse && hasClass( NavigationBoxes[i], 'autocollapse' ) ) ) {
                      collapseTable( i );
                      collapseTable( i );
              } else if ( hasClass( NavigationBoxes[i], 'innercollapse' ) ) {
              } else if ( hasClass( NavigationBoxes[i], 'innercollapse' ) ) {
                      var element = NavigationBoxes[i];
                      var element = NavigationBoxes[i];
                      while ( element = element.parentNode ) {
                      while ( element = element.parentNode ) {
                              if ( hasClass( element, 'outercollapse' ) ) {
                              if ( hasClass( element, 'outercollapse' ) ) {
                                      collapseTable( i );
                                      collapseTable( i );
                                      break;
                                      break;
                              }
                              }
                      }
                      }
              }
              }
      }
      }


}  
}  
Line 108: Line 108:


         var reCache = {};
         var reCache = {};
      return function( element, className ) {
      return function( element, className ) {
              return ( reCache[className] ? reCache[className] : ( reCache[className] = new RegExp( "(?:\\s|^)" + className + "(?:\\s|$)" ) ) ).test( element.className );
              return ( reCache[className] ? reCache[className] : ( reCache[className] = new RegExp( "(?:\\s|^)" + className + "(?:\\s|$)" ) ) ).test( element.className );
      };
      };
 
mw.messages.set({"collapsible-collapse":"Collapse","collapsible-expand":"Expand"});
$(document).ready(function(){
$('.mw-collapsible').makeCollapsible();
});


})(); [edit] /**END COLLAPSIBLE TABLES********************************************/
})(); [edit] /**END COLLAPSIBLE TABLES********************************************/

Revision as of 16:35, 21 April 2012

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

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

})(); [edit] /**END COLLAPSIBLE TABLES********************************************/