Skip to content

Commit efdada5

Browse files
frequentjaspermdegroot
frequent
authored and
jaspermdegroot
committed
"Tables": added refresh method. Fixes jquery-archive#5570 
1 parent 60789e2 commit efdada5

File tree

5 files changed

+142
-46
lines changed

5 files changed

+142
-46
lines changed

‎js/widgets/table.columntoggle.js

Lines changed: 58 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -34,26 +34,29 @@ $.mobile.table.prototype.options.classes = $.extend(
3434
}
3535
);
3636

37-
$.mobile.document.delegate( ":jqmData(role='table')", "tablecreate", function() {
37+
$.mobile.document.delegate( ":jqmData(role='table')", "tablecreate tableupdate", function(e) {
3838

3939
var $table = $( this ),
40+
event = e.type,
4041
self = $table.data( "mobile-table" ),
4142
o = self.options,
42-
ns = $.mobile.ns;
43+
ns = $.mobile.ns,
44+
id = ( $table.attr( "id" ) || o.classes.popup ) + "-popup"; //TODO BETTER FALLBACK ID HERE
4345

4446
if( o.mode !== "columntoggle" ){
4547
return;
4648
}
4749

48-
self.element.addClass( o.classes.columnToggleTable );
50+
if ( event !== "tableupdate") {
51+
self.element.addClass( o.classes.columnToggleTable );
4952

50-
var id = ( $table.attr( "id" ) || o.classes.popup ) + "-popup", //TODO BETTER FALLBACK ID HERE
51-
$menuButton = $( "<a href='#" + id + "' class='" + o.classes.columnBtn + "' data-" + ns + "rel='popup' data-" + ns + "mini='true'>" + o.columnBtnText + "</a>" ),
52-
$popup = $( "<div data-" + ns + "role='popup' data-" + ns + "role='fieldcontain' class='" + o.classes.popup + "' id='" + id + "'></div>"),
53-
$menu = $("<fieldset data-" + ns + "role='controlgroup'></fieldset>");
53+
var $menuButton = $( "<a href='#" + id + "' class='" + o.classes.columnBtn + "' data-" + ns + "rel='popup' data-" + ns + "mini='true'>" + o.columnBtnText + "</a>" ),
54+
$popup = $( "<div data-" + ns + "role='popup' data-" + ns + "role='fieldcontain' class='" + o.classes.popup + "' id='" + id + "'></div>"),
55+
$menu = $("<fieldset data-" + ns + "role='controlgroup'></fieldset>");
56+
}
5457

5558
// create the hide/show toggles
56-
self.headers.not( "td" ).each(function(){
59+
self.headers.not( "td" ).each(function(i){
5760

5861
var priority = $( this ).jqmData( "priority" ),
5962
$cells = $( this ).add( $( this ).jqmData( "cells" ) );
@@ -62,48 +65,68 @@ $.mobile.document.delegate( ":jqmData(role='table')", "tablecreate", function()
6265

6366
$cells.addClass( o.classes.priorityPrefix + priority );
6467

65-
$("<label><input type='checkbox' checked />" + $( this ).text() + "</label>" )
66-
.appendTo( $menu )
67-
.children( 0 )
68-
.jqmData( "cells", $cells )
69-
.checkboxradio({
70-
theme: o.columnPopupTheme
71-
});
68+
if (event !== "tableupdate") {
69+
$("<label><input type='checkbox' checked />" + $( this ).text() + "</label>" )
70+
.appendTo( $menu )
71+
.children( 0 )
72+
.jqmData( "cells", $cells )
73+
.checkboxradio({
74+
theme: o.columnPopupTheme
75+
});
76+
} else {
77+
$('#'+id+ ' fieldset div:eq('+i+')').find('input').jqmData("cells", $cells)
78+
}
7279
}
7380
});
81+
if (event !== "tableupdate") {
7482
$menu.appendTo( $popup );
83+
}
7584

7685
// bind change event listeners to inputs - TODO: move to a private method?
77-
$menu.on( "change", "input", function( e ){
78-
if( this.checked ){
79-
$( this ).jqmData( "cells" ).removeClass( "ui-table-cell-hidden" ).addClass( "ui-table-cell-visible" );
80-
}
81-
else {
82-
$( this ).jqmData( "cells" ).removeClass( "ui-table-cell-visible" ).addClass( "ui-table-cell-hidden" );
83-
}
84-
});
86+
if ($menu === undefined) {
87+
$switchboard = $('#'+id+' fieldset');
88+
} else {
89+
$switchboard = $menu;
90+
}
8591

86-
$menuButton
87-
.insertBefore( $table )
88-
.buttonMarkup({
89-
theme: o.columnBtnTheme
92+
if (event !== "tableupdate") {
93+
$switchboard.on( "change", "input", function( e ){
94+
if( this.checked ){
95+
$( this ).jqmData( "cells" ).removeClass( "ui-table-cell-hidden" ).addClass( "ui-table-cell-visible" );
96+
} else {
97+
$( this ).jqmData( "cells" ).removeClass( "ui-table-cell-visible" ).addClass( "ui-table-cell-hidden" );
98+
}
9099
});
91100

92-
$popup
93-
.insertBefore( $table )
94-
.popup();
101+
$menuButton
102+
.insertBefore( $table )
103+
.buttonMarkup({
104+
theme: o.columnBtnTheme
105+
});
106+
107+
$popup
108+
.insertBefore( $table )
109+
.popup();
110+
}
95111

96112
// refresh method
97-
self.refresh = function(){
98-
$menu.find( "input" ).each( function(){
99-
this.checked = $( this ).jqmData( "cells" ).eq(0).css( "display" ) === "table-cell";
113+
self.update = function(){
114+
$switchboard.find( "input" ).each( function(){
115+
if (this.checked) {
116+
this.checked = $( this ).jqmData( "cells" ).eq(0).css( "display" ) === "table-cell";
117+
if (event === "tableupdate") {
118+
$( this ).jqmData( "cells" ).addClass('ui-table-cell-visible');
119+
}
120+
} else {
121+
$( this ).jqmData( "cells" ).addClass('ui-table-cell-hidden');
122+
}
100123
$( this ).checkboxradio( "refresh" );
101124
});
102125
};
103126

104-
$.mobile.window.on( "throttledresize", self.refresh );
127+
$.mobile.window.on( "throttledresize", self.update );
105128

106-
self.refresh();
129+
self.update();
107130

108131
});
109132

‎js/widgets/table.js

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,18 @@ $.widget( "mobile.table", $.mobile.widget, {
1919
},
2020

2121
_create: function() {
22+
var self = this;
23+
self.refresh( true );
24+
},
25+
26+
refresh: function (create) {
2227

2328
var self = this,
2429
trs = this.element.find( "thead tr" );
2530

26-
this.element.addClass( this.options.classes.table );
31+
if ( create ) {
32+
this.element.addClass( this.options.classes.table );
33+
}
2734

2835
// Expose headers and allHeaders properties on the widget
2936
// headers references the THs within the first TR in the table
@@ -40,7 +47,7 @@ $.widget( "mobile.table", $.mobile.widget, {
4047

4148
var span = parseInt( $( this ).attr( "colspan" ), 10 ),
4249
sel = ":nth-child(" + ( coltally + 1 ) + ")";
43-
50+
4451
$( this )
4552
.jqmData( "colstart", coltally + 1 );
4653

@@ -51,16 +58,22 @@ $.widget( "mobile.table", $.mobile.widget, {
5158
}
5259
}
5360

61+
if (create === undefined) {
62+
$(this).jqmData("cells","");
63+
}
5464
// Store "cells" data on header as a reference to all cells in the same column as this TH
5565
$( this )
5666
.jqmData( "cells", self.element.find( "tr" ).not( trs.eq(0) ).not( this ).children( sel ) );
5767

5868
coltally++;
59-
6069
});
6170

6271
});
6372

73+
// update table modes
74+
if (create === undefined) {
75+
this.element.trigger('tableupdate');
76+
}
6477
}
6578

6679
});

‎js/widgets/table.reflow.js

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,10 @@ $.mobile.table.prototype.options.classes = $.extend(
1919
}
2020
);
2121

22-
$.mobile.document.delegate( ":jqmData(role='table')", "tablecreate", function() {
22+
$.mobile.document.delegate( ":jqmData(role='table')", "tablecreate tableupdate", function(e) {
2323

2424
var $table = $( this ),
25+
event = e.type,
2526
self = $table.data( "mobile-table" ),
2627
o = self.options;
2728

@@ -30,7 +31,9 @@ $.mobile.document.delegate( ":jqmData(role='table')", "tablecreate", function()
3031
return;
3132
}
3233

33-
self.element.addClass( o.classes.reflowTable );
34+
if (event !== "tableupdate") {
35+
self.element.addClass( o.classes.reflowTable );
36+
}
3437

3538
// get headers in reverse order so that top-level headers are appended last
3639
var reverseHeaders = $( self.allHeaders.get().reverse() );
@@ -41,13 +44,10 @@ $.mobile.document.delegate( ":jqmData(role='table')", "tablecreate", function()
4144
colstart = $( this ).jqmData( "colstart" ),
4245
hierarchyClass = $cells.not( this ).filter( "thead th" ).length && " ui-table-cell-label-top",
4346
text = $(this).text();
44-
4547
if( text !== "" ){
46-
4748
if( hierarchyClass ){
4849
var iteration = parseInt( $( this ).attr( "colspan" ), 10 ),
4950
filter = "";
50-
5151
if( iteration ){
5252
filter = "td:nth-child("+ iteration +"n + " + ( colstart ) +")";
5353
}
@@ -56,10 +56,8 @@ $.mobile.document.delegate( ":jqmData(role='table')", "tablecreate", function()
5656
else {
5757
$cells.prepend( "<b class='" + o.classes.cellLabels + "'>" + text + "</b>" );
5858
}
59-
6059
}
6160
});
62-
6361
});
6462

6563
})( jQuery );

‎tests/unit/table/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,19 @@
3333
<link rel="stylesheet" href="../../../external/qunit.css"/>
3434

3535
<script src="../swarminject.js"></script>
36+
37+
<script type="text/javascript">
38+
// basic
39+
$(window).on('refresh_test_table', function (e, data) {
40+
var tb = $(data).find('tbody'),
41+
newRow = '<tr><th data-test="abc">1</th><td>2</td><td>3</td><td data-col="3">4</td><td>5</td></tr>';
42+
tb.empty()
43+
.append(newRow)
44+
.closest('table')
45+
.table('refresh');
46+
});
47+
</script>
48+
3649
</head>
3750
<body>
3851

‎tests/unit/table/table_core.js

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,23 @@
4646
start();
4747
}, 800);
4848
});
49+
asyncTest("Refresh updates table headers correctly",
50+
function () {
51+
setTimeout(function () {
52+
$(window).trigger("refresh_test_table", ["#basic-table-test"]);
53+
var $table = $('#basic-table-test .ui-table'),
54+
$firstHeaderCell = $table.find('thead tr th').eq(0),
55+
$cellLookUp = $table.find('tbody tr').eq(0).find('th td').eq(0).jqmData("test");
56+
ok($table.length, "table still enhanced");
57+
ok($firstHeaderCell.jqmData("cells").length,
58+
"column cells still assigned to header cell");
59+
equal($firstHeaderCell.jqmData('cells').eq(0).closest("table").attr('id'),
60+
"basic-table-test",
61+
"cell stored is a refreshed cell (currently in the table");
62+
equal($cellLookUp, $firstHeaderCell.jqmData('cells').eq(0).jqmData("test"),
63+
"referenced cell is in the correct column");
64+
}, 1200);
65+
});
4966
module( "Reflow Mode", {
5067
setup: function(){
5168
var hash = "#reflow-table-test";
@@ -80,6 +97,16 @@
8097
start();
8198
}, 800);
8299
});
100+
asyncTest( "Reflow table refresh" , function(){
101+
setTimeout(function () {
102+
// refresh table
103+
$(window).trigger("refresh_test_table", ["#reflow-table-test"]);
104+
var $table = $('#reflow-table-test .ui-table'),
105+
labels = $tds.find( "b.ui-table-cell-label" );
106+
ok( $table.length, "table still enhanced");
107+
ok( labels = $tds.find( "b.ui-table-cell-label" ), "Labels still there");
108+
}, 1200);
109+
});
83110
module( "Column toggle table Mode", {
84111
setup: function(){
85112
var hash = "#column-table-test";
@@ -109,7 +136,29 @@
109136
start();
110137
}, 800);
111138
});
112-
139+
asyncTest( "Column toggle table refresh" , function(){
140+
setTimeout(function () {
141+
// hide one column and refresh
142+
var $input = $( ".ui-popup-container" ).find( "input" ).eq(2);
143+
144+
$input.trigger('click', function(){
145+
$(window).trigger("refresh_test_table", ["#column-table-test"]);
146+
var $table = $('#column-table-test .ui-table'),
147+
$second_input = $( ".ui-popup-container" ).find( "input" ).eq(0),
148+
$visibleCells = $table.find("tbody tr").eq(1).find("th, td").not('.ui-table-cell-hidden'),
149+
$visibleHeaders = $table.find("tbody tr").eq(0).find("th, td").not('.ui-table-cell-hidden');
150+
151+
ok( $table.length, "table still enhanced");
152+
equal( $table.find('tbody tr').eq(1)
153+
.find("th, td").eq(2).hasClass('ui-table-cell-hidden'), true,
154+
"random cell on hidden column has ui-table-cell-hidden, class");
155+
ok( $input.is( ":checked" ), false, "input is still not checked after refresh");
156+
equal($second_input.jqmData("cells").eq(0).jqmData("test"), "abc",
157+
"cell reference in popup is to cell currently in table");
158+
equal($visibleCells.length, $visibleHeaders.length, "same number of headers and rows visible");
159+
});
160+
}, 1200);
161+
});
113162
asyncTest( "The dialog should become visible when button is clicked" , function(){
114163
expect( 2 );
115164
var $input;

0 commit comments

Comments
 (0)