mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo
synced 2024-12-28 15:43:03 +00:00
58 lines
1.8 KiB
JavaScript
58 lines
1.8 KiB
JavaScript
( function () {
|
|
/**
|
|
* A button showing a circle that represents either 'mark as read' or 'mark as unread' states.
|
|
*
|
|
* @class
|
|
* @extends OO.ui.ButtonWidget
|
|
*
|
|
* @constructor
|
|
* @param {Object} [config] Configuration options
|
|
* @param {boolean} [config.markAsRead=true] Display mark as read state. If false, the button displays
|
|
* mark as unread state.
|
|
*/
|
|
mw.echo.ui.ToggleReadCircleButtonWidget = function MwEchoUiToggleReadCircleButtonWidget( config ) {
|
|
config = config || {};
|
|
|
|
// Parent constructor
|
|
mw.echo.ui.ToggleReadCircleButtonWidget.super.call( this, Object.assign( {
|
|
invisibleLabel: true,
|
|
// Set a dummy icon so we get focus styles
|
|
icon: '_'
|
|
}, config ) );
|
|
|
|
this.$circle = $( '<div>' )
|
|
.addClass( 'mw-echo-ui-toggleReadCircleButtonWidget-circle' );
|
|
this.$button.append( this.$circle );
|
|
|
|
this.toggleState( config.markAsRead === undefined ? true : !!config.markAsRead );
|
|
|
|
this.$element
|
|
.addClass( 'mw-echo-ui-toggleReadCircleButtonWidget' );
|
|
};
|
|
|
|
/* Initialization */
|
|
|
|
OO.inheritClass( mw.echo.ui.ToggleReadCircleButtonWidget, OO.ui.ButtonWidget );
|
|
|
|
/* Methods */
|
|
|
|
/**
|
|
* Toggle the state of the button from 'mark as read' to 'mark as unread'
|
|
* and vice versa.
|
|
*
|
|
* @param {boolean} [isMarkAsRead] The state is mark as read
|
|
*/
|
|
mw.echo.ui.ToggleReadCircleButtonWidget.prototype.toggleState = function ( isMarkAsRead ) {
|
|
isMarkAsRead = isMarkAsRead === undefined ? !this.markAsRead : !!isMarkAsRead;
|
|
|
|
this.markAsRead = isMarkAsRead;
|
|
|
|
this.$circle.toggleClass( 'mw-echo-ui-toggleReadCircleButtonWidget-circle-unread', !this.markAsRead );
|
|
const label = this.markAsRead ?
|
|
mw.msg( 'echo-notification-markasread' ) :
|
|
mw.msg( 'echo-notification-markasunread' );
|
|
this.setLabel( label );
|
|
this.setTitle( label );
|
|
};
|
|
}() );
|