Fix fade-in/out animation in sorting
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
2016-07-29 23:35:29 +00:00
|
|
|
( function ( mw ) {
|
2016-11-18 21:16:43 +00:00
|
|
|
/* global moment:false */
|
Fix fade-in/out animation in sorting
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
2016-07-29 23:35:29 +00:00
|
|
|
/**
|
|
|
|
* A wrapper widget for a fake, cloned notification. This is used
|
|
|
|
* for the fade in/out effects while reordering.
|
|
|
|
*
|
|
|
|
* @class
|
|
|
|
* @extends OO.ui.Widget
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @param {jQuery} $element A clone of an mw.echo.ui.NotificationItemWidget's $element
|
|
|
|
* @param {Object} [config] Configuration options
|
|
|
|
* @cfg {string} [timestamp] The timestamp for this cloned widget, in UTC and ISO 8601 format
|
|
|
|
* @cfg {boolean} [read=false] The read state for this cloned widget
|
|
|
|
* @cfg {boolean} [foreign=false] The foreignness state of this cloned widget
|
|
|
|
* @cfg {number} [id] The id for this cloned widget
|
|
|
|
*/
|
|
|
|
mw.echo.ui.ClonedNotificationItemWidget = function MwEchoUiClonedNotificationItemWidget( $element, config ) {
|
|
|
|
config = config || {};
|
|
|
|
|
|
|
|
// Parent
|
|
|
|
mw.echo.ui.ClonedNotificationItemWidget.parent.call( this, config );
|
|
|
|
|
|
|
|
this.$element = $element;
|
|
|
|
this.timestamp = config.timestamp || moment.utc().format( 'YYYY-MM-DD[T]HH:mm:ss[Z]' );
|
|
|
|
this.read = !!config.read;
|
|
|
|
this.foreign = config.foreign === undefined ? true : config.foreign;
|
|
|
|
this.id = config.id;
|
|
|
|
|
|
|
|
this.$element.addClass( 'mw-echo-ui-clonedNotificationItemWidget' );
|
|
|
|
};
|
|
|
|
|
|
|
|
/* Initialization */
|
|
|
|
OO.inheritClass( mw.echo.ui.ClonedNotificationItemWidget, OO.ui.Widget );
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Get the widget's timestamp
|
|
|
|
*
|
|
|
|
* @return {string} Timestamp in UTC, ISO 8601 format
|
|
|
|
*/
|
|
|
|
mw.echo.ui.ClonedNotificationItemWidget.prototype.getTimestamp = function () {
|
|
|
|
return this.timestamp;
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Get the widget's read state
|
|
|
|
*
|
|
|
|
* @return {boolean} Widget is read
|
|
|
|
*/
|
|
|
|
mw.echo.ui.ClonedNotificationItemWidget.prototype.isRead = function () {
|
|
|
|
return this.read;
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Get the widget's id
|
|
|
|
*
|
|
|
|
* @return {number} Widget id
|
|
|
|
*/
|
|
|
|
mw.echo.ui.ClonedNotificationItemWidget.prototype.getId = function () {
|
|
|
|
return this.id;
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The foreign state of this widget
|
|
|
|
*
|
|
|
|
* @return {boolean} This item widget is foreign
|
|
|
|
*/
|
|
|
|
mw.echo.ui.ClonedNotificationItemWidget.prototype.isForeign = function () {
|
|
|
|
return this.foreign;
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* This widget is fake by definition.
|
|
|
|
*
|
|
|
|
* @return {boolean} true
|
|
|
|
*/
|
|
|
|
mw.echo.ui.ClonedNotificationItemWidget.prototype.isFake = function () {
|
|
|
|
return true;
|
|
|
|
};
|
|
|
|
|
2016-11-18 21:16:43 +00:00
|
|
|
}( mediaWiki ) );
|