jquery.makeCollapsible: collapse to caption support

When collapsing a table with a caption, hide everything
except the caption.

Bug: 47139
Change-Id: I034574cb4dd823d64ff2b3c349457aaddd84281d

diff --git a/resources/jquery/jquery.makeCollapsible.css b/resources/jquery/jquery.makeCollapsible.css
index 993fa8c..38938ab 100644 (file)
--- a/resources/jquery/jquery.makeCollapsible.css
+++ b/resources/jquery/jquery.makeCollapsible.css
@@ -3,6 +3,11 @@
        float: right;
 }
 
+/* collapse links in captions should be inline */
+caption .mw-collapsible-toggle {
+       float: none;
+}
+
 /* list-items go as wide as their parent element, don't float them inside list items */
 li .mw-collapsible-toggle {
        float: none;

diff --git a/resources/jquery/jquery.makeCollapsible.js b/resources/jquery/jquery.makeCollapsible.js
index 0cd6417..30be2bd 100644 (file)
--- a/resources/jquery/jquery.makeCollapsible.js
+++ b/resources/jquery/jquery.makeCollapsible.js
@@ -61,7 +61,12 @@
 
                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' ) );
@@ -235,7 +240,7 @@
                }
 
                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()
@@ -313,16 +318,32 @@
                                // 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' ) ) {

diff --git a/tests/qunit/suites/resources/jquery/jquery.makeCollapsible.test.js b/tests/qunit/suites/resources/jquery/jquery.makeCollapsible.test.js
index 6da56ed..3c508d4 100644 (file)
--- a/tests/qunit/suites/resources/jquery/jquery.makeCollapsible.test.js
+++ b/tests/qunit/suites/resources/jquery/jquery.makeCollapsible.test.js
@@ -107,6 +107,60 @@
                $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(