From ba8f2a605c8db1988391975093ec84ad8aee8ce9 Mon Sep 17 00:00:00 2001
From: theopolisme <theopolismewiki@gmail.com>
Date: Sat, 23 Nov 2013 15:35:40 -0600
Subject: [PATCH] jquery.makeCollapsible: collapse to caption support

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

Bug: 47139
Change-Id: I034574cb4dd823d64ff2b3c349457aaddd84281d
---
 resources/jquery/jquery.makeCollapsible.css   |  5 ++
 resources/jquery/jquery.makeCollapsible.js    | 41 ++++++++++----
 .../jquery/jquery.makeCollapsible.test.js     | 54 +++++++++++++++++++
 3 files changed, 90 insertions(+), 10 deletions(-)

diff --git a/resources/jquery/jquery.makeCollapsible.css b/resources/jquery/jquery.makeCollapsible.css
index 993fa8c68c..38938abfc3 100644
--- 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 0cd6417c29..30be2bdd6a 100644
--- 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 6da56ed2dc..3c508d421c 100644
--- 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(
-- 
2.20.1