Permalink
Browse files

Columntoggle table: Use delegation to attach events to the checkboxes

Fixes #6683
  • Loading branch information...
gabrielschulhof committed Oct 31, 2013
1 parent 143bdae commit d8375b7bd86cb50c5e3561a2814561210fd80363
Showing with 88 additions and 12 deletions.
  1. +2 −9 js/widgets/table.columntoggle.js
  2. +27 −0 tests/unit/table/index.html
  3. +59 −3 tests/unit/table/table_core.js
@@ -41,7 +41,6 @@ $.widget( "mobile.table", $.mobile.table, {
if ( this.options.enhanced ) {
this._menu = $( this.document[ 0 ].getElementById( this._id() + "-popup" ) ).children().first();
this._addToggles( this._menu, true );
this._bindToggles( this._menu );
} else {
this._menu = this._enhanceColToggle();
this.element.addClass( this.options.classes.columnToggleTable );
@@ -64,13 +63,8 @@ $.widget( "mobile.table", $.mobile.table, {
this._on( this.window, {
throttledresize: "_setToggleState"
});
},
_bindToggles: function( menu ) {
var inputs = menu.find( "input" );
this._on( inputs, {
change: "_menuInputChange"
this._on( this._menu, {
"change input": "_menuInputChange"
});
},
@@ -113,7 +107,6 @@ $.widget( "mobile.table", $.mobile.table, {
// set bindings here
if ( !keep ) {
menu.controlgroup( "refresh" );
this._bindToggles( menu );
}
},
@@ -135,6 +135,33 @@ <h1>Basic Table</h1>
<h1>Basic Table</h1>
</div>
<div data-nstest-role="content">
<table data-nstest-role="table" data-nstest-mode="columntoggle" id="toggle-column-test">
<thead>
<tr class="ui-bar-d">
<th data-nstest-priority="2">Rank</th>
<th>Movie Title</th>
<th data-nstest-priority="3">Year</th>
<th data-nstest-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
<th data-nstest-priority="5">Reviews</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
<td>1941</td>
<td>100%</td>
<td>74</td>
</tr>
<tr>
<th>2</th>
<td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
<td>1942</td>
<td>97%</td>
<td>64</td>
</tr>
</tbody>
</table>
<table data-nstest-role="table" data-nstest-mode="columntoggle" id="movie-table-column">
<thead>
<tr class="ui-bar-d">
@@ -157,7 +157,7 @@
asyncTest( "The page should be enhanced correctly" , function(){
setTimeout(function() {
var $popup = $('#column-table-test #movie-table-column-popup-popup'),
button = $('#column-table-test .ui-table-columntoggle-btn');
button = $('#column-table-test .ui-table-columntoggle-btn:last');
ok($('#column-table-test .ui-table-columntoggle').length, ".ui-table-columntoggle class added to table element");
ok($('#column-table-test .ui-table-columntoggle-btn').length, ".ui-table-columntoggle-btn button added");
@@ -173,6 +173,62 @@
}, 800);
});
asyncTest( "Toggle column", function() {
expect( 6 );
var initial, post,
input = $( "#toggle-column-test-popup input:nth(1)" ),
column = $( "#toggle-column-test tr>:nth-child(3)" ),
// Ascertain visibility and consistency
checkColumn = function( messagePrefix ) {
var visible = undefined,
inconsistent = false;
column.each( function() {
if ( visible === undefined ) {
visible = !!$( this ).is( ":visible" );
} else {
inconsistent = ( !!$( this ).is( ":visible" ) !== visible );
}
if ( inconsistent ) {
// Stop checking
return false;
}
});
deepEqual( inconsistent, false,
messagePrefix + " visibility of column members is consistent" );
deepEqual( visible, input.is( ":checked" ),
messagePrefix + " visibility of column members coincides with the " +
"corresponding column checkbox state" );
return visible;
};
$.testHelper.detailedEventCascade([
function() {
initial = checkColumn( "Initially: " );
input.click().checkboxradio( "refresh" ).trigger( "change" );
},
{
change: { src: input, event: "change.toggleColumn1" }
},
function( result ) {
deepEqual( result.change.timedOut, false, "Clicking the checkbox " +
"has resulted in a 'change' event" );
post = checkColumn( "After clicking: " );
deepEqual( initial !== post, true,
"Visibility was toggled by clicking the checkbox" );
start();
}
]);
});
asyncTest( "Column toggle table refresh" , function(){
// hide one column and refresh
@@ -258,15 +314,15 @@
var $input;
$.testHelper.pageSequence([
function() {
$( ".ui-table-columntoggle-btn" ).click();
$( ".ui-table-columntoggle-btn:last" ).click();
},
function() {
setTimeout(function() {
ok( $( "#movie-table-column-popup-popup" ).not( ".ui-popup-hidden" ) , "Table popup is shown on click" );
}, 800);
},
function() {
$input = $( ".ui-popup-container" ).find( "input:first" );
$input = $( "#movie-table-column-popup-popup" ).find( "input:first" );
$input.click();
},
function(){

0 comments on commit d8375b7

Please sign in to comment.