' )
// Set the height to the space the previous notification or placeholder took
.css( 'height', outerHeight )
// Make sure that this placeholder is at the very end of this tagged notification group
.insertAfter( $tagMatches.eq( -1 ) )
// Animate the placeholder height to the space that this new notification will take up
.animate( { height: $notification.outerHeight( true ) },
{
// Do space animations fast
speed: 'fast',
complete: function () {
// Reset the notification position after we've finished the space animation
// However do not do it if the placeholder was removed because another tagged
// notification went and closed this one.
if ( self.$replacementPlaceholder ) {
$notification.css( 'position', '' );
}
// Finally, remove the placeholder from the DOM
$( this ).remove();
}
} );
} else {
// Append to the notification area and fade in to the original opacity.
$notification
.appendTo( $area )
.animate( { opacity: opacity },
{
duration: 'fast',
complete: function () {
// After we've faded in clear the opacity and let css take over
$( this ).css( 'opacity', '' );
}
}
);
}
// By default a notification is paused.
// If this notification is within the first {autoHideLimit} notifications then
// start the auto-hide timer as soon as it's created.
var autohideCount = $area.find( '.mw-notification-autohide' ).length;
if ( autohideCount <= notification.autoHideLimit ) {
this.resume();
}
};
/**
* Pause any running auto-hide timer for this notification
*/
Notification.prototype.pause = function () {
if ( this.isPaused ) {
return;
}
this.isPaused = true;
if ( this.timeout ) {
clearTimeout( this.timeout );
delete this.timeout;
}
};
/**
* Start autoHide timer if not already started.
* Does nothing if autoHide is disabled.
* Either to resume from pause or to make the first start.
*/
Notification.prototype.resume = function () {
var notif = this;
if ( !notif.isPaused ) {
return;
}
// Start any autoHide timeouts
if ( notif.options.autoHide ) {
notif.isPaused = false;
notif.timeout = setTimeout( function () {
// Already finished, so don't try to re-clear it
delete notif.timeout;
notif.close();
}, notification.autoHideSeconds * 1000 );
}
};
/**
* Close/hide the notification.
*
* @param {Object} options An object containing options for the closing of the notification.
* These are typically only used internally.
* - speed: Use a close speed different than the default 'slow'.
* - placeholder: Set to false to disable the placeholder transition.
*/
Notification.prototype.close = function ( options ) {
if ( !this.isOpen ) {
return;
}
this.isOpen = false;
// Clear any remaining timeout on close
this.pause();
options = $.extend( {
speed: 'slow',
placeholder: true
}, options );
// Remove the mw-notification-autohide class from the notification to avoid
// having a half-closed notification counted as a notification to resume
// when handling {autoHideLimit}.
this.$notification.removeClass( 'mw-notification-autohide' );
// Now that a notification is being closed. Start auto-hide timers for any
// notification that has now become one of the first {autoHideLimit} notifications.
notification.resume();
this.$notification
.css( {
// Don't trigger any mouse events while fading out, just in case the cursor
// happens to be right above us when we transition upwards.
pointerEvents: 'none',
// Set an absolute position so we can move upwards in the animation.
// Notification replacement doesn't look right unless we use an animation like this.
position: 'absolute',
// We must fix the width to avoid it shrinking horizontally.
width: this.$notification.width()
} )
// Fix the top/left position to the current computed position from which we
// can animate upwards.
.css( this.$notification.position() );
// This needs to be done *after* notification's position has been made absolute.
if ( options.placeholder ) {
// Insert a placeholder with a height equal to the height of the
// notification plus it's vertical margins in place of the notification
var $placeholder = $( '
' )
.css( 'height', this.$notification.outerHeight( true ) )
.insertBefore( this.$notification );
}
// Animate opacity and top to create fade upwards animation for notification closing
this.$notification
.animate( {
opacity: 0,
top: '-=35'
}, {
duration: options.speed,
complete: function () {
// Remove the notification
$( this ).remove();
if ( options.placeholder ) {
// Use a fast slide up animation after closing to make it look like the notifications
// below slide up into place when the notification disappears
$placeholder.slideUp( 'fast', function () {
// Remove the placeholder
$( this ).remove();
} );
}
}
} );
};
/**
* Helper function, take a list of notification divs and call
* a function on the Notification instance attached to them
*
* @param {jQuery} $notifications A jQuery object containing notification divs
* @param {string} fn The name of the function to call on the Notification instance
*/
function callEachNotification( $notifications, fn ) {
$notifications.each( function () {
var notif = $( this ).data( 'mw.notification' );
if ( notif ) {
notif[fn]();
}
} );
}
/**
* Initialisation
* (don't call before document ready)
*/
function init() {
if ( !isInitialized ) {
isInitialized = true;
$area = $( '
' )
// Pause auto-hide timers when the mouse is in the notification area.
.on( {
mouseenter: notification.pause,
mouseleave: notification.resume
} )
// When clicking on a notification close it.
.on( 'click', '.mw-notification', function () {
var notif = $( this ).data( 'mw.notification' );
if ( notif ) {
notif.close();
}
} )
// Stop click events from
tags from propogating to prevent clicking.
// on links from hiding a notification.
.on( 'click', 'a', function ( e ) {
e.stopPropagation();
} );
// Prepend the notification area to the content area and save it's object.
mw.util.$content.prepend( $area );
}
}
var notification = {
/**
* Pause auto-hide timers for all notifications.
* Notifications will not auto-hide until resume is called.
*/
pause: function () {
callEachNotification(
$area.children( '.mw-notification' ),
'pause'
);
},
/**
* Resume any paused auto-hide timers from the beginning.
* Only the first {autoHideLimit} timers will be resumed.
*/
resume: function () {
callEachNotification(
// Only call resume on the first {autoHideLimit} notifications.
// Exclude noautohide notifications to avoid bugs where {autoHideLimit}
// { autoHide: false } notifications are at the start preventing any
// auto-hide notifications from being autohidden.
$area.children( '.mw-notification-autohide' ).slice( 0, notification.autoHideLimit ),
'resume'
);
},
/**
* Display a notification message to the user.
*
* @param {mixed} message The DOM-element, jQuery object, mw.Message instance,
* or plaintext string to be used as the message.
* @param {Object} options The options to use for the notification.
* See mw.notification.defaults for details.
*/
notify: function ( message, options ) {
var notif;
options = $.extend( {}, notification.defaults, options );
notif = new Notification( message, options );
if ( isPageReady ) {
notif.start();
} else {
preReadyNotifQueue.push( notif );
}
},
/**
* @var {Object}
* The defaults for mw.notification.notify's options parameter
* autoHide:
* A boolean indicating whether the notifification should automatically
* be hidden after shown. Or if it should persist.
*
* tag:
* An optional string. When a notification is tagged only one message
* with that tag will be displayed. Trying to display a new notification
* with the same tag as one already being displayed will cause the other
* notification to be closed and this new notification to open up inside
* the same place as the previous notification.
*
* title:
* An optional title for the notification. Will be displayed above the
* content. Usually in bold.
*/
defaults: {
autoHide: true,
tag: false,
title: undefined
},
/**
* @var {number}
* Number of seconds to wait before auto-hiding notifications.
*/
autoHideSeconds: 5,
/**
* @var {number}
* Maximum number of notifications to count down auto-hide timers for.
* Only the first {autoHideLimit} notifications being displayed will
* auto-hide. Any notifications further down in the list will only start
* counting down to auto-hide after the first few messages have closed.
*
* This basically represents the number of notifications the user should
* be able to process in {autoHideSeconds} time.
*/
autoHideLimit: 3
};
$( function () {
var notif;
init();
// Handle pre-ready queue.
isPageReady = true;
while ( preReadyNotifQueue.length ) {
notif = preReadyNotifQueue.shift();
notif.start();
}
} );
mw.notification = notification;
}( mediaWiki, jQuery ) );