if ( !options.plainMode && $collapsible.is( 'table' ) ) {
// Tables
- $containers = $collapsible.find( '> tbody > tr' );
+ // If there is a caption, hide all rows; otherwise, only hide body rows
+ if ( $collapsible.find( '> caption' ).length ) {
+ $containers = $collapsible.find( '> * > tr' );
+ } else {
+ $containers = $collapsible.find( '> tbody > tr' );
+ }
if ( $defaultToggle ) {
// Exclude table row containing togglelink
$containers = $containers.not( $defaultToggle.closest( 'tr' ) );
}
return this.each( function () {
- var $collapsible, collapseText, expandText, $toggle, actionHandler, buildDefaultToggleLink,
+ var $collapsible, collapseText, expandText, $caption, $toggle, actionHandler, buildDefaultToggleLink,
premadeToggleHandler, $toggleLink, $firstItem, collapsibleId, $customTogglers, firstval;
// Ensure class "mw-collapsible" is present in case .makeCollapsible()
// contents and add the toggle link. Different elements are
// treated differently.
if ( $collapsible.is( 'table' ) ) {
- // The toggle-link will be in one the the cells (td or th) of the first row
- $firstItem = $collapsible.find( 'tr:first th, tr:first td' );
- $toggle = $firstItem.find( '> .mw-collapsible-toggle' );
- // If theres no toggle link, add it to the last cell
- if ( !$toggle.length ) {
- $toggleLink = buildDefaultToggleLink().prependTo( $firstItem.eq( -1 ) );
+ // If the table has a caption, collapse to the caption
+ // as opposed to the first row
+ $caption = $collapsible.find( '> caption' );
+ if ( $caption.length ) {
+ $toggle = $caption.find( '> .mw-collapsible-toggle' );
+
+ // If there is no toggle link, add it to the end of the caption
+ if ( !$toggle.length ) {
+ $toggleLink = buildDefaultToggleLink().appendTo( $caption );
+ } else {
+ actionHandler = premadeToggleHandler;
+ $toggleLink = $toggle.on( 'click.mw-collapsible keypress.mw-collapsible', actionHandler );
+ }
} else {
- actionHandler = premadeToggleHandler;
- $toggleLink = $toggle.on( 'click.mw-collapsible keypress.mw-collapsible', actionHandler );
+ // The toggle-link will be in one the the cells (td or th) of the first row
+ $firstItem = $collapsible.find( 'tr:first th, tr:first td' );
+ $toggle = $firstItem.find( '> .mw-collapsible-toggle' );
+
+ // If theres no toggle link, add it to the last cell
+ if ( !$toggle.length ) {
+ $toggleLink = buildDefaultToggleLink().prependTo( $firstItem.eq( -1 ) );
+ } else {
+ actionHandler = premadeToggleHandler;
+ $toggleLink = $toggle.on( 'click.mw-collapsible keypress.mw-collapsible', actionHandler );
+ }
}
} else if ( $collapsible.is( 'ul' ) || $collapsible.is( 'ol' ) ) {
$toggle.trigger( 'click' );
} );
+ function tableWithCaptionTest( $collapsible, assert ) {
+ var $caption, $headerRow, $contentRow, $toggle;
+
+ $caption = $collapsible.find( 'caption' );
+ $headerRow = $collapsible.find( 'tr:first' );
+ $contentRow = $collapsible.find( 'tr:last' );
+
+ $toggle = $caption.find( '.mw-collapsible-toggle' );
+ assert.equal( $toggle.length, 1, 'toggle is added to the end of the caption' );
+
+ assert.assertTrue( $caption.is( ':visible' ), 'caption is visible' );
+ assert.assertTrue( $headerRow.is( ':visible' ), 'headerRow is visible' );
+ assert.assertTrue( $contentRow.is( ':visible' ), 'contentRow is visible' );
+
+ $collapsible.on( 'afterCollapse.mw-collapsible', function () {
+ assert.assertTrue( $caption.is( ':visible' ), 'after collapsing: caption is still visible' );
+ assert.assertTrue( $headerRow.is( ':hidden' ), 'after collapsing: headerRow is hidden' );
+ assert.assertTrue( $contentRow.is( ':hidden' ), 'after collapsing: contentRow is hidden' );
+
+ $collapsible.on( 'afterExpand.mw-collapsible', function () {
+ assert.assertTrue( $caption.is( ':visible' ), 'after expanding: caption is still visible' );
+ assert.assertTrue( $headerRow.is( ':visible' ), 'after expanding: headerRow is visible' );
+ assert.assertTrue( $contentRow.is( ':visible' ), 'after expanding: contentRow is visible' );
+ QUnit.start();
+ } );
+
+ $toggle.trigger( 'click' );
+ } );
+
+ $toggle.trigger( 'click' );
+ }
+
+ QUnit.asyncTest( 'basic operation (<table> with caption)', 10, function ( assert ) {
+ tableWithCaptionTest( prepareCollapsible(
+ '<table class="mw-collapsible">' +
+ '<caption>' + loremIpsum + '</caption>' +
+ '<tr><th>' + loremIpsum + '</th><th>' + loremIpsum + '</th></tr>' +
+ '<tr><td>' + loremIpsum + '</td><td>' + loremIpsum + '</td></tr>' +
+ '<tr><td>' + loremIpsum + '</td><td>' + loremIpsum + '</td></tr>' +
+ '</table>'
+ ), assert );
+ } );
+
+ QUnit.asyncTest( 'basic operation (<table> with caption and <thead>)', 10, function ( assert ) {
+ tableWithCaptionTest( prepareCollapsible(
+ '<table class="mw-collapsible">' +
+ '<caption>' + loremIpsum + '</caption>' +
+ '<thead><tr><th>' + loremIpsum + '</th><th>' + loremIpsum + '</th></tr></thead>' +
+ '<tr><td>' + loremIpsum + '</td><td>' + loremIpsum + '</td></tr>' +
+ '<tr><td>' + loremIpsum + '</td><td>' + loremIpsum + '</td></tr>' +
+ '</table>'
+ ), assert );
+ } );
+
function listTest( listType, assert ) {
var $collapsible, $toggleItem, $contentItem, $toggle;
$collapsible = prepareCollapsible(