MediaWiki:Common.js: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
/** Collapsible tables ********************************************************* |
/** Collapsible tables ********************************************************* |
||
* |
* |
||
* From English Wikipedia, 2008-09-15 |
|||
* Description: Allows tables to be collapsed, showing only the header. See |
|||
* @deprecated: Do not use this in new constructions, use class="mw-collapsible" instead |
|||
* http://www.mediawiki.org/wiki/Manual:Collapsible_tables. |
|||
* |
|||
* Maintainers: [[en:User:R. Koot]] |
|||
* Description: Allows tables to be collapsed, showing only the header. |
|||
* See [[Wikipedia:NavFrame]]. |
|||
* Maintainers: [[User:R. Koot]] |
|||
*/ |
*/ |
||
var autoCollapse = 2; |
var autoCollapse = 2; |
||
var collapseCaption = 'hide'; |
var collapseCaption = 'hide'; |
||
Line 11: | Line 13: | ||
function collapseTable( tableIndex ) { |
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() |
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]; |
|||
/* only add button and increment count if there is a header row to work with */ |
|||
Tables[i].setAttribute( 'id', 'collapsibleTable' + tableIndex ); |
|||
var HeaderRow = Tables[i].getElementsByTagName( 'tr' )[0]; |
|||
if ( !HeaderRow ) { |
|||
continue; |
|||
} |
|||
var Header = HeaderRow.getElementsByTagName( 'th' )[0]; |
|||
if ( !Header ) { |
|||
continue; |
|||
} |
|||
var Button = document.createElement( 'span' ); |
|||
NavigationBoxes[tableIndex] = Tables[i]; |
|||
var ButtonLink = document.createElement( 'a' ); |
|||
Tables[i].setAttribute( 'id', 'collapsibleTable' + tableIndex ); |
|||
var ButtonText = document.createTextNode( collapseCaption ); |
|||
Button.style.styleFloat = 'right'; |
|||
var Button = document.createElement( 'span' ); |
|||
Button.style.cssFloat = 'right'; |
|||
var ButtonLink = document.createElement( 'a' ); |
|||
Button.style.fontWeight = 'normal'; |
|||
var ButtonText = document.createTextNode( collapseCaption ); |
|||
Button.style.textAlign = 'right'; |
|||
Button.style.width = '6em'; |
|||
ButtonLink.style.color = Header.style.color; |
|||
Button.className = 'collapseButton'; // Styles are declared in [[MediaWiki:Common.css]] |
|||
ButtonLink.setAttribute( 'id', 'collapseButton' + tableIndex ); |
|||
ButtonLink.setAttribute( 'href', "javascript:collapseTable(" + tableIndex + ");" ); |
|||
ButtonLink.appendChild( ButtonText ); |
|||
Button.appendChild( document.createTextNode( '[' ) ); |
|||
ButtonLink.style.color = Header.style.color; |
|||
Button.appendChild( ButtonLink ); |
|||
ButtonLink.setAttribute( 'id', 'collapseButton' + tableIndex ); |
|||
Button.appendChild( document.createTextNode( ']' ) ); |
|||
ButtonLink.setAttribute( 'href', "javascript:collapseTable(" + tableIndex + ");" ); |
|||
ButtonLink.appendChild( ButtonText ); |
|||
Header.insertBefore( Button, Header.childNodes[0] ); |
|||
Button.appendChild( document.createTextNode( '[' ) ); |
|||
tableIndex++; |
|||
Button.appendChild( ButtonLink ); |
|||
} |
|||
Button.appendChild( document.createTextNode( ']' ) ); |
|||
} |
|||
for ( var i = 0; i < tableIndex; i++ ) { |
|||
Header.insertBefore( Button, Header.childNodes[0] ); |
|||
if ( hasClass( NavigationBoxes[i], 'collapsed' ) || ( tableIndex >= autoCollapse && hasClass( NavigationBoxes[i], 'autocollapse' ) ) ) { |
|||
tableIndex++; |
|||
collapseTable( i ); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
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 ); |
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 ); |
|||
}; |
|||
})(); |
Revision as of 22:06, 28 June 2012
/** Collapsible tables ********************************************************* * * From English Wikipedia, 2008-09-15 * @deprecated: Do not use this in new constructions, use class="mw-collapsible" instead * * Description: Allows tables to be collapsed, showing only the header. * See [[Wikipedia:NavFrame]]. * Maintainers: [[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.style.styleFloat = 'right'; Button.style.cssFloat = 'right'; Button.style.fontWeight = 'normal'; Button.style.textAlign = 'right'; Button.style.width = '6em'; 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 ); } } } addOnloadHook( createCollapseButtons );