From 2ac455bd2a0cdb1ef26e63831dbab244939a93ab Mon Sep 17 00:00:00 2001
From: "Amir E. Aharoni" <amir.aharoni@mail.huji.ac.il>
Date: Sat, 5 Apr 2014 15:31:20 +0300
Subject: [PATCH] RTL positioning for compact interlanguage links

Bug: 62981
Change-Id: If68975431eb58a7fcafcb7fec9f8a95f5e09ad80
---
 resources/js/ext.uls.compactlinks.js | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/resources/js/ext.uls.compactlinks.js b/resources/js/ext.uls.compactlinks.js
index 439faa6c..031118e4 100644
--- a/resources/js/ext.uls.compactlinks.js
+++ b/resources/js/ext.uls.compactlinks.js
@@ -90,9 +90,10 @@
 		 */
 		listen: function () {
 			var languages,
-				ulsTop, ulsLeft,
 				compactLinks = this,
-				triggerPosition = compactLinks.$trigger.offset(),
+				dir = $( 'html' ).prop( 'dir' ),
+				interlanguageListLeft,
+				interlanguageListWidth,
 				ulsLanguageList = {};
 
 			languages = $.map( compactLinks.interlanguageList, function ( language, languageCode ) {
@@ -101,9 +102,9 @@
 				return languageCode;
 			} );
 
-			ulsTop = triggerPosition.top - compactLinks.$trigger.height() / 2 - 250 + 'px';
-			ulsLeft = triggerPosition.left + compactLinks.$trigger.width() + compactLinks.$interlanguageList.width() + 'px';
-
+			// Calculate the left and width values
+			interlanguageListLeft = compactLinks.$interlanguageList.offset().left;
+			interlanguageListWidth = compactLinks.$interlanguageList.width();
 			// Attach ULS to the trigger
 			compactLinks.$trigger.uls( {
 				onReady: function () {
@@ -121,13 +122,21 @@
 					mw.uls.setPreviousLanguages( previousLanguages );
 					window.location.href = compactLinks.interlanguageList[ language ].href;
 				},
+				onVisible: function () {
+					// Calculate the positioning of the panel
+					// according to the position of the trigger icon
+					if ( dir === 'rtl' ) {
+						this.left = interlanguageListLeft - this.$menu.width();
+					} else {
+						this.left = interlanguageListLeft + interlanguageListWidth;
+					}
+					this.$menu.css( 'left', this.left );
+				},
 				// Use compact version of ULS
 				compact: true,
-				// Left position of the language selector
-				left: ulsLeft,
 				// Top position of the language selector. Top it 250px above to take care of
 				// caret pointing the trigger. See .interlanguage-uls-menu:after style definition
-				top: ulsTop,
+				top: compactLinks.$trigger.offset().top - compactLinks.$trigger.height() / 2 - 250,
 				// List of languages to be shown
 				languages: ulsLanguageList,
 				// Show common languages