Difference between revisions of "MediaWiki:Common.js"
From WikiName
| (69 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 ) { | ||
| − | var elem = document.getElementById( tableIndex ); | + | var elem = document.getElementById( 'collapsibleTable' + tableIndex ); |
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 48: | 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 54: | Line 53: | ||
var ButtonLink = document.createElement( 'a' ); | var ButtonLink = document.createElement( 'a' ); | ||
| − | var ButtonText = document.createTextNode( collapseCaption ); | + | // var ButtonText = document.createTextNode( collapseCaption ); |
| − | + | 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 61: | 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 103: | 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' );
}
}