jenkins-bot has submitted this change and it was merged.
Change subject: jquery.makeCollapsible: collapse to caption support
......................................................................
jquery.makeCollapsible: collapse to caption support
When collapsing a table with a caption, hide everything
except the caption.
Bug: 47139
Change-Id: I034574cb4dd823d64ff2b3c349457aaddd84281d
---
M resources/jquery/jquery.makeCollapsible.css
M resources/jquery/jquery.makeCollapsible.js
M tests/qunit/suites/resources/jquery/jquery.makeCollapsible.test.js
3 files changed, 90 insertions(+), 10 deletions(-)
Approvals:
Bartosz Dziewoński: Looks good to me, approved
jenkins-bot: Verified
diff --git a/resources/jquery/jquery.makeCollapsible.css
b/resources/jquery/jquery.makeCollapsible.css
index 993fa8c..38938ab 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 0cd6417..30be2bd 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 6da56ed..3c508d4 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(
--
To view, visit https://gerrit.wikimedia.org/r/97348
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I034574cb4dd823d64ff2b3c349457aaddd84281d
Gerrit-PatchSet: 7
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Theopolisme <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Jack Phoenix <[email protected]>
Gerrit-Reviewer: Krinkle <[email protected]>
Gerrit-Reviewer: Theopolisme <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
