} );
this.changesListViewModel.connect( this, {
invalidate: 'onModelInvalidate',
- update: 'onModelUpdate',
- newChangesExist: 'onNewChangesExist'
+ update: 'onModelUpdate'
} );
this.$element
.addClass( 'mw-rcfilters-ui-changesListWrapperWidget' )
// We handle our own display/hide of the empty results message
+ // We keep the timeout class here and remove it later, since at this
+ // stage it is still needed to identify that the timeout occurred.
.removeClass( 'mw-changeslist-empty' );
-
- this.setupNewChangesButtonContainer();
};
/* Initialization */
*
* @param {jQuery|string} $changesListContent The content of the updated changes list
* @param {jQuery} $fieldset The content of the updated fieldset
+ * @param {string} noResultsDetails Type of no result error
* @param {boolean} isInitialDOM Whether $changesListContent is the existing (already attached) DOM
* @param {boolean} from Timestamp of the new changes
*/
mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onModelUpdate = function (
- $changesListContent, $fieldset, isInitialDOM, from
+ $changesListContent, $fieldset, noResultsDetails, isInitialDOM, from
) {
var conflictItem,
$message = $( '<div>' )
.append(
$( '<div>' )
.addClass( 'mw-rcfilters-ui-changesListWrapperWidget-results-noresult' )
- .text( mw.message( 'recentchanges-noresult' ).text() )
+ .text( mw.msg( this.getMsgKeyForNoResults( noResultsDetails ) ) )
);
+
+ this.$element.removeClass( 'mw-changeslist-timeout' );
+ this.$element.removeClass( 'mw-changeslist-notargetpage' );
}
this.$element.append( $message );
}
+ this.$element.prepend( $( '<div>' ).addClass( 'mw-changeslist-overlay' ) );
+
loaderPromise.done( function () {
if ( !isInitialDOM && !isEmpty ) {
// Make sure enhanced RC re-initializes correctly
} );
};
+ /** Toggles overlay class on changes list
+ *
+ * @param {boolean} isVisible True if overlay should be visible
+ */
+ mw.rcfilters.ui.ChangesListWrapperWidget.prototype.toggleOverlay = function ( isVisible ) {
+ this.$element.toggleClass( 'mw-rcfilters-ui-changesListWrapperWidget--overlaid', isVisible );
+ };
+
+ /**
+ * Map a reason for having no results to its message key
+ *
+ * @param {string} reason One of the NO_RESULTS_* "constant" that represent
+ * a reason for having no results
+ * @return {string} Key for the message that explains why there is no results in this case
+ */
+ mw.rcfilters.ui.ChangesListWrapperWidget.prototype.getMsgKeyForNoResults = function ( reason ) {
+ var reasonMsgKeyMap = {
+ NO_RESULTS_NORMAL: 'recentchanges-noresult',
+ NO_RESULTS_TIMEOUT: 'recentchanges-timeout',
+ NO_RESULTS_NETWORK_ERROR: 'recentchanges-network',
+ NO_RESULTS_NO_TARGET_PAGE: 'recentchanges-notargetpage'
+ };
+ return reasonMsgKeyMap[ reason ];
+ };
+
/**
* Emphasize the elements (or groups) newer than the 'from' parameter
* @param {string} from Anything newer than this is considered 'new'
.fadeIn( 1000 );
};
- /**
- * Respond to changes list model newChangesExist
- *
- * @param {boolean} newChangesExist Whether new changes exist
- */
- mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onNewChangesExist = function ( newChangesExist ) {
- this.showNewChangesLink.toggle( newChangesExist );
- };
-
- /**
- * Respond to the user clicking the 'show new changes' button
- */
- mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onShowNewChangesClick = function () {
- this.controller.showNewChanges();
- };
-
- /**
- * Setup the container for the 'new changes' button.
- */
- mw.rcfilters.ui.ChangesListWrapperWidget.prototype.setupNewChangesButtonContainer = function () {
- this.showNewChangesLink = new OO.ui.ButtonWidget( {
- framed: false,
- label: mw.message( 'rcfilters-show-new-changes' ).text(),
- flags: [ 'progressive' ]
- } );
- this.showNewChangesLink.connect( this, { click: 'onShowNewChangesClick' } );
- this.showNewChangesLink.toggle( false );
-
- // HACK: Add the -newChanges div inside rcfilters-head, rather than right above us
- // Visually it's the same place, but by putting it inside rcfilters-head we are
- // able to use the min-height rule to prevent the page from jumping when this is added.
- this.$element.parent().find( '.rcfilters-head' ).append(
- $( '<div>' )
- .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-newChanges' )
- .append( this.showNewChangesLink.$element )
- );
- };
-
/**
* Set up the highlight containers with all color circle indicators.
*
// Regular RC
$content.find( 'ul.special li' )
.prepend( $highlights.clone() );
+
+ $content.removeClass( 'mw-rcfilters-ui-changesListWrapperWidget-enhancedView' );
}
};
// Add highlight class to all highlighted list items
$elements
- .addClass( 'mw-rcfilters-highlight-color-' + filterItem.getHighlightColor() );
+ .addClass(
+ 'mw-rcfilters-highlighted ' +
+ 'mw-rcfilters-highlight-color-' + filterItem.getHighlightColor()
+ );
+ // Track the filters for each item in .data( 'highlightedFilters' )
$elements.each( function () {
- var filterString = $( this ).attr( 'data-highlightedFilters' ) || '',
- filters = filterString ? filterString.split( '|' ) : [];
-
+ var filters = $( this ).data( 'highlightedFilters' );
+ if ( !filters ) {
+ filters = [];
+ $( this ).data( 'highlightedFilters', filters );
+ }
if ( filters.indexOf( filterItem.getLabel() ) === -1 ) {
filters.push( filterItem.getLabel() );
}
-
- $( this )
- .attr( 'data-highlightedFilters', filters.join( '|' ) );
} );
}.bind( this ) );
- // Apply a title for relevant filters
- this.$element.find( '[data-highlightedFilters]' ).each( function () {
- var filterString = $( this ).attr( 'data-highlightedFilters' ) || '',
- filters = filterString ? filterString.split( '|' ) : [];
-
- if ( filterString ) {
- $( this ).attr( 'title', mw.msg( 'rcfilters-highlighted-filters-list', filters.join( ', ' ) ) );
+ // Apply a title to each highlighted item, with a list of filters
+ this.$element.find( '.mw-rcfilters-highlighted' ).each( function () {
+ var filters = $( this ).data( 'highlightedFilters' );
+
+ if ( filters && filters.length ) {
+ $( this ).attr( 'title', mw.msg(
+ 'rcfilters-highlighted-filters-list',
+ filters.join( mw.msg( 'comma-separator' ) )
+ ) );
}
- } );
+ } );
if ( this.inEnhancedMode() ) {
this.updateEnhancedParentHighlight();
}
mw.rcfilters.ui.ChangesListWrapperWidget.prototype.clearHighlight = function () {
// Remove highlight classes
mw.rcfilters.HighlightColors.forEach( function ( color ) {
- this.$element.find( '.mw-rcfilters-highlight-color-' + color ).removeClass( 'mw-rcfilters-highlight-color-' + color );
+ this.$element
+ .find( '.mw-rcfilters-highlight-color-' + color )
+ .removeClass( 'mw-rcfilters-highlight-color-' + color );
}.bind( this ) );
- this.$element.find( '[data-highlightedFilters]' )
+ this.$element.find( '.mw-rcfilters-highlighted' )
.removeAttr( 'title' )
- .removeAttr( 'data-highlightedFilters' );
+ .removeData( 'highlightedFilters' )
+ .removeClass( 'mw-rcfilters-highlighted' );
// Remove grey from enhanced rows
this.$element.find( '.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey' )