Table: Implement Classes Option #8349

Closed
wants to merge 83 commits into
from

Projects

None yet

4 participants

@cgack
Contributor
cgack commented Dec 16, 2015

This includes the changes made in the table review branch https://github.com/jquery/jquery-mobile/tree/7360-table-review

gabrielschulhof and others added some commits May 6, 2014
@gabrielschulhof @cgack gabrielschulhof Table: Add _destroy() 50ba51e
@gabrielschulhof @cgack gabrielschulhof Table: Test _destroy() 7c4b7e4
@gabrielschulhof @cgack gabrielschulhof Table: Remove $.extend() and simplify _setHeaders() 8a98519
@gabrielschulhof @cgack gabrielschulhof Table: Record UI elements both when pre-rendered and not 26cc4ce
@gabrielschulhof @cgack gabrielschulhof Table: _destroy() re-format eb29a9b
@gabrielschulhof @cgack gabrielschulhof Table: Implement _setOptions() for "disabled" 72638f4
@gabrielschulhof @cgack gabrielschulhof Table: Simplify reflow instantiation 326e271
@gabrielschulhof @cgack gabrielschulhof Table: "create" parameter for _refresh() is only used in columntoggle
Thus, replace it with an instance variable turned on at the beginning of
_create() and turned off at the end of _create(). This removes the need for
_refresh(). refresh() can now handle the actual refresh, and rebuild() becomes
and alias for refresh(). We should deprecate rebuild() in favour of refresh().
ace7937
@gabrielschulhof @cgack gabrielschulhof Table: Replace references to "rebuild" with "refresh" in the tests 2c99f52
@gabrielschulhof @cgack gabrielschulhof Table: Testing disable and grouped headers 781f471
@gabrielschulhof @cgack gabrielschulhof Table: Implement _setOptions() for style options 644ecde
@gabrielschulhof @cgack gabrielschulhof Table: Add columntoggle style option tests ad89eff
@gabrielschulhof @cgack gabrielschulhof Table: Simplify the way headers are retrieved
This also speeds things up: http://jsperf.com/table-header-selector
fd8dcf0
@gabrielschulhof @cgack gabrielschulhof Table: Stop querying the table for "thead tr" in a loop 2a20f41
@gabrielschulhof @cgack gabrielschulhof Table: Stop repeatedly retrieving all rows of the table except the first e6698a2
@gabrielschulhof @cgack gabrielschulhof Table: Add individual-modules tests for reflow and columntoggle 9c44da2
@gabrielschulhof @cgack gabrielschulhof Table: Added comment about rebuild() method deprecation c4d644c
@gabrielschulhof @cgack gabrielschulhof Table: Simplify reflow refresh 0466362
@gabrielschulhof @cgack gabrielschulhof Table: Calculate which cells to unlock inside _unlockCells() d864e02
@gabrielschulhof @cgack gabrielschulhof Table: Split locked-column-recording/restoring into a pair of functions 20789b0
@gabrielschulhof @cgack gabrielschulhof Table: Restore both forced-hidden and forced-shown columns at refresh() f44fa7d
@gabrielschulhof @cgack gabrielschulhof Table: Simplify and speed up tests a5a28ef
@gabrielschulhof @cgack gabrielschulhof Table: Make sure column is hidden for testing .prop( "checked", false )
Sometimes the column starts out as not visible, and sometimes it starts out as
visible. Before making sure that .prop( "checked", false ) has no effect, the
column must be rendered invisible irrespective of its starting state.
13e94df
@gabrielschulhof @cgack gabrielschulhof Table: Check both forced-hidden and forced-visible columns 4a9dcb9
@gabrielschulhof @cgack gabrielschulhof Table: Expose unlock() 3095104
@gabrielschulhof @cgack gabrielschulhof Table: Add comments about this._instantiating d6b8559
@gabrielschulhof @cgack gabrielschulhof Table: Remove demo-specific classes from grouped test 95f1b99
@gabrielschulhof @cgack gabrielschulhof Table: Ensure correct reflow cells have class "ui-table-cell-label-top" 258888f
@gabrielschulhof @cgack gabrielschulhof Table: Reduced line length in individual module tests 03f54ac
@gabrielschulhof @cgack gabrielschulhof Table: Copy "classes" option value instead of extending one object 99a8a7e
@gabrielschulhof @cgack gabrielschulhof Table: Separate popup-related functionality
This introduces the extension and moves only the major portions.
1fbaf59
@gabrielschulhof @cgack gabrielschulhof Table: Move popup-specific portions of _destroy() 245f317
@gabrielschulhof @cgack gabrielschulhof Table: Move _id() and popup-specific portions of _create() 94f80dd
@gabrielschulhof @cgack gabrielschulhof Table: Separate popup-related and priority-related enhancement d7571f2
@gabrielschulhof @cgack gabrielschulhof Table: Columntoggle tests must refer to the popup extension 2cc1108
@gabrielschulhof @cgack gabrielschulhof Table: Add tests for no-ui columntoggle eaa3435
@gabrielschulhof @cgack gabrielschulhof Table: Add structural CSS for popup 258c354
@gabrielschulhof @cgack gabrielschulhof Table: Test that reflow grouped column labels are OK after refresh() 6922b99
@gabrielschulhof @cgack gabrielschulhof Table: Introduce option "columnButton" (true/false) 6796201
@gabrielschulhof @cgack gabrielschulhof Table: Rename columntoggle style option tests acd430e
@gabrielschulhof @cgack gabrielschulhof Table: Add tests for new option "columnButton" 3aaf598
@gabrielschulhof @cgack gabrielschulhof Table: Shorten line length 0e9d5d5
@gabrielschulhof @cgack gabrielschulhof Table: Introduce columntoggle method setColumnVisibility() 58f376a
@gabrielschulhof @cgack gabrielschulhof Table: Add demo illustrating button suppression b4dd86d
@gabrielschulhof @cgack gabrielschulhof Table: No need to special case iteration over headers 0c14c86
@gabrielschulhof @cgack gabrielschulhof Table: Implement and test option columnUi 7dcc701
@gabrielschulhof @cgack gabrielschulhof Table: Do not update columns that have no priority set 99142e9
@gabrielschulhof @cgack gabrielschulhof Table: Fix columntoggle prerendered unit test markup 9d50e3d
@gabrielschulhof @cgack gabrielschulhof Table: Forgot ID on columntoggle prerendered destroy test button fd78bd3
@gabrielschulhof @cgack gabrielschulhof Table: Added grouped header tests 91928e4
@gabrielschulhof @cgack gabrielschulhof Table: Reuse option tests on prerendered tables 9d16b72
@gabrielschulhof @cgack gabrielschulhof Table: Leave reflow colstart attributes in place when prerendered aa983ad
@gabrielschulhof @cgack gabrielschulhof Table: Add test for prerendered reflow _destroy() 519c587
@gabrielschulhof @cgack gabrielschulhof Table: Test grouped header case with only one subheader in the group 3219f74
@gabrielschulhof @cgack gabrielschulhof Table: Add columntoggle test for setColumnVisibility() 0cfa71c
@gabrielschulhof @cgack gabrielschulhof Table: Test setColumnVisibility() when there's a popup 9d993d7
@gabrielschulhof @cgack gabrielschulhof Table: Add columntoggle test for generated widget ID 33cf0d0
@gabrielschulhof @cgack gabrielschulhof Table: Test turning on columnButton when it's initially false 851ed55
@gabrielschulhof @cgack gabrielschulhof Table: Test correct enhancement when option columnUi is initially false 555a074
@gabrielschulhof @cgack gabrielschulhof Table: Account for enhanced case when columnButton gets turned on d8db3b5
@gabrielschulhof @cgack gabrielschulhof Table: add class ui-state-disabled if initially disabled 381edbd
@gabrielschulhof @cgack gabrielschulhof Table: Demo setColumnVisibility() and custom UI with columnUi: false 4de1b83
@gabrielschulhof @cgack gabrielschulhof Table: Moving existing tests to integration/ da482e1
@gabrielschulhof @cgack gabrielschulhof Table: True unit tests for the basic table 4486c54
@gabrielschulhof @cgack gabrielschulhof Table: Add prefix to _create() test 8fe88ba
@gabrielschulhof @cgack gabrielschulhof Table: Add reflow table unit tests 61508d4
@gabrielschulhof @cgack gabrielschulhof Table: Correct grouped tests 334dbd2
@gabrielschulhof @cgack gabrielschulhof Table: Correctly assert contents of grouped header "cells" key 6bb26b1
@gabrielschulhof @cgack gabrielschulhof Table: Update reflow comment about processing headers in reverse 5079070
@gabrielschulhof @cgack gabrielschulhof Table: Add columntoggle unit tests 6bfc248
@gabrielschulhof @cgack gabrielschulhof Table: Move _recordLockedColumns() and _restoreLockedColumns() to popup 38a0ba1
@gabrielschulhof @cgack gabrielschulhof Table: Add "table" class key to reflow _destroy() test case mockup 80c4c16
@gabrielschulhof @cgack gabrielschulhof Table: Make selector for popup instance core 2.1.1-friendly in ct test c122cc2
@cgack cgack Table: Implement Classes Option
add AMD wrapper

Fixes gh-8341
5ce74f5
@cgack cgack Table: Implement Classes Option
jquery.mobile.js messy merge

Fixes gh-8341
504bc80
@cgack cgack Table: Implement Classes Option
classes option and JSCS fun

Fixes gh-8341
472b799
@cgack cgack Table: Implement Classes Option
make table tests green WIP

Fixes gh-8341
4473d8d
@cgack
Contributor
cgack commented Dec 16, 2015

TODOS

  • Implement Classes
  • use hasClasses, lacksClasses in tests
  • review QUnit.skip-ed tests
cgack added some commits Dec 16, 2015
@cgack cgack Table: Implement Classes Option
remove extra test

Fixes gh-8341
0b78df8
@cgack cgack Table: Implement Classes Option
hasClasses in tests

Fixes gh-8341
a688d7a
@cgack cgack Table: Implement Classes Option
hasclasses and lacksclasses to table tests

Fixes gh-8341
5465834
@cgack cgack changed the title from [WIP] Table: Implement Classes Option to Table: Implement Classes Option Jan 21, 2016
@cgack cgack assigned cgack and arschmitz and unassigned cgack Jan 21, 2016
@cgack
Contributor
cgack commented Jan 21, 2016

@arschmitz I think this is read for a round of review. Thanks!

@arschmitz
Member

on it

@arschmitz arschmitz commented on an outdated diff Jan 28, 2016
js/widgets/table.columntoggle.js
},
- _setupEvents: function() {
- //NOTE: inputs are bound in bindToggles,
- // so it can be called on refresh, too
-
- // update column toggles on resize
- this._on( this.window, {
- throttledresize: "_setToggleState"
- } );
- this._on( this._menu, {
- "change input": "_menuInputChange"
- } );
+ _updateVariableColumn: function( header, cells, priority/*, state */ ) {
@arschmitz
arschmitz Jan 28, 2016 Member

remove unused stae var comment

@arschmitz arschmitz commented on an outdated diff Jan 28, 2016
js/widgets/table.columntoggle.js
},
_destroy: function() {
- this._super();
+ if ( this.options.mode === "columntoggle" ) {
+ if ( !this.options.enhanced ) {
+ this._removeClass( "ui-table-columntoggle" );
@arschmitz
arschmitz Jan 28, 2016 Member

no need to remove classes in destroy

@arschmitz arschmitz commented on an outdated diff Jan 28, 2016
js/widgets/table.columntoggle.js
},
_destroy: function() {
- this._super();
+ if ( this.options.mode === "columntoggle" ) {
+ if ( !this.options.enhanced ) {
+ this._removeClass( "ui-table-columntoggle" );
+ this.headers.each( $.proxy( function( index, element ) {
+ var header,
+ priority = $.mobile.getAttribute( element, "priority" );
+
+ if ( priority ) {
+ header = $( element );
+ header
+ .add( header.jqmData( "cells" ) )
+ .removeClass( this.options.classes.priorityPrefix + priority );
@arschmitz
arschmitz Jan 28, 2016 Member

same here

@arschmitz arschmitz commented on an outdated diff Jan 28, 2016
js/widgets/table.columntoggle.popup.js
+
+ // Browser globals
+ factory( jQuery );
+ }
+} )( function( $, undefined ) {
+
+return $.widget( "mobile.table", $.mobile.table, {
+ options: {
+ columnButton: true,
+ columnButtonTheme: null,
+ columnPopupTheme: null,
+ columnButtonText: "Columns...",
+ columnUi: true,
+ classes: {
+ "ui-table-columntoggle-popup": "",
+ "ui-table-columntoggle-btn": "ui-button ui-corner-all ui-shadow ui-mini"
@arschmitz
arschmitz Jan 28, 2016 Member

ui-button is not a theme class

@arschmitz arschmitz commented on an outdated diff Jan 28, 2016
js/widgets/table.js
- columnCount++;
- } );
+ // Iterate over the header rows
+ this.headerRows.each( $.proxy( this, "_refreshHeaderRow" ) );
+ },
+
+ _destroy: function() {
+ var table = this.element;
+
+ if ( !this.options.enhanced ) {
+ this._removeClass( "ui-table" );
@arschmitz
arschmitz Jan 28, 2016 Member

no need to remove classes in destory

@arschmitz arschmitz commented on an outdated diff Jan 28, 2016
js/widgets/table.reflow.js
+ },
+
+ _destroy: function() {
+ var colstartAttr;
+
+ if ( this.options.mode === "reflow" ) {
+ colstartAttr = "data-" + $.mobile.ns + "colstart";
+
+ if ( !this.options.enhanced ) {
+ this.element
+ .children( "thead" )
+ .find( "[" + colstartAttr + "]" )
+ .removeAttr( colstartAttr )
+ .end()
+ .end()
+ .removeClass( "ui-table-reflow" )
@arschmitz
arschmitz Jan 28, 2016 Member

use of old removeclass and its in destory

@arschmitz
Member

A couple things i noticed throughout were use of jqmdata, jqmremovedata, and $.mobile.getAttribute all of which are deprecated. I also noticed there are not any backcompat tests over all looking good

@arschmitz
Member

Oh and of course no hasClasses, but you have that as a todo already

@arschmitz
Member

Related to tests it looks like this fixes the failures we are seeing in 1.5-dev on table but the Basic table: _refreshHeaderCell() test is failing across the board

cgack added some commits Feb 4, 2016
@cgack cgack Table: Implment Classes Option
post review changes

Fixes gh-8341
c8a0c72
@cgack cgack Table: Implement Classes Option
Fixes gh-8341
059b497
@cgack
Contributor
cgack commented Feb 18, 2016

gh-6531 needs to have the table-stripe removed

@cgack cgack Table: Implement Classes Option
test adjustments

Fixes gh-8341
bc10c64
@arschmitz arschmitz referenced this pull request Mar 26, 2016
Closed

7360 table review #7372

@arschmitz
Member

rebased fixed and landed on 1.5-dev

@arschmitz arschmitz closed this Mar 28, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment