mediawiki-extensions-Echo/modules/ui/mw.echo.ui.DatedSubGroupListWidget.js
Moriel Schottlender ebbe2e81af Make date headings a proper semantic <h2> heading
To support accessibility, make sure the titles in Special:Notifications
are <h2> headings.

Bug: T149955
Change-Id: I4f15694efb04896e9bd7b026d297891047759644
2017-04-13 22:39:28 +00:00

68 lines
2.2 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, stringTimestamp,
now = moment(),
$primaryDate = $( '<span>' )
.addClass( 'mw-echo-ui-datedSubGroupListWidget-title-primary' ),
$secondaryDate = $( '<span>' )
.addClass( 'mw-echo-ui-datedSubGroupListWidget-title-secondary' ),
$title = $( '<h2>' )
.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 ) );
// Round all dates to the day they're in, as if they all happened at 00:00h
stringTimestamp = moment.utc( this.model.getTimestamp() ).local().format( 'YYYY-MM-DD' );
momentTimestamp = moment( stringTimestamp );
diff = now.diff( momentTimestamp, 'weeks' );
fullDate = momentTimestamp.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 ) );