From d1ddb950676307e55aea070b488f21e9ffa616c9 Mon Sep 17 00:00:00 2001
From: Prateek Saxena <prtksxna@gmail.com>
Date: Tue, 27 May 2014 17:41:52 +0530
Subject: [PATCH] Flip the animation direction if the Hovercard is flipped

Change-Id: I890d49c517a52e57e0b22bcf1949b347d531d6b7
---
 resources/ext.popups.renderer.article.js | 16 +++++++++++++++-
 resources/ext.popups.renderer.js         | 17 +++++++++++++----
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/resources/ext.popups.renderer.article.js b/resources/ext.popups.renderer.article.js
index d308bd7dd..3f65740c7 100644
--- a/resources/ext.popups.renderer.article.js
+++ b/resources/ext.popups.renderer.article.js
@@ -276,6 +276,8 @@
 
 	/**
 	 * Positions the popup based on the mouse position and popup size
+	 * Default popup positioning is below and to the right of the mouse or link,
+	 * unless flippedX or flippedY is true. flippedX and flippedY are cached.
 	 *
 	 * @method getOffset
 	 * @param {jQuery} link
@@ -288,8 +290,10 @@
 			flippedX = false,
 			flippedY = false,
 			settings = mw.popups.render.cache[ href ].settings,
-			offsetTop = ( event.pageY ) ?
+			offsetTop = ( event.pageY ) ? // If it was a mouse event
+				// Position according to mouse
 				event.pageY + 20 :
+				// Position according to link position or size
 				link.offset().top + link.height() + 9,
 			clientTop = ( event.clientY ) ?
 				event.clientY :
@@ -318,6 +322,10 @@
 			flippedY = true;
 		}
 
+		if ( event.pageY && flippedY ) {
+			offsetTop += 30;
+		}
+
 		mw.popups.render.cache[ href ].settings.flippedY = flippedY;
 
 		return {
@@ -342,6 +350,12 @@
 			flippedY = cache.settings.flippedY,
 			flippedX = cache.settings.flippedX;
 
+		if ( flippedY ) {
+			classes.push( 'mwe-popups-fade-in-down' );
+		} else {
+			classes.push( 'mwe-popups-fade-in-up' );
+		}
+
 		if ( flippedY && flippedX ) {
 			classes.push( 'flipped_x_y' );
 		}
diff --git a/resources/ext.popups.renderer.js b/resources/ext.popups.renderer.js
index cfdec84c6..3b48eeb8f 100644
--- a/resources/ext.popups.renderer.js
+++ b/resources/ext.popups.renderer.js
@@ -130,7 +130,6 @@
 			.append( popup )
 			.show()
 			.attr( 'aria-hidden', 'false' )
-			.addClass( 'mwe-popups-fade-in-up' )
 			.on( 'mouseleave', mw.popups.render.leaveActive )
 			.on( 'mouseenter', function () {
 				if ( mw.popups.render.closeTimer ) {
@@ -167,12 +166,22 @@
 
 		$( mw.popups.render.currentLink ).off( 'mouseleave blur', mw.popups.render.leaveActive );
 
+		var fadeInClass, fadeOutClass;
+
+		fadeInClass = ( mw.popups.$popup.hasClass( 'mwe-popups-fade-in-up' ) ) ?
+			'mwe-popups-fade-in-up' :
+			'mwe-popups-fade-in-down';
+
+		fadeOutClass = ( fadeInClass === 'mwe-popups-fade-in-up' ) ?
+			'mwe-popups-fade-out-down' :
+			'mwe-popups-fade-out-up';
+
 		mw.popups.$popup
-			.removeClass( 'mwe-popups-fade-in-up' )
-			.addClass( 'mwe-popups-fade-out-down' );
+			.removeClass( fadeInClass )
+			.addClass( fadeOutClass );
 
 		mw.popups.render.wait( 150 ).done( function () {
-			if ( mw.popups.$popup.hasClass( 'mwe-popups-fade-out-down' ) ) {
+			if ( mw.popups.$popup.hasClass( fadeOutClass ) ) {
 				mw.popups.$popup
 					.attr( 'aria-hidden', 'true' )
 					.hide()