| Index: branches/RL2/extensions/Gadgets/modules/ext.gadgets.preferences.css |
| — | — | @@ -1,3 +1,9 @@ |
| | 2 | +/* Hide checkboxes when JS is enabled and descriptions have not yet been loaded */ |
| 2 | 3 | .client-js .mw-gadgetsshared-item-unloaded .mw-input { |
| 3 | 4 | display: none; |
| 4 | 5 | } |
| | 6 | + |
| | 7 | +/* When the wrapping <tr> contains a spinner, increase its height so the spinner isn't cut off */ |
| | 8 | +.client-js .mw-gadgetsshared-item-unloaded.mw-ajax-loader { |
| | 9 | + height: 32px; |
| | 10 | +} |
| Index: branches/RL2/extensions/Gadgets/modules/ext.gadgets.preferences.js |
| — | — | @@ -15,8 +15,9 @@ |
| 16 | 16 | * @param categoryNames {Object} Map of { categoryID: categoryDescription } |
| 17 | 17 | */ |
| 18 | 18 | function fixPreferenceForm( gadgetsByCategory, categoryNames ) { |
| 19 | | - var $oldContainer = $( '#mw-prefsection-gadgetsshared .mw-input' ), |
| | 19 | + var $oldContainer = $( '#mw-prefsection-gadgetsshared' ).find( '.mw-input' ), |
| 20 | 20 | $newContainer = $( '<td>' ).addClass( 'mw-input' ), |
| | 21 | + $spinner = $oldContainer.closest( '.mw-gadgetsshared-item-unloaded' ), |
| 21 | 22 | category, gadget, $oldItem; |
| 22 | 23 | for ( category in gadgetsByCategory ) { |
| 23 | 24 | if ( category !== '' ) { |
| — | — | @@ -34,9 +35,8 @@ |
| 35 | 36 | } |
| 36 | 37 | } |
| 37 | 38 | $oldContainer.replaceWith( $newContainer ); |
| 38 | | - // Unhide the container by removing the unloaded class |
| 39 | | - // TODO: We need to have a spinner or something for this |
| 40 | | - $newContainer.closest( '.mw-gadgetsshared-item-unloaded' ).removeClass( 'mw-gadgetsshared-item-unloaded' ); |
| | 39 | + // Unhide the container by removing the unloaded class, and remove the spinner too |
| | 40 | + $spinner.removeClass( 'mw-gadgetsshared-item-unloaded mw-ajax-loader' ); |
| 41 | 41 | } |
| 42 | 42 | |
| 43 | 43 | // Temporary testing data |
| — | — | @@ -57,6 +57,12 @@ |
| 58 | 58 | } |
| 59 | 59 | }; |
| 60 | 60 | |
| 61 | | - $( function() { fixPreferenceForm( gadgetsByCategory, categoryNames ) } ); |
| | 61 | + $( function() { |
| | 62 | + // TODO make all of this nicer once we have AJAX |
| | 63 | + // Add spinner |
| | 64 | + $( '#mw-prefsection-gadgetsshared').find( '.mw-gadgetsshared-item-unloaded' ).addClass( 'mw-ajax-loader' ); |
| | 65 | + // Simulate AJAX delay |
| | 66 | + setTimeout( function() { fixPreferenceForm( gadgetsByCategory, categoryNames ) }, 2000 ); |
| | 67 | + } ); |
| 62 | 68 | |
| 63 | 69 | } )( jQuery ); |