Difference between revisions of "MediaWiki:Common.js"
From WikiName
(64 intermediate revisions by 2 users not shown) | |||
Line 4: | Line 4: | ||
* | * | ||
* Description: Allows tables to be collapsed, showing only the header. See | * Description: Allows tables to be collapsed, showing only the header. See | ||
− | * | + | * |
− | * Maintainers: [[en:User: | + | * Maintainers: [[en:User:Benq]] |
*/ | */ | ||
− | |||
− | |||
− | |||
− | |||
− | |||
function collapseTable( tableIndex ) { | function collapseTable( tableIndex ) { | ||
Line 19: | Line 14: | ||
if ( elem ) | if ( elem ) | ||
{ | { | ||
− | if(elem.className=="" || elem.className==" | + | if(elem.className==""||elem.className=="hidecollapsible") |
{ | { | ||
− | elem.className = ' | + | elem.className = 'showcollapsible'; |
+ | showCells( 'collapsibleTable' + tableIndex ); | ||
} | } | ||
else | else | ||
{ | { | ||
− | elem.className = ' | + | elem.className = 'hidecollapsible'; |
+ | hideCells( 'collapsibleTable' + tableIndex ); | ||
} | } | ||
} | } | ||
Line 37: | Line 34: | ||
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]; | ||
Line 48: | Line 45: | ||
} | } | ||
− | + | Header.setAttribute( 'class', 'showcollapsible'); | |
+ | |||
+ | 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 ); | ||
+ | var ButtonText = document.createTextNode( Header.innerHTML ); | ||
+ | |||
+ | Button.className = 'collapseButton'; // Styles are declared in [[MediaWiki:Common.css]] | ||
+ | |||
+ | ButtonLink.style.color = Header.style.color; | ||
+ | ButtonLink.setAttribute( 'id', 'collapseButton' + tableIndex ); | ||
+ | ButtonLink.setAttribute( 'class', 'hidecollapsible' ); | ||
+ | ButtonLink.setAttribute( 'href', "javascript:collapseTable(" + tableIndex + ");" ); | ||
+ | //ButtonLink.appendChild( ButtonText ); | ||
+ | |||
+ | Header.innerHTML = '<a href="' + ButtonLink + '">' + Header.innerHTML + '</a>'; | ||
+ | Header.className = 'collapseButton'; | ||
+ | |||
+ | // collapse all tables | ||
+ | collapseTable(tableIndex); | ||
tableIndex++; | tableIndex++; | ||
Line 70: | Line 90: | ||
}; | }; | ||
})(); | })(); | ||
− | + | ||
+ | |||
+ | function hideCells(root) { | ||
+ | root = document.getElementById(root); | ||
+ | var all = root.getElementsByTagName("td"); | ||
+ | to = all.length; | ||
+ | for ( var i = 0; i < to; i++ ) { | ||
+ | // all[i].style.display = 'none'; | ||
+ | all[i].setAttribute( 'class', 'hidecollapsible' ); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function showCells(root) { | ||
+ | root = document.getElementById(root); | ||
+ | var all = root.getElementsByTagName("td"); | ||
+ | to = all.length; | ||
+ | for ( var i = 0; i < to; i++ ) { | ||
+ | // all[i].style.display = 'block'; | ||
+ | all[i].setAttribute( 'class', 'showcollapsible' ); | ||
+ | } | ||
+ | } |
Latest revision as of 03:23, 9 February 2011
/* 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 * * Maintainers: [[en:User:Benq]] */ function collapseTable( tableIndex ) { var elem = document.getElementById( 'collapsibleTable' + tableIndex ); if ( elem ) { if(elem.className==""||elem.className=="hidecollapsible") { elem.className = 'showcollapsible'; showCells( 'collapsibleTable' + tableIndex ); } else { elem.className = 'hidecollapsible'; hideCells( 'collapsibleTable' + tableIndex ); } } } 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; } Header.setAttribute( 'class', 'showcollapsible'); 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 ); var ButtonText = document.createTextNode( Header.innerHTML ); Button.className = 'collapseButton'; // Styles are declared in [[MediaWiki:Common.css]] ButtonLink.style.color = Header.style.color; ButtonLink.setAttribute( 'id', 'collapseButton' + tableIndex ); ButtonLink.setAttribute( 'class', 'hidecollapsible' ); ButtonLink.setAttribute( 'href', "javascript:collapseTable(" + tableIndex + ");" ); //ButtonLink.appendChild( ButtonText ); Header.innerHTML = '<a href="' + ButtonLink + '">' + Header.innerHTML + '</a>'; Header.className = 'collapseButton'; // collapse all tables collapseTable(tableIndex); tableIndex++; } } } 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 ); }; })(); function hideCells(root) { root = document.getElementById(root); var all = root.getElementsByTagName("td"); to = all.length; for ( var i = 0; i < to; i++ ) { // all[i].style.display = 'none'; all[i].setAttribute( 'class', 'hidecollapsible' ); } } function showCells(root) { root = document.getElementById(root); var all = root.getElementsByTagName("td"); to = all.length; for ( var i = 0; i < to; i++ ) { // all[i].style.display = 'block'; all[i].setAttribute( 'class', 'showcollapsible' ); } }