mediawiki-extensions-Echo/modules/special/ext.echo.special.js

180 lines
4.8 KiB
JavaScript
Raw Normal View History

( function ( $, mw ) {
'use strict';
var useLang = mw.config.get( 'wgUserLanguage' );
/**
* @class mw.echo.special
* Defines the behavior of the Special:Notifications page
*
* @singleton
*/
mw.echo.special = {
notcontinue: null,
header: '',
processing: false,
/**
* Initialize the property in special notification page.
*
* @method
*/
initialize: function () {
var skin = mw.config.get( 'skin' );
// Convert more link into a button
$( '#mw-echo-more' )
.click( function ( e ) {
e.preventDefault();
if ( !mw.echo.special.processing ) {
mw.echo.special.processing = true;
mw.echo.special.loadMore();
}
}
);
mw.echo.special.notcontinue = mw.config.get( 'wgEchoNextContinue' );
mw.echo.special.header = mw.config.get( 'wgEchoDateHeader' );
// Set up each individual notification with eventlogging, a close
// box and dismiss interface if it is dismissable.
$( '.mw-echo-notification' ).each( function () {
Split alerts and messages in Echo Split the notifications into 'alert' and 'message' badget with two different flyouts. Also clean up styling and module behavior. ** Depends on ooui change Id4bbe14ba0bf6c for footers in popups. ** Depends on ooui change Ie93e4d6ed5637c for fixing a bug in inverted icons. ** MobileFrontend must also be updated to support the new modules in this patch I168f485d6e54cb4067 In this change: * Split notifcations into alert and messages and display those in two different badges. * Create two separate flyout/popups for each category with their notifications. * Create a view-model to control notification state and emit events for both the popup and the badge to intercept and react to. * Clean up module load and distribution: * Create an ext.echo.ui module for javascript-ui support and ooui widgets. * Create an ext.echo.nojs module that unifies all base classes that are needed for both nojs and js support, that the js version builds upon. * Create a separate ext.echo.logger module as a singleton that can be called to perform all logging. * Clean up style uses * Move the special page LESS file into nojs module so all styles load properly even in nojs mode. * Transfer some of the styling from JS to LESS for consistency. * Make the 'read more' button load already with the styles it needs to look like a button, since its behavior is similar in nojs and js vesions, but before its classes were applied only by the js, making it inconsistent and also making its appearance 'jump' from a link to a button. * Delete and clean up all old and unused files. * Moved 'Help.png' icon from modules/overlay to modules/icons for later use. Bug: T108190 Change-Id: I55f440ed9f64c46817f620328a6bb522d44c9ca9
2015-08-13 00:54:16 +00:00
mw.echo.logger.logInteraction(
'notification-impression',
mw.echo.Logger.static.context.archive,
Number( $( this ).attr( 'data-notification-event' ) ),
$( this ).attr( 'data-notification-type' )
);
} );
$( '#mw-echo-moreinfo-link' ).click( function () {
Split alerts and messages in Echo Split the notifications into 'alert' and 'message' badget with two different flyouts. Also clean up styling and module behavior. ** Depends on ooui change Id4bbe14ba0bf6c for footers in popups. ** Depends on ooui change Ie93e4d6ed5637c for fixing a bug in inverted icons. ** MobileFrontend must also be updated to support the new modules in this patch I168f485d6e54cb4067 In this change: * Split notifcations into alert and messages and display those in two different badges. * Create two separate flyout/popups for each category with their notifications. * Create a view-model to control notification state and emit events for both the popup and the badge to intercept and react to. * Clean up module load and distribution: * Create an ext.echo.ui module for javascript-ui support and ooui widgets. * Create an ext.echo.nojs module that unifies all base classes that are needed for both nojs and js support, that the js version builds upon. * Create a separate ext.echo.logger module as a singleton that can be called to perform all logging. * Clean up style uses * Move the special page LESS file into nojs module so all styles load properly even in nojs mode. * Transfer some of the styling from JS to LESS for consistency. * Make the 'read more' button load already with the styles it needs to look like a button, since its behavior is similar in nojs and js vesions, but before its classes were applied only by the js, making it inconsistent and also making its appearance 'jump' from a link to a button. * Delete and clean up all old and unused files. * Moved 'Help.png' icon from modules/overlay to modules/icons for later use. Bug: T108190 Change-Id: I55f440ed9f64c46817f620328a6bb522d44c9ca9
2015-08-13 00:54:16 +00:00
mw.echo.logger.logInteraction( 'ui-help-click', mw.echo.Logger.static.context.archive );
} );
$( '#mw-echo-pref-link' ).click( function () {
Split alerts and messages in Echo Split the notifications into 'alert' and 'message' badget with two different flyouts. Also clean up styling and module behavior. ** Depends on ooui change Id4bbe14ba0bf6c for footers in popups. ** Depends on ooui change Ie93e4d6ed5637c for fixing a bug in inverted icons. ** MobileFrontend must also be updated to support the new modules in this patch I168f485d6e54cb4067 In this change: * Split notifcations into alert and messages and display those in two different badges. * Create two separate flyout/popups for each category with their notifications. * Create a view-model to control notification state and emit events for both the popup and the badge to intercept and react to. * Clean up module load and distribution: * Create an ext.echo.ui module for javascript-ui support and ooui widgets. * Create an ext.echo.nojs module that unifies all base classes that are needed for both nojs and js support, that the js version builds upon. * Create a separate ext.echo.logger module as a singleton that can be called to perform all logging. * Clean up style uses * Move the special page LESS file into nojs module so all styles load properly even in nojs mode. * Transfer some of the styling from JS to LESS for consistency. * Make the 'read more' button load already with the styles it needs to look like a button, since its behavior is similar in nojs and js vesions, but before its classes were applied only by the js, making it inconsistent and also making its appearance 'jump' from a link to a button. * Delete and clean up all old and unused files. * Moved 'Help.png' icon from modules/overlay to modules/icons for later use. Bug: T108190 Change-Id: I55f440ed9f64c46817f620328a6bb522d44c9ca9
2015-08-13 00:54:16 +00:00
mw.echo.logger.logInteraction( 'ui-prefs-click', mw.echo.Logger.static.context.archive );
} );
// Convert subtitle links into header icons for Vector and Monobook skins
if ( skin === 'vector' || skin === 'monobook' ) {
$( '#mw-echo-moreinfo-link, #mw-echo-pref-link' )
.empty()
.appendTo( '#firstHeading' );
$( '#contentSub' ).empty();
}
},
/**
* Load more notification records.
*
* @method
*/
loadMore: function () {
var notifications, container, $li,
api = new mw.Api( { ajax: { cache: false } } ),
seenTime = mw.config.get( 'wgEchoSeenTime' ),
that = this,
unread = [],
apiData = {
action: 'query',
meta: 'notifications',
notformat: 'special',
notprop: 'list',
notcontinue: this.notcontinue,
notlimit: mw.config.get( 'wgEchoDisplayNum' ),
uselang: useLang
};
api.get( apiData ).done( function ( result ) {
container = $( '#mw-echo-special-container' );
notifications = result.query.notifications;
unread = [];
$.each( notifications.list, function ( index, data ) {
if ( that.header !== data.timestamp.date ) {
that.header = data.timestamp.date;
$( '<li></li>' ).addClass( 'mw-echo-date-section' ).append( that.header ).appendTo( container );
}
$li = $( '<li></li>' )
.data( 'details', data )
.data( 'id', data.id )
.addClass( 'mw-echo-notification' )
.attr( {
'data-notification-category': data.category,
'data-notification-event': data.id,
'data-notification-type': data.type
} )
.append( data[ '*' ] )
.appendTo( container );
if ( !data.read ) {
$li.addClass( 'mw-echo-unread' );
unread.push( data.id );
}
if ( seenTime !== null && data.timestamp.mw > seenTime ) {
$li.addClass( 'mw-echo-unseen' );
}
Split alerts and messages in Echo Split the notifications into 'alert' and 'message' badget with two different flyouts. Also clean up styling and module behavior. ** Depends on ooui change Id4bbe14ba0bf6c for footers in popups. ** Depends on ooui change Ie93e4d6ed5637c for fixing a bug in inverted icons. ** MobileFrontend must also be updated to support the new modules in this patch I168f485d6e54cb4067 In this change: * Split notifcations into alert and messages and display those in two different badges. * Create two separate flyout/popups for each category with their notifications. * Create a view-model to control notification state and emit events for both the popup and the badge to intercept and react to. * Clean up module load and distribution: * Create an ext.echo.ui module for javascript-ui support and ooui widgets. * Create an ext.echo.nojs module that unifies all base classes that are needed for both nojs and js support, that the js version builds upon. * Create a separate ext.echo.logger module as a singleton that can be called to perform all logging. * Clean up style uses * Move the special page LESS file into nojs module so all styles load properly even in nojs mode. * Transfer some of the styling from JS to LESS for consistency. * Make the 'read more' button load already with the styles it needs to look like a button, since its behavior is similar in nojs and js vesions, but before its classes were applied only by the js, making it inconsistent and also making its appearance 'jump' from a link to a button. * Delete and clean up all old and unused files. * Moved 'Help.png' icon from modules/overlay to modules/icons for later use. Bug: T108190 Change-Id: I55f440ed9f64c46817f620328a6bb522d44c9ca9
2015-08-13 00:54:16 +00:00
mw.echo.logger.logInteraction(
'notification-impression',
mw.echo.Logger.static.context.archive,
Number( $li.attr( 'data-notification-event' ) ),
$li.attr( 'data-notification-type' )
);
} );
that.notcontinue = notifications[ 'continue' ];
if ( unread.length > 0 ) {
that.markAsRead( unread );
} else {
that.onSuccess();
}
} ).fail( function () {
that.onError();
} );
},
/**
* Mark notifications as read.
*/
markAsRead: function ( unread ) {
Split alerts and messages in Echo Split the notifications into 'alert' and 'message' badget with two different flyouts. Also clean up styling and module behavior. ** Depends on ooui change Id4bbe14ba0bf6c for footers in popups. ** Depends on ooui change Ie93e4d6ed5637c for fixing a bug in inverted icons. ** MobileFrontend must also be updated to support the new modules in this patch I168f485d6e54cb4067 In this change: * Split notifcations into alert and messages and display those in two different badges. * Create two separate flyout/popups for each category with their notifications. * Create a view-model to control notification state and emit events for both the popup and the badge to intercept and react to. * Clean up module load and distribution: * Create an ext.echo.ui module for javascript-ui support and ooui widgets. * Create an ext.echo.nojs module that unifies all base classes that are needed for both nojs and js support, that the js version builds upon. * Create a separate ext.echo.logger module as a singleton that can be called to perform all logging. * Clean up style uses * Move the special page LESS file into nojs module so all styles load properly even in nojs mode. * Transfer some of the styling from JS to LESS for consistency. * Make the 'read more' button load already with the styles it needs to look like a button, since its behavior is similar in nojs and js vesions, but before its classes were applied only by the js, making it inconsistent and also making its appearance 'jump' from a link to a button. * Delete and clean up all old and unused files. * Moved 'Help.png' icon from modules/overlay to modules/icons for later use. Bug: T108190 Change-Id: I55f440ed9f64c46817f620328a6bb522d44c9ca9
2015-08-13 00:54:16 +00:00
var api = new mw.Api(),
that = this;
api.postWithToken( 'csrf', {
action: 'echomarkread',
list: unread.join( '|' ),
uselang: useLang
Split alerts and messages in Echo Split the notifications into 'alert' and 'message' badget with two different flyouts. Also clean up styling and module behavior. ** Depends on ooui change Id4bbe14ba0bf6c for footers in popups. ** Depends on ooui change Ie93e4d6ed5637c for fixing a bug in inverted icons. ** MobileFrontend must also be updated to support the new modules in this patch I168f485d6e54cb4067 In this change: * Split notifcations into alert and messages and display those in two different badges. * Create two separate flyout/popups for each category with their notifications. * Create a view-model to control notification state and emit events for both the popup and the badge to intercept and react to. * Clean up module load and distribution: * Create an ext.echo.ui module for javascript-ui support and ooui widgets. * Create an ext.echo.nojs module that unifies all base classes that are needed for both nojs and js support, that the js version builds upon. * Create a separate ext.echo.logger module as a singleton that can be called to perform all logging. * Clean up style uses * Move the special page LESS file into nojs module so all styles load properly even in nojs mode. * Transfer some of the styling from JS to LESS for consistency. * Make the 'read more' button load already with the styles it needs to look like a button, since its behavior is similar in nojs and js vesions, but before its classes were applied only by the js, making it inconsistent and also making its appearance 'jump' from a link to a button. * Delete and clean up all old and unused files. * Moved 'Help.png' icon from modules/overlay to modules/icons for later use. Bug: T108190 Change-Id: I55f440ed9f64c46817f620328a6bb522d44c9ca9
2015-08-13 00:54:16 +00:00
} ).done( function () {
// HACK: We should really redo the way the entire special
// page handles the notifications now that they are separated
// into 'alert' and 'messages'. However, until that happens,
// the badges should be updated individually.
// Don't try this at home.
mw.echo.ui.messageWidget.fetchUnreadCountFromApi();
mw.echo.ui.alertWidget.fetchUnreadCountFromApi();
that.onSuccess();
} ).fail( function () {
that.onError();
} );
},
onSuccess: function () {
if ( !this.notcontinue ) {
$( '#mw-echo-more' ).hide();
}
this.processing = false;
},
onError: function () {
// Todo: Show detail error message based on error code
$( '#mw-echo-more' ).text( mw.msg( 'echo-load-more-error' ) );
this.processing = false;
}
};
$( document ).ready( mw.echo.special.initialize );
} )( jQuery, mediaWiki );