filtersModel, changesListModel, controller, $( 'fieldset.cloptions' ) );
$( '.rcfilters-container' ).append( filtersWidget.$element );
- $( 'body' ).append( $overlay );
- $( '.rcfilters-head' ).addClass( 'mw-rcfilters-ui-ready' );
+ $( 'body' )
+ .append( $overlay )
+ .addClass( 'mw-rcfilters-ui-initialized' );
$( 'a.mw-helplink' ).attr(
'href',
@import 'mediawiki.mixins.animation';
@import 'mw.rcfilters.mixins';
+@rcfilters-spinner-width: 70px;
+@rcfilters-head-min-height: 200px;
+
// Corrections for the standard special page
.client-js {
.cloptions {
}
.rcfilters-head {
- min-height: 200px;
-
- &:not( .mw-rcfilters-ui-ready ) {
- opacity: 0.5;
- pointer-events: none;
+ min-height: @rcfilters-head-min-height;
+ }
+ body:not( .mw-rcfilters-ui-initialized ) .rcfilters-head {
+ opacity: 0.5;
+ pointer-events: none;
- .cloptions {
- display: none;
- }
+ .cloptions {
+ display: none;
}
}
// message of our own
display: none;
}
+ }
- &:not( .mw-rcfilters-ui-ready ) {
- opacity: 0.5;
- }
+ body:not( .mw-rcfilters-ui-initialized ) .mw-changeslist,
+ body.mw-rcfilters-ui-loading .mw-changeslist {
+ opacity: 0.5;
}
.rcfilters-spinner {
- margin: -2em auto 0;
- width: 70px;
- opacity: 0.8;
display: none;
- white-space: nowrap;
+ position: absolute;
+ left: 50%;
+ width: @rcfilters-spinner-width;
+ // Make sure the middle of the spinner is centered, rather than its left edge
+ margin-left: -@rcfilters-spinner-width/2;
- &:not( .mw-rcfilters-ui-ready ) {
- display: block;
- }
+ opacity: 0.8;
+ white-space: nowrap;
& .rcfilters-spinner-bounce,
&:before,
.animation-delay( 0s );
}
}
+ body:not( .mw-rcfilters-ui-initialized ) .rcfilters-spinner {
+ display: block;
+ // When initializing, display the spinner on top of the area where the UI will appear
+ margin-top: -@rcfilters-head-min-height/2;
+ }
+ body.mw-rcfilters-ui-loading .rcfilters-spinner {
+ display: block;
+ // When loading new results, display the spinner on top of the results area
+ margin-top: 4em;
+ }
#contentSub,
.watchlistDetails,
border: 1px solid #ddd;
}
- &:not( .mw-rcfilters-ui-ready ) {
+ body:not( .mw-rcfilters-ui-initialized ) & {
display: none;
}
}
* Respond to changes list model invalidate
*/
mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onModelInvalidate = function () {
- $( '.rcfilters-spinner' ).removeClass( 'mw-rcfilters-ui-ready' );
- this.$element.removeClass( 'mw-rcfilters-ui-ready' );
+ $( 'body' ).addClass( 'mw-rcfilters-ui-loading' );
};
/**
mw.hook( 'wikipage.content' ).fire( widget.$element );
}
- $( '.rcfilters-spinner' ).addClass( 'mw-rcfilters-ui-ready' );
- widget.$element.addClass( 'mw-rcfilters-ui-ready' );
+ $( 'body' ).removeClass( 'mw-rcfilters-ui-loading' );
} );
};
*/
mw.rcfilters.ui.FormWrapperWidget.prototype.onChangesModelInvalidate = function () {
this.$submitButton.prop( 'disabled', true );
- this.$element.removeClass( 'mw-rcfilters-ui-ready' );
};
/**
*/
mw.rcfilters.ui.FormWrapperWidget.prototype.onChangesModelUpdate = function ( $changesList, $fieldset, isInitialDOM ) {
this.$submitButton.prop( 'disabled', false );
- this.$element.removeClass( 'mw-rcfilters-ui-ready' );
// Replace the entire fieldset
this.$element.empty().append( $fieldset.contents() );
} );
this.$topLinks
- .addClass( 'mw-rcfilters-ui-ready' )
.makeCollapsible( {
collapsed: topLinksCookieValue === 'collapsed',
$customTogglers: toplinksTitle.$element