RCFilters: Add marker between old and new changes in enhanced mode

For both "Live Update" and "View newest changes", add a marker
between old and new groups when changes are grouped by page.

Bug: T163426
Change-Id: I00947d05e9b6022604a2a6b94eec94f6ed747c96
This commit is contained in:
Stephane Bisson 2017-08-07 14:52:42 -04:00
parent 24ebca2251
commit d65f49aa78
3 changed files with 60 additions and 38 deletions

View file

@ -341,6 +341,7 @@ class EnhancedChangesList extends ChangesList {
'rev-deleted-event' => $revDeletedMsg,
'tableClasses' => $tableClasses,
'timestamp' => $block[0]->timestamp,
'fullTimestamp' => $block[0]->getAttribute( 'rc_timestamp' ),
'users' => $usersList,
];

View file

@ -1,4 +1,4 @@
<table class="{{# tableClasses }}{{ . }} {{/ tableClasses }}">
<table class="{{# tableClasses }}{{ . }} {{/ tableClasses }}" data-mw-ts="{{{ fullTimestamp }}}">
<tr>
<td>
<span class="mw-collapsible-toggle mw-collapsible-arrow mw-enhancedchanges-arrow mw-enhancedchanges-arrow-space"></span>

View file

@ -101,9 +101,6 @@
$message = $( '<div>' )
.addClass( 'mw-rcfilters-ui-changesListWrapperWidget-results' ),
isEmpty = $changesListContent === 'NO_RESULTS',
$lastSeen,
$indicator,
$newChanges = $( [] ),
// For enhanced mode, we have to load these modules, which are
// not loaded for the 'regular' mode in the backend
loaderPromise = mw.user.options.get( 'usenewrc' ) ?
@ -142,34 +139,7 @@
this.$element.empty().append( $changesListContent );
if ( from ) {
$lastSeen = null;
this.$element.find( 'li[data-mw-ts]' ).each( function () {
var $li = $( this ),
ts = $li.data( 'mw-ts' );
if ( ts >= from ) {
$newChanges = $newChanges.add( $li );
} else if ( $lastSeen === null ) {
$lastSeen = $li;
return false;
}
} );
if ( $lastSeen ) {
$indicator = $( '<div>' )
.addClass( 'mw-rcfilters-ui-changesListWrapperWidget-previousChangesIndicator' )
.text( mw.message( 'rcfilters-previous-changes-label' ).text() );
$indicator.on( 'click', function () {
$indicator.detach();
} );
$lastSeen.before( $indicator );
}
$newChanges
.hide()
.fadeIn( 1000 );
this.emphasizeNewChanges( from );
}
}
@ -192,6 +162,52 @@
} );
};
/**
* Emphasize the elements (or groups) newer than the 'from' parameter
* @param {string} from Anything newer than this is considered 'new'
*/
mw.rcfilters.ui.ChangesListWrapperWidget.prototype.emphasizeNewChanges = function ( from ) {
var $lastSeen,
$indicator,
$newChanges = $( [] ),
selector = this.inEnhancedMode() ?
'table.mw-enhanced-rc[data-mw-ts]' :
'li[data-mw-ts]',
set = this.$element.find( selector ),
length = set.length;
set.each( function ( index ) {
var $this = $( this ),
ts = $this.data( 'mw-ts' );
if ( ts >= from ) {
$newChanges = $newChanges.add( $this );
$lastSeen = $this;
// guards against putting the marker after the last element
if ( index === ( length - 1 ) ) {
$lastSeen = null;
}
}
} );
if ( $lastSeen ) {
$indicator = $( '<div>' )
.addClass( 'mw-rcfilters-ui-changesListWrapperWidget-previousChangesIndicator' )
.text( mw.message( 'rcfilters-previous-changes-label' ).text() );
$indicator.on( 'click', function () {
$indicator.detach();
} );
$lastSeen.after( $indicator );
}
$newChanges
.hide()
.fadeIn( 1000 );
};
/**
* Respond to changes list model newChangesExist
*
@ -235,8 +251,7 @@
* @param {jQuery|string} $content The content of the updated changes list
*/
mw.rcfilters.ui.ChangesListWrapperWidget.prototype.setupHighlightContainers = function ( $content ) {
var uri = new mw.Uri(),
highlightClass = 'mw-rcfilters-ui-changesListWrapperWidget-highlights',
var highlightClass = 'mw-rcfilters-ui-changesListWrapperWidget-highlights',
$highlights = $( '<div>' )
.addClass( highlightClass )
.append(
@ -258,10 +273,7 @@
);
} );
if (
( uri.query.enhanced !== undefined && Number( uri.query.enhanced ) ) ||
( uri.query.enhanced === undefined && Number( mw.user.options.get( 'usenewrc' ) ) )
) {
if ( this.inEnhancedMode() ) {
// Enhanced RC
$content.find( 'td.mw-enhanced-rc' )
.parent()
@ -276,6 +288,15 @@
}
};
/**
* @return {boolean} Whether the changes are grouped by page
*/
mw.rcfilters.ui.ChangesListWrapperWidget.prototype.inEnhancedMode = function () {
var uri = new mw.Uri();
return ( uri.query.enhanced !== undefined && Number( uri.query.enhanced ) ) ||
( uri.query.enhanced === undefined && Number( mw.user.options.get( 'usenewrc' ) ) );
};
/**
* Apply color classes based on filters highlight configuration
*/