8,574
edits
(Fore preview) |
m (Update to wikipedia version for collapsible elements) |
||
Line 13: | Line 13: | ||
})(); | })(); | ||
/** Collapsible tables ********************************************************* | /** | ||
* Collapsible tables ********************************************************* | |||
* | * | ||
* | * Description: Allows tables to be collapsed, showing only the header. | ||
*/ | */ | ||
var autoCollapse = 2; | var autoCollapse = 2; | ||
var collapseCaption = | var collapseCaption = 'hide'; | ||
var expandCaption = | var expandCaption = 'show'; | ||
window.collapseTable = function( tableIndex ){ | window.collapseTable = function ( tableIndex ) { | ||
var Button = document.getElementById( | var Button = document.getElementById( 'collapseButton' + tableIndex ); | ||
var Table = document.getElementById( | var Table = document.getElementById( 'collapsibleTable' + tableIndex ); | ||
if ( !Table || !Button ) { | if ( !Table || !Button ) { | ||
Line 31: | Line 32: | ||
var Rows = Table.rows; | var Rows = Table.rows; | ||
var i; | |||
if ( Button.firstChild.data == collapseCaption ) { | if ( Button.firstChild.data === collapseCaption ) { | ||
for ( | for ( i = 1; i < Rows.length; i++ ) { | ||
Rows[i].style.display = | Rows[i].style.display = 'none'; | ||
} | } | ||
Button.firstChild.data = expandCaption; | Button.firstChild.data = expandCaption; | ||
} else { | } else { | ||
for ( | for ( 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; | ||
} | } | ||
} | }; | ||
function createCollapseButtons(){ | function createCollapseButtons() { | ||
var tableIndex = 0; | var tableIndex = 0; | ||
var NavigationBoxes = | var NavigationBoxes = {}; | ||
var Tables = document.getElementsByTagName( | var Tables = document.getElementsByTagName( 'table' ); | ||
var i; | |||
function handleButtonLink( index, e ) { | |||
window.collapseTable( index ); | |||
e.preventDefault(); | |||
} | |||
for ( | for ( i = 0; i < Tables.length; i++ ) { | ||
if ( | if ( $( Tables[i] ).hasClass( '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( | var HeaderRow = Tables[i].getElementsByTagName( 'tr' )[0]; | ||
if (!HeaderRow) continue; | if ( !HeaderRow ) continue; | ||
var Header = HeaderRow.getElementsByTagName( | var Header = HeaderRow.getElementsByTagName( 'th' )[0]; | ||
if (!Header) continue; | if ( !Header ) continue; | ||
NavigationBoxes[ tableIndex ] = Tables[i]; | NavigationBoxes[ tableIndex ] = Tables[i]; | ||
Tables[i].setAttribute( | Tables[i].setAttribute( 'id', 'collapsibleTable' + tableIndex ); | ||
var Button = document.createElement( | var Button = document.createElement( 'span' ); | ||
var ButtonLink = document.createElement( | var ButtonLink = document.createElement( 'a' ); | ||
var ButtonText = document.createTextNode( collapseCaption ); | var ButtonText = document.createTextNode( collapseCaption ); | ||
Button.className = | Button.className = 'collapseButton'; /* Styles are declared in Common.css */ | ||
ButtonLink.style.color = Header.style.color; | ButtonLink.style.color = Header.style.color; | ||
ButtonLink.setAttribute( | ButtonLink.setAttribute( 'id', 'collapseButton' + tableIndex ); | ||
ButtonLink.setAttribute( | ButtonLink.setAttribute( 'href', '#' ); | ||
$( ButtonLink ).on( 'click', $.proxy( handleButtonLink, ButtonLink, 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.firstChild ); | Header.insertBefore( Button, Header.firstChild ); | ||
Line 83: | Line 91: | ||
} | } | ||
for ( | for ( i = 0; i < tableIndex; i++ ) { | ||
if ( | if ( $( NavigationBoxes[i] ).hasClass( 'collapsed' ) || ( tableIndex >= autoCollapse && $( NavigationBoxes[i] ).hasClass( 'autocollapse' ) ) ) { | ||
collapseTable( i ); | window.collapseTable( i ); | ||
} | } | ||
else if ( | else if ( $( NavigationBoxes[i] ).hasClass ( 'innercollapse' ) ) { | ||
var element = NavigationBoxes[i]; | var element = NavigationBoxes[i]; | ||
while (element = element.parentNode) { | while ((element = element.parentNode)) { | ||
if ( hasClass( | if ( $( element ).hasClass( 'outercollapse' ) ) { | ||
collapseTable ( i ); | window.collapseTable ( i ); | ||
break; | break; | ||
} | } | ||
Line 99: | Line 107: | ||
} | } | ||
mw.hook( 'wikipage.content' ).add( createCollapseButtons ); | |||
/** Dynamic Navigation Bars (experimental) ************************************* | /** Dynamic Navigation Bars (experimental) ************************************* |