From: Timo Tijhof <krinklemail@gmail.com>
Date: Tue, 23 Jul 2013 23:15:12 +0000 (+0200)
Subject: mediawiki.notification: Make notification area sticky to window
X-Git-Tag: 1.31.0-rc.0~19137
X-Git-Url: https://git.cyclocoop.org/%7B%24www_url%7Dadmin/compta/banques/?a=commitdiff_plain;h=a4b62f1;p=lhc%2Fweb%2Fwiklou.git

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 858a6f3fcd..f6c304e852 100644
--- 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 9a7b651d84..3aa358acbc 100644
--- 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 fd34e7ee74..146537a39f 100644
--- 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 9d2a310ad4..005c34e7cd 100644
--- 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);