mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo
synced 2024-11-13 17:57:21 +00:00
f4a955efe9
The fade in/out animation is asynchronous. This means that if we are sorting multiple items one after the other, by the time the item faded out, it will be reinserted back into the wrong position, breaking the sorting. This also broke the promise of OO.SortedEmitterList whereby all its items are always in order. The way to fix this was to force a better synchronization with the item order while we hide and show the item in its new place. To do that, a new widget is created as a fake clone of the old one, in the original position of the old one. The original item is then reinserted (while hidden) to the proper location -- preserving order. The fake clone is then faded out, and the real item is then faded in. For this to work properly, the cloned item had to preserve some of the original item's information, like timestamp, foreigness and id. However, since both the real item and the fake new clone have the same details, the clone fakes its ID by adding a fraction to it - promising that the fallback in case of equal timestamps (which happens on the real and cloned items) will still resolve with some decision about the placement of the items rather than (falsely but understandably) decide they are both the same. Since this whole animation is somewhat of a hack, the list now has a configuration parameter to turn the animation on. The animation is on in the popups, but off in the special page. Bug: T141419 Change-Id: Ic7c35e5ddefc51bf7fde497eab36414b4dddcd9e
66 lines
2.1 KiB
JavaScript
66 lines
2.1 KiB
JavaScript
( function ( mw, $ ) {
|
|
/*global moment:false */
|
|
/**
|
|
* A sub group widget that displays notifications divided by dates.
|
|
*
|
|
* @class
|
|
* @extends mw.echo.ui.SubGroupListWidget
|
|
*
|
|
* @constructor
|
|
* @param {mw.echo.Controller} controller Notifications controller
|
|
* @param {mw.echo.dm.SortedList} listModel Notifications list model for this source
|
|
* @param {Object} [config] Configuration object
|
|
*/
|
|
mw.echo.ui.DatedSubGroupListWidget = function MwEchoUiDatedSubGroupListWidget( controller, listModel, config ) {
|
|
var momentTimestamp, diff, fullDate,
|
|
now = moment(),
|
|
$primaryDate = $( '<span>' )
|
|
.addClass( 'mw-echo-ui-datedSubGroupListWidget-title-primary' ),
|
|
$secondaryDate = $( '<span>' )
|
|
.addClass( 'mw-echo-ui-datedSubGroupListWidget-title-secondary' ),
|
|
$title = $( '<span>' )
|
|
.addClass( 'mw-echo-ui-datedSubGroupListWidget-title' )
|
|
.append( $primaryDate, $secondaryDate );
|
|
|
|
config = config || {};
|
|
|
|
// Parent constructor
|
|
mw.echo.ui.DatedSubGroupListWidget.parent.call( this, controller, listModel, $.extend( {
|
|
// Since this widget is defined as a dated list, we sort
|
|
// its items according to timestamp without consideration
|
|
// of read state or foreignness.
|
|
sortingCallback: function ( a, b ) {
|
|
// Reverse sorting
|
|
if ( b.getTimestamp() < a.getTimestamp() ) {
|
|
return -1;
|
|
} else if ( b.getTimestamp() > a.getTimestamp() ) {
|
|
return 1;
|
|
}
|
|
|
|
// Fallback on IDs
|
|
return b.getId() - a.getId();
|
|
}
|
|
}, config ) );
|
|
|
|
momentTimestamp = moment.utc( this.model.getTimestamp() );
|
|
diff = now.diff( momentTimestamp, 'weeks' );
|
|
fullDate = momentTimestamp.local().format( 'LL' );
|
|
|
|
$primaryDate.text( fullDate );
|
|
if ( diff === 0 ) {
|
|
$secondaryDate.text( fullDate );
|
|
momentTimestamp.locale( 'echo-shortRelativeTime' );
|
|
$primaryDate.text( momentTimestamp.calendar() );
|
|
}
|
|
|
|
this.title.setLabel( $title );
|
|
|
|
this.$element
|
|
.addClass( 'mw-echo-ui-datedSubGroupListWidget' );
|
|
};
|
|
|
|
/* Initialization */
|
|
|
|
OO.inheritClass( mw.echo.ui.DatedSubGroupListWidget, mw.echo.ui.SubGroupListWidget );
|
|
} )( mediaWiki, jQuery );
|