Difference between revisions of "MediaWiki:Common.js"
From WikiName
(49 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]] |
*/ | */ | ||
Line 14: | 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 43: | Line 45: | ||
} | } | ||
+ | Header.setAttribute( 'class', 'showcollapsible'); | ||
+ | |||
NavigationBoxes[tableIndex] = Tables[i]; | NavigationBoxes[tableIndex] = Tables[i]; | ||
Tables[i].setAttribute( 'id', 'collapsibleTable' + tableIndex ); | Tables[i].setAttribute( 'id', 'collapsibleTable' + tableIndex ); | ||
Line 50: | Line 54: | ||
// var ButtonText = document.createTextNode( collapseCaption ); | // var ButtonText = document.createTextNode( collapseCaption ); | ||
− | var ButtonText = document.createTextNode( | + | var ButtonText = document.createTextNode( Header.innerHTML ); |
Button.className = 'collapseButton'; // Styles are declared in [[MediaWiki:Common.css]] | Button.className = 'collapseButton'; // Styles are declared in [[MediaWiki:Common.css]] | ||
Line 56: | Line 60: | ||
ButtonLink.style.color = Header.style.color; | ButtonLink.style.color = Header.style.color; | ||
ButtonLink.setAttribute( 'id', 'collapseButton' + tableIndex ); | ButtonLink.setAttribute( 'id', 'collapseButton' + tableIndex ); | ||
− | ButtonLink.setAttribute( 'class', ' | + | ButtonLink.setAttribute( 'class', 'hidecollapsible' ); |
ButtonLink.setAttribute( 'href', "javascript:collapseTable(" + tableIndex + ");" ); | ButtonLink.setAttribute( 'href', "javascript:collapseTable(" + tableIndex + ");" ); | ||
− | ButtonLink.appendChild( ButtonText ); | + | //ButtonLink.appendChild( ButtonText ); |
− | + | Header.innerHTML = '<a href="' + ButtonLink + '">' + Header.innerHTML + '</a>'; | |
− | + | Header.className = 'collapseButton'; | |
− | + | ||
− | + | // collapse all tables | |
− | + | collapseTable(tableIndex); | |
+ | |||
tableIndex++; | tableIndex++; | ||
} | } | ||
Line 85: | 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' ); } }