Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

"Tables": added refresh method. Fixes #5570 - Dynamically Adding Rows to Reflow Table Results in Unformatted New Rows #5791

Closed
wants to merge 8 commits into from

4 participants

@frequent

@uGoMobi, @Toddparker

table refresh method and unit tests.

Examples here: table column-toggle and table reflow-mode.

I hope I did not mix anything up manually copy&pasting between PCs (can't commit from my test environment...)

@jaspermdegroot
Collaborator

@frequent

Thanks a lot for the PR!
We have to see why PhantomJS times out on the test when we review this.
Can you sign the CLA please?

@frequent

@uGoMobi

I had problems on the last two async tests = "column-toggle-refresh" and "is popup-visible-when-clicked". Once I switched order (first column-toggle, then popup-visible) the tests passed on Firefox and Chrome. Checking CLA now

@gseguin
Collaborator

@frequent I tried to merge locally to test but there are too many merge conflicts. Could you merge it and push the merge commit on that branch?

@frequent

@gseguin: ok. will try tonight

frequent added some commits
@frequent frequent Merge remote-tracking branch 'upstream/master' into table-refresh
Conflicts:
	js/widgets/table.columntoggle.js
	js/widgets/table.js
	js/widgets/table.reflow.js
	tests/unit/table/index.html
269abd7
@frequent frequent updated table-refresh to new version db21f7f
@frequent

Sample page column-toggle here, reflow here. Unit tests passing on my local machine.

@FernandoFigueroa

Has this problem been resolved yet?? The sample pages worked fine for me, but when it will be available to everybody else?

@jaspermdegroot
Collaborator

@arschmitz @frequent - Can we still use this for the new refresh method for 1.4 or should we close this PR?

@frequent

@uGoMobi - I can make a new PR, kept all files of the 1.4. version. So up to you.

@jaspermdegroot
Collaborator

Closing this PR because we have to make the table widget modes proper widget extensions first. Let's work on a new PR after that. Thanks!

Ticket: #5856

@frequent

@uGoMobi : ok. Let's talk on IRC on how this should look

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 21, 2013
  1. @frequent
  2. @frequent

    cleaned up code

    frequent authored
  3. @frequent

    add missing start() tag

    frequent authored
  4. @frequent
  5. @frequent
  6. @frequent
Commits on Mar 29, 2013
  1. @frequent

    Merge remote-tracking branch 'upstream/master' into table-refresh

    frequent authored
    Conflicts:
    	js/widgets/table.columntoggle.js
    	js/widgets/table.js
    	js/widgets/table.reflow.js
    	tests/unit/table/index.html
  2. @frequent
This page is out of date. Refresh to see the latest.
View
95 js/widgets/table.columntoggle.js
@@ -31,6 +31,10 @@ $.widget( "mobile.table", $.mobile.table, {
},
_create: function() {
+ this.refresh();
+ },
+
+ refresh: function( create ) {
var id, $menuButton, $popup, $menu,
$table = this.element,
o = this.options,
@@ -40,64 +44,79 @@ $.widget( "mobile.table", $.mobile.table, {
$( this ).jqmData( "cells" )
.toggleClass( "ui-table-cell-hidden", !checked )
.toggleClass( "ui-table-cell-visible", checked );
- };
+ },
+ id = ( $table.attr( "id" ) || o.classes.popup ) + "-popup"; //TODO BETTER FALLBACK ID HERE
this._super();
-
+
if( o.mode !== "columntoggle" ) {
return;
}
- this.element.addClass( o.classes.columnToggleTable );
+ if ( o.set ) {
+ this.element.addClass( o.classes.columnToggleTable );
- id = ( $table.attr( "id" ) || o.classes.popup ) + "-popup"; //TODO BETTER FALLBACK ID HERE
- $menuButton = $( "<a href='#" + id + "' class='" + o.classes.columnBtn + "' data-" + ns + "rel='popup' data-" + ns + "mini='true'>" + o.columnBtnText + "</a>" );
- $popup = $( "<div data-" + ns + "role='popup' data-" + ns + "role='fieldcontain' class='" + o.classes.popup + "' id='" + id + "'></div>" );
- $menu = $( "<fieldset data-" + ns + "role='controlgroup'></fieldset>" );
+ $menuButton = $( "<a href='#" + id + "' class='" + o.classes.columnBtn + "' data-" + ns + "rel='popup' data-" + ns + "mini='true'>" + o.columnBtnText + "</a>" );
+ $popup = $( "<div data-" + ns + "role='popup' data-" + ns + "role='fieldcontain' class='" + o.classes.popup + "' id='" + id + "'></div>" );
+ $menu = $( "<fieldset data-" + ns + "role='controlgroup'></fieldset>" );
+ }
// create the hide/show toggles
- this.headers.not( "td" ).each( function() {
+ this.headers.not( "td" ).each( function( i ) {
var $this = $( this ),
priority = $this.jqmData( "priority" ),
$cells = $this.add( $this.jqmData( "cells" ) );
if( priority ) {
$cells.addClass( o.classes.priorityPrefix + priority );
-
- $("<label><input type='checkbox' checked />" + $this.text() + "</label>" )
- .appendTo( $menu )
- .children( 0 )
- .jqmData( "cells", $cells )
- .checkboxradio( {
- theme: o.columnPopupTheme
- });
+ if ( o.set ) {
+ $("<label><input type='checkbox' checked />" + $this.text() + "</label>" )
+ .appendTo( $menu )
+ .children( 0 )
+ .jqmData( "cells", $cells )
+ .checkboxradio( {
+ theme: o.columnPopupTheme
+ });
+ } else {
+ $('#' + id + ' fieldset div:eq(' + i +')').find('input').jqmData("cells", $cells);
+ }
}
});
- $menu.appendTo( $popup );
-
- // bind change event listeners to inputs - TODO: move to a private method?
- $menu.on( "change", "input", menuInputChange );
-
- $menuButton
- .insertBefore( $table )
- .buttonMarkup( {
- theme: o.columnBtnTheme
- });
+ if ( o.set ) {
+ $menu.appendTo( $popup );
+ }
- $popup
- .insertBefore( $table )
- .popup();
+ if ( $menu === undefined ) {
+ $menu = $('#' + id + ' fieldset');
+ }
- // refresh method
+ // bind change event listeners to inputs - TODO: move to a private method?
+ if ( o.set ) {
+ $menu.on( "change", "input", menuInputChange );
+
+ $menuButton
+ .insertBefore( $table )
+ .buttonMarkup( {
+ theme: o.columnBtnTheme
+ });
+
+ $popup
+ .insertBefore( $table )
+ .popup();
+ }
- this._on( $.mobile.window, { "throttledresize": "refresh" } );
+ // update method - renamed, else conflict with table("refresh")
+ this._on( $.mobile.window, { "throttledresize": "update" } );
$.extend( this, {
_menu: $menu,
_menuInputChange: menuInputChange
});
- this.refresh();
+ this.update();
+
+ // table is ready, set to false
+ o.set = false;
},
_destroy: function() {
@@ -105,11 +124,19 @@ $.widget( "mobile.table", $.mobile.table, {
this._super();
},
- refresh: function() {
+ update: function() {
+ var o = this.options;
this._menu.find( "input" ).each( function() {
var $this = $( this );
- this.checked = $this.jqmData( "cells" ).eq( 0 ).css( "display" ) === "table-cell";
+ if (this.checked) {
+ if ( !o.set ) {
+ $( this ).jqmData( "cells" ).addClass('ui-table-cell-visible');
+ }
+ $this.jqmData( "cells" ).eq( 0 ).css( "display" ) === "table-cell";
+ } else {
+ $this.jqmData( "cells" ).addClass('ui-table-cell-hidden');
+ }
$this.checkboxradio( "refresh" );
});
}
View
16 js/widgets/table.js
@@ -14,16 +14,24 @@ $.widget( "mobile.table", $.mobile.widget, {
classes: {
table: "ui-table"
},
+ set: true,
initSelector: ":jqmData(role='table')"
},
- _create: function() {
+ _create: function () {
+ this.refresh();
+ },
+
+ refresh: function () {
var $el = this.element,
+ o = this.options,
trs = this.element.find( "thead tr" ),
headers = this.element.find( "tr:eq(0)" ).children(),
allHeaders = headers.add( trs.children() );
- this.element.addClass( this.options.classes.table );
+ if ( o.set ) {
+ this.element.addClass( this.options.classes.table );
+ }
$.extend( this, {
@@ -52,7 +60,9 @@ $.widget( "mobile.table", $.mobile.widget, {
sel += ", :nth-child(" + ( coltally + 1 ) + ")";
}
}
-
+ if ( !o.set ) {
+ $(this).jqmData("cells", "");
+ }
// Store "cells" data on header as a reference to all cells in the same column as this TH
$this
.jqmData( "cells", $el.find( "tr" ).not( trs.eq( 0 ) ).not( this ).children( sel ) );
View
9 js/widgets/table.reflow.js
@@ -19,6 +19,10 @@ $.widget( "mobile.table", $.mobile.table, {
},
_create: function() {
+ this.refresh();
+ },
+
+ refresh: function() {
var o = this.options;
this._super();
@@ -28,7 +32,9 @@ $.widget( "mobile.table", $.mobile.table, {
return;
}
- this.element.addClass( o.classes.reflowTable );
+ if( o.set ) {
+ this.element.addClass( o.classes.reflowTable );
+ }
// get headers in reverse order so that top-level headers are appended last
$( this.allHeaders.get().reverse() ).each( function( i ) {
@@ -55,6 +61,7 @@ $.widget( "mobile.table", $.mobile.table, {
}
});
+ o.set = false;
}
});
Something went wrong with that request. Please try again.