mediawiki.notification: Make notification area sticky to window

Whenever the user scrolls beyond the natural offset (possibly
customised by the skin, e.g. in Vector it accounts for the
tabs and search bar, in Monobook it is relative to the content
area, etc.) we switch from absolute to fixed position.

Changed the 1em top/right padding to be actual padding instead
of part of the offset, as otherwise `window.scrollTop > offset.top`
would trigger too late and thus cause it to "jump" back about
13px (1em) whenever we switch (the scroll logic depends on the
floating-mode offset being 0).

Now it seemlessly switches between the two area modes.
Based on logic in VisualEditor for the sticky editor toolbar.

Using a class instead of an ID for the area element as otherwise
all selectors would require being like "#area.area-floating" to
work from the skin. This should've been the case from the
beginning (using IDs in CSS is almost always bad).

Falls back to absolute position in IE6, where 'fixed' is not
supported (and would use positon 'static' otherwise which would
be a problem).

Cleaned up useless 'null' value for $area variable.

Bug: 50870
Change-Id: Icb7cd68f48443c1770e3585c8567fea2ac16dad8

diff --git a/RELEASE-NOTES-1.22 b/RELEASE-NOTES-1.22
index 858a6f3..f6c304e 100644 (file)
--- a/RELEASE-NOTES-1.22
+++ b/RELEASE-NOTES-1.22
@@ -206,6 +206,8 @@ production.
   instead of just Parent/name).
 * Added $wgAPIUselessQueryPages to allow extensions to flag their query pages
   for non-inclusion in ApiQueryQueryPages.
+* (bug 50870) mediawiki.notification: Notification area should remain visible
+  when scrolled down.
 
 === API changes in 1.22 ===
 * (bug 25553) The JSON output formatter now leaves forward slashes unescaped

diff --git a/resources/mediawiki/mediawiki.notification.css b/resources/mediawiki/mediawiki.notification.css
index 9a7b651..3aa358a 100644 (file)
--- a/resources/mediawiki/mediawiki.notification.css
+++ b/resources/mediawiki/mediawiki.notification.css
@@ -2,15 +2,25 @@
  * Stylesheet for mediawiki.notification module
  */
 
-#mw-notification-area {
+.mw-notification-area {
        position: absolute;
-       top: 1em;
-       right: 1em;
+       top: 0;
+       right: 0;
+       padding: 1em 1em 0 0;
        width: 20em;
        line-height: 1.35;
        z-index: 10000;
 }
 
+.mw-notification-area-floating {
+       position: fixed;
+}
+
+* html .mw-notification-area-floating {
+       /* Make it at least 'absolute' in IE6 since 'fixed' is not supported */
+       position: absolute;
+}
+
 .mw-notification {
        padding: 0.25em 1em;
        margin-bottom: 0.5em;

diff --git a/resources/mediawiki/mediawiki.notification.js b/resources/mediawiki/mediawiki.notification.js
index fd34e7e..146537a 100644 (file)
--- a/resources/mediawiki/mediawiki.notification.js
+++ b/resources/mediawiki/mediawiki.notification.js
@@ -2,10 +2,10 @@
        'use strict';
 
        var notification,
-               isPageReady = false,
-               preReadyNotifQueue = [],
                // The #mw-notification-area div that all notifications are contained inside.
-               $area = null;
+               $area,
+               isPageReady = false,
+               preReadyNotifQueue = [];
 
        /**
         * Creates a Notification object for 1 message.
@@ -350,7 +350,9 @@
         * @ignore
         */
        function init() {
-               $area = $( '<div id="mw-notification-area"></div>' )
+               var offset, $window = $( window );
+
+               $area = $( '<div id="mw-notification-area" class="mw-notification-area"></div>' )
                        // Pause auto-hide timers when the mouse is in the notification area.
                        .on( {
                                mouseenter: notification.pause,
@@ -371,6 +373,19 @@
 
                // Prepend the notification area to the content area and save it's object.
                mw.util.$content.prepend( $area );
+               offset = $area.offset();
+
+               function updateAreaMode() {
+                       var isFloating = $window.scrollTop() > offset.top;
+                       $area
+                               .toggleClass( 'mw-notification-area-floating', isFloating )
+                               .toggleClass( 'mw-notification-area-layout', !isFloating );
+               }
+
+               $window.on( 'scroll', updateAreaMode );
+
+               // Initial mode
+               updateAreaMode();
        }
 
        /**

diff --git a/skins/vector/screen.css b/skins/vector/screen.css
index 9d2a310..005c34e 100644 (file)
--- a/skins/vector/screen.css
+++ b/skins/vector/screen.css
@@ -804,10 +804,12 @@ div#bodyContent {
 }
 
 /* mediawiki.notification */
-.skin-vector #mw-notification-area {
-       top: 7em;
+.skin-vector .mw-notification-area {
        font-size: 0.8em;
 }
+.skin-vector .mw-notification-area-layout {
+       top: 7em;
+}
 .skin-vector .mw-notification {
        background-color: #fff;
        background-color: rgba(255, 255, 255, 0.93);