'use strict';
var notification,
- // The #mw-notification-area div that all notifications are contained inside.
+ // The .mw-notification-area div that all notifications are contained inside.
$area,
// Number of open notification boxes at any time
openNotificationCount = 0,
var $notification, $notificationContent;
$notification = $( '<div class="mw-notification"></div>' )
- .data( 'mw.notification', this )
+ .data( 'mw-notification', this )
.addClass( options.autoHide ? 'mw-notification-autohide' : 'mw-notification-noautohide' );
if ( options.tag ) {
// While there can be only one "open" notif with a given tag, there can be several
// matches here because they remain in the DOM until the animation is finished.
$tagMatches.each( function () {
- var notif = $( this ).data( 'mw.notification' );
+ var notif = $( this ).data( 'mw-notification' );
if ( notif && notif.isOpen ) {
// Detach from render flow with position absolute so that the new tag can
// occupy its space instead.
*/
function callEachNotification( $notifications, fn ) {
$notifications.each( function () {
- var notif = $( this ).data( 'mw.notification' );
+ var notif = $( this ).data( 'mw-notification' );
if ( notif ) {
notif[ fn ]();
}
.toggleClass( 'mw-notification-area-layout', !isFloating );
}
- // Write to the DOM:
- // Prepend the notification area to the content area and save its object.
- $area = $( '<div id="mw-notification-area" class="mw-notification-area mw-notification-area-layout"></div>' )
+ // Look for a preset notification area in the skin.
+ // 'data-mw*' attributes are banned from user content in Sanitizer.
+ $area = $( '.mw-notification-area[data-mw="interface"]' ).first();
+ if ( !$area.length ) {
+ $area = $( '<div>' ).addClass( 'mw-notification-area' );
+ // Prepend the notification area to the content area
+ mw.util.$content.prepend( $area );
+ }
+ $area
+ .addClass( 'mw-notification-area-layout' )
+ // The ID attribute here is deprecated.
+ .attr( 'id', 'mw-notification-area' )
// Pause auto-hide timers when the mouse is in the notification area.
.on( {
mouseenter: notification.pause,
} )
// When clicking on a notification close it.
.on( 'click', '.mw-notification', function () {
- var notif = $( this ).data( 'mw.notification' );
+ var notif = $( this ).data( 'mw-notification' );
if ( notif ) {
notif.close();
}
e.stopPropagation();
} );
- mw.util.$content.prepend( $area );
-
// Read from the DOM:
// Must be in the next frame to avoid synchronous layout
// computation from offset()/getBoundingClientRect().