Allow skins to place notification container for mw.notify

Give skins the ability to place the mw.notification notifications
in a div of their choosing rather than force the container to be
in the content area.

This is particularly useful for skins that deal with multiple
overlays that are created and displayed outside the content div,
which then in turn hides the notification area. A good example of
this behavior is in MobileFrontend's overlays that are created as
siblings to the content div, and so all mw.notify() notifications
are then hidden behind them.

Bug: T143837
Bug: T202466
Change-Id: I5a78949efef88083bdafc4207a6872c76b463970

diff --git a/resources/src/mediawiki.notification/notification.js b/resources/src/mediawiki.notification/notification.js
index a163a3d..d4bc7ad 100644 (file)
--- a/resources/src/mediawiki.notification/notification.js
+++ b/resources/src/mediawiki.notification/notification.js
@@ -290,10 +290,18 @@
                                .toggleClass( 'mw-notification-area-layout', !isFloating );
                }
 
-               // Write to the DOM:
-               // Prepend the notification area to the content area and save its object.
-               // The ID attribute here is deprecated.
-               $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,
@@ -312,8 +320,6 @@
                                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().