X-Git-Url: http://git.heureux-cyclage.org/?a=blobdiff_plain;f=resources%2Fsrc%2Fmediawiki%2Fmediawiki.notification.js;h=aa86a4b58acbd3678e5876d18b016a264030a2d6;hb=a63770525dca7e271719d8f00ce0e2ced226c411;hp=dfacfc6650a3f08c8d3f78330009978a713382c4;hpb=d19826aa35b206847a568a4b2c1c9ffaa615fca5;p=lhc%2Fweb%2Fwiklou.git

diff --git a/resources/src/mediawiki/mediawiki.notification.js b/resources/src/mediawiki/mediawiki.notification.js
index dfacfc6650..aa86a4b58a 100644
--- a/resources/src/mediawiki/mediawiki.notification.js
+++ b/resources/src/mediawiki/mediawiki.notification.js
@@ -80,6 +80,7 @@
 		//          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.
+		// timeout: Holds appropriate methods to set/clear timeouts
 		this.autoHideSeconds = options.autoHideSeconds &&
 			notification.autoHideSeconds[ options.autoHideSeconds ] ||
 			notification.autoHideSeconds.short;
@@ -88,6 +89,14 @@
 		this.message = message;
 		this.options = options;
 		this.$notification = $notification;
+		if ( options.visibleTimeout ) {
+			this.timeout = require( 'mediawiki.visibleTimeout' );
+		} else {
+			this.timeout = {
+				set: setTimeout,
+				clear: clearTimeout
+			};
+		}
 	}
 
 	/**
@@ -102,7 +111,7 @@
 	Notification.prototype.start = function () {
 		var options, $notification, $tagMatches, autohideCount;
 
-		$area.show();
+		$area.css( 'display', '' );
 
 		if ( this.isOpen ) {
 			return;
@@ -171,9 +180,9 @@
 		}
 		this.isPaused = true;
 
-		if ( this.timeout ) {
-			clearTimeout( this.timeout );
-			delete this.timeout;
+		if ( this.timeoutId ) {
+			this.timeout.clear( this.timeoutId );
+			delete this.timeoutId;
 		}
 	};
 
@@ -184,15 +193,16 @@
 	 */
 	Notification.prototype.resume = function () {
 		var notif = this;
+
 		if ( !notif.isPaused ) {
 			return;
 		}
 		// Start any autoHide timeouts
 		if ( notif.options.autoHide ) {
 			notif.isPaused = false;
-			notif.timeout = setTimeout( function () {
+			notif.timeoutId = notif.timeout.set( function () {
 				// Already finished, so don't try to re-clear it
-				delete notif.timeout;
+				delete notif.timeoutId;
 				notif.close();
 			}, this.autoHideSeconds * 1000 );
 		}
@@ -230,7 +240,7 @@
 				if ( openNotificationCount === 0 ) {
 					// Hide the area after the last notification closes. Otherwise, the padding on
 					// the area can be obscure content, despite the area being empty/invisible (T54659). // FIXME
-					$area.hide();
+					$area.css( 'display', 'none' );
 					notif.$notification.remove();
 				} else {
 					notif.$notification.slideUp( 'fast', function () {
@@ -266,9 +276,22 @@
 	 * @ignore
 	 */
 	function init() {
-		var offset,
+		var offset, notif,
 			isFloating = false;
 
+		function updateAreaMode() {
+			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 );
+		}
+
+		// 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>' )
 			// Pause auto-hide timers when the mouse is in the notification area.
 			.on( {
@@ -288,26 +311,30 @@
 				e.stopPropagation();
 			} );
 
-		// Prepend the notification area to the content area and save it's object.
 		mw.util.$content.prepend( $area );
-		offset = $area.offset();
-		$area.hide();
 
-		function updateAreaMode() {
-			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 );
-		}
+		// Read from the DOM:
+		// Must be in the next frame to avoid synchronous layout
+		// computation from offset()/getBoundingClientRect().
+		rAF( function () {
+			offset = $area.offset();
+
+			// Initial mode (reads, and then maybe writes)
+			updateAreaMode();
 
-		$( window ).on( 'scroll', updateAreaMode );
+			// Once we have the offset for where it would normally render, set the
+			// initial state of the (currently empty) notification area to be hidden.
+			$area.css( 'display', 'none' );
 
-		// Initial mode
-		updateAreaMode();
+			$( window ).on( 'scroll', updateAreaMode );
+
+			// Handle pre-ready queue.
+			isPageReady = true;
+			while ( preReadyNotifQueue.length ) {
+				notif = preReadyNotifQueue.shift();
+				notif.start();
+			}
+		} );
 	}
 
 	/**
@@ -392,13 +419,18 @@
 		 * - type:
 		 *   An optional string for the type of the message used for styling:
 		 *   Examples: 'info', 'warn', 'error'.
+		 *
+		 * - visibleTimeout:
+		 *   A boolean indicating if the autoHide timeout should be based on
+		 *   time the page was visible to user. Or if it should use wall clock time.
 		 */
 		defaults: {
 			autoHide: true,
 			autoHideSeconds: 'short',
 			tag: null,
 			title: null,
-			type: null
+			type: null,
+			visibleTimeout: true
 		},
 
 		/**
@@ -423,18 +455,7 @@
 		autoHideLimit: 3
 	};
 
-	$( function () {
-		var notif;
-
-		init();
-
-		// Handle pre-ready queue.
-		isPageReady = true;
-		while ( preReadyNotifQueue.length ) {
-			notif = preReadyNotifQueue.shift();
-			notif.start();
-		}
-	} );
+	$( init );
 
 	mw.notification = notification;