MatthiasDD has uploaded a new change for review.
https://gerrit.wikimedia.org/r/291569
Change subject: jquery.makeCollapsible: Tables with more header rows and tfoot
......................................................................
jquery.makeCollapsible: Tables with more header rows and tfoot
Make collapsible on tables with more than one header row and footer row.
Hide all rows except the first if $defaultToggle in it.
Bug: T114607
Change-Id: I1b5cf084d56d7eac093a04e8301e426f5d5d5d28
---
M resources/src/jquery/jquery.makeCollapsible.js
M tests/qunit/suites/resources/jquery/jquery.makeCollapsible.test.js
2 files changed, 49 insertions(+), 9 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/69/291569/1
diff --git a/resources/src/jquery/jquery.makeCollapsible.js
b/resources/src/jquery/jquery.makeCollapsible.js
index bdb5ce8..85a7e45 100644
--- a/resources/src/jquery/jquery.makeCollapsible.js
+++ b/resources/src/jquery/jquery.makeCollapsible.js
@@ -54,12 +54,7 @@
if ( !options.plainMode && $collapsible.is( 'table' ) ) {
// Tables
- // 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'
);
- }
+ $containers = $collapsible.find( '> * > tr' );
if ( $defaultToggle ) {
// Exclude table row containing togglelink
$containers = $containers.not(
$defaultToggle.closest( 'tr' ) );
diff --git a/tests/qunit/suites/resources/jquery/jquery.makeCollapsible.test.js
b/tests/qunit/suites/resources/jquery/jquery.makeCollapsible.test.js
index c51e409..1e1d4b8 100644
--- a/tests/qunit/suites/resources/jquery/jquery.makeCollapsible.test.js
+++ b/tests/qunit/suites/resources/jquery/jquery.makeCollapsible.test.js
@@ -113,6 +113,51 @@
test.clock.tick( 500 );
} );
+ QUnit.test( 'basic operation (<table>) with <thead> and <tfoot>', 13,
function ( assert ) {
+ var test = this,
+ $collapsible = prepareCollapsible(
+ '<table class="mw-collapsible">' +
+ '<thead><tr><th colspan="2">' +
loremIpsum + '</th></tr>' +
+ ' <tr><th>' + loremIpsum +
'</th><th>' + loremIpsum + '</th></tr></thead>' +
+ '<tbody><tr><td>' + loremIpsum +
'</td><td>' + loremIpsum + '</td></tr>' +
+ ' <tr><td>' + loremIpsum +
'</td><td>' + loremIpsum + '</td></tr></tbody>' +
+ '<tfoot><tr><td>' + loremIpsum +
'</td><td>' + loremIpsum + '</td></tr></tfoot>' +
+ '</table>'
+ ),
+ $headerRow1 = $collapsible.find( 'tr:eq(0)' ),
+ $headerRow2 = $collapsible.find( 'tr:eq(1)' ),
+ $contentRow = $collapsible.find( 'tr:eq(2)' ),
+ $footerRow = $collapsible.find( 'tr:last' ),
+ $toggle = $headerRow1.find( '.mw-collapsible-toggle' );
+
+ assert.equal( $toggle.length, 1, 'toggle is added to the cell
of first row' );
+
+ assert.assertTrue( $headerRow1.is( ':visible' ), 'headerRow1 is
visible' );
+ assert.assertTrue( $headerRow2.is( ':visible' ), 'headerRow2 is
visible' );
+ assert.assertTrue( $contentRow.is( ':visible' ), 'contentRow is
visible' );
+ assert.assertTrue( $footerRow.is( ':visible' ), 'footerRow is
visible' );
+
+ $collapsible.on( 'afterCollapse.mw-collapsible', function () {
+ assert.assertTrue( $headerRow1.is( ':visible' ), 'after
collapsing: headerRow1 is still visible' );
+ assert.assertTrue( $headerRow2.is( ':hidden' ), 'after
collapsing: headerRow2 is hidden' );
+ assert.assertTrue( $contentRow.is( ':hidden' ), 'after
collapsing: contentRow is hidden' );
+ assert.assertTrue( $footerRow.is( ':hidden' ), 'after
collapsing: footerRow is hidden' );
+
+ $collapsible.on( 'afterExpand.mw-collapsible', function
() {
+ assert.assertTrue( $headerRow1.is( ':visible'
), 'after expanding: headerRow1 is still visible' );
+ assert.assertTrue( $headerRow2.is( ':visible'
), 'after expanding: headerRow2 is visible' );
+ assert.assertTrue( $contentRow.is( ':visible'
), 'after expanding: contentRow is visible' );
+ assert.assertTrue( $footerRow.is( ':visible' ),
'after expanding: footerRow is visible' );
+ } );
+
+ $toggle.trigger( 'click' );
+ test.clock.tick( 500 );
+ } );
+
+ $toggle.trigger( 'click' );
+ test.clock.tick( 500 );
+ } );
+
function tableWithCaptionTest( $collapsible, test, assert ) {
var $caption = $collapsible.find( 'caption' ),
$headerRow = $collapsible.find( 'tr:first' ),
@@ -155,13 +200,13 @@
), this, assert );
} );
- QUnit.test( 'basic operation (<table> with caption and <thead>)', 10,
function ( assert ) {
+ QUnit.test( 'basic operation (<table> with caption and <thead> and
<tfoot>)', 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>' +
+ ' <tr><td>' + loremIpsum + '</td><td>' +
loremIpsum + '</td></tr>' +
+ '<tfoot><tr><td>' + loremIpsum + '</td><td>' +
loremIpsum + '</td></tr></tfoot>' +
'</table>'
), this, assert );
} );
--
To view, visit https://gerrit.wikimedia.org/r/291569
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I1b5cf084d56d7eac093a04e8301e426f5d5d5d28
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: MatthiasDD <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
