* @alternateClassName mw.Notification
* @constructor
* @private
+ * @param {mw.Message|jQuery|HTMLElement|string} message
+ * @param {Object} options
*/
function Notification( message, options ) {
- var $notification, $notificationTitle, $notificationContent;
+ var $notification, $notificationContent;
$notification = $( '<div class="mw-notification"></div>' )
.data( 'mw.notification', this )
}
if ( options.title ) {
- $notificationTitle = $( '<div class="mw-notification-title"></div>' )
+ $( '<div class="mw-notification-title"></div>' )
.text( options.title )
.appendTo( $notification );
}
$notificationContent.appendTo( $notification );
// Private state parameters, meant for internal use only
+ // autoHideSeconds: Number of seconds to wait before auto-hiding notifications.
// isOpen: Set to true after .start() is called to avoid double calls.
// Set back to false after .close() to avoid duplicating the close animation.
// isPaused: false after .resume(), true after .pause(). Avoids duplicating or breaking the hide timeouts.
// to stop replacement of a tagged notification with another notification using the same message.
// options: The options passed to the notification with a little sanitization. Used by various methods.
// $notification: jQuery object containing the notification DOM node.
+ // Set hide delay
+ this.autoHideSeconds = options.autoHideSeconds;
this.isOpen = false;
this.isPaused = true;
this.message = message;
// Already finished, so don't try to re-clear it
delete notif.timeout;
notif.close();
- }, notification.autoHideSeconds * 1000 );
+ }, this.autoHideSeconds * 1000 );
}
};
$area.hide();
notif.$notification.remove();
} else {
- notif.$notification.slideUp( 'fast', function () {
+ notif.$notification.slideUp( 'fast', function () {
$( this ).remove();
} );
}
* @ignore
*/
function init() {
- var offset, $window = $( window );
+ var offset,
+ isFloating = false;
$area = $( '<div id="mw-notification-area" class="mw-notification-area mw-notification-area-layout"></div>' )
// Pause auto-hide timers when the mouse is in the notification area.
$area.hide();
function updateAreaMode() {
- var isFloating = $window.scrollTop() > offset.top;
+ var shouldFloat = window.pageYOffset > offset.top;
+ if ( isFloating === shouldFloat ) {
+ return;
+ }
+ isFloating = shouldFloat;
$area
.toggleClass( 'mw-notification-area-floating', isFloating )
.toggleClass( 'mw-notification-area-layout', !isFloating );
}
- $window.on( 'scroll', updateAreaMode );
+ $( window ).on( 'scroll', updateAreaMode );
// Initial mode
updateAreaMode();
* A boolean indicating whether the notifification should automatically
* be hidden after shown. Or if it should persist.
*
+ * - autoHideSeconds:
+ * Number of seconds to wait before auto-hiding notifications.
+ *
* - tag:
* An optional string. When a notification is tagged only one message
* with that tag will be displayed. Trying to display a new notification
*/
defaults: {
autoHide: true,
+ autoHideSeconds: 5,
tag: false,
title: undefined,
type: false
},
- /**
- * @property {number}
- * Number of seconds to wait before auto-hiding notifications.
- */
- autoHideSeconds: 5,
-
/**
* @property {number}
* Maximum number of notifications to count down auto-hide timers for.