From 1d395d49660e340df6ecd120b91bbb55947c4419 Mon Sep 17 00:00:00 2001
From: Isarra <zhorishna@gmail.com>
Date: Fri, 19 May 2017 04:50:08 +0000
Subject: [PATCH] Determine callout directionality based on position as opposed
 to language

For interlanguage toggle, interlanguage position is no longer assumed to be a
left sidebar, and is determined on the fly in order to appear correctly
regardless of where it is, and not go off the side of the page. This works
across most skins, and regardless of language directionality.

Does not necessarily resolve issues with interlanguage links appearing in the
middle of the page (header/footer), or the callout just plain not fitting for
other reasons (mobile devices).

bug: T161586
Change-Id: Icd55498a945e12c0ff79ba891c094d60ce791115
---
 extension.json                              |  2 +-
 resources/css/{ext.uls.css => ext.uls.less} | 49 ++++++++++++++++++---
 resources/js/ext.uls.interface.js           | 14 +++---
 3 files changed, 53 insertions(+), 12 deletions(-)
 rename resources/css/{ext.uls.css => ext.uls.less} (65%)

diff --git a/extension.json b/extension.json
index aa4cb660..273c92b3 100644
--- a/extension.json
+++ b/extension.json
@@ -157,7 +157,7 @@
 		"ext.uls.common": {
 			"targets": [ "desktop", "mobile" ],
 			"scripts": "js/ext.uls.common.js",
-			"styles": "css/ext.uls.css",
+			"styles": "css/ext.uls.less",
 			"skinStyles": {
 				"monobook": "css/ext.uls-monobook.css"
 			},
diff --git a/resources/css/ext.uls.css b/resources/css/ext.uls.less
similarity index 65%
rename from resources/css/ext.uls.css
rename to resources/css/ext.uls.less
index 7e3c988a..d09263ab 100644
--- a/resources/css/ext.uls.css
+++ b/resources/css/ext.uls.less
@@ -16,25 +16,62 @@
 	border-bottom-left-radius: 4px;
 }
 
+/* Caret */
 .uls-menu.callout .caret-before,
 .uls-menu.callout .caret-after {
 	border-top: 10px solid transparent;
-	border-right: 10px solid #c9c9c9;
 	border-bottom: 10px solid transparent;
 	display: inline-block;
-	left: -11px;
 	/* 17px aligns nicely with the size of the search row in language selection */
 	top: 17px;
 	position: absolute;
 }
-
 .uls-menu.callout .caret-after {
-	border-right: 10px solid #fcfcfc;
 	display: inline-block;
-	left: -10px;
 }
 
-.uls-menu.callout--languageselection .caret-after {
+// How do you do switch for flipping in less? These are very redundant.
+.uls-menu.callout .caret-right {
+	.caret-before,
+	.caret-after {
+		/* @noflip */
+		border-left: 10px solid #c9c9c9;
+		/* @noflip */
+		right: -11px;
+	}
+
+	.caret-after {
+		/* @noflip */
+		border-left: 10px solid #fcfcfc;
+		/* @noflip */
+		right: -10px;
+	}
+
+}
+.uls-menu.callout--languageselection .caret-right .caret-after {
+	/* @noflip */
+	border-left: 10px solid #fff;
+}
+
+.uls-menu.callout .caret-left {
+	.caret-before,
+	.caret-after {
+		/* @noflip */
+		border-right: 10px solid #c9c9c9;
+		/* @noflip */
+		left: -11px;
+	}
+
+	.caret-after {
+		/* @noflip */
+		border-right: 10px solid #fcfcfc;
+		/* @noflip */
+		left: -10px;
+	}
+
+}
+.uls-menu.callout--languageselection .caret-left .caret-after {
+	/* @noflip */
 	border-right: 10px solid #fff;
 }
 
diff --git a/resources/js/ext.uls.interface.js b/resources/js/ext.uls.interface.js
index 2284dfda..0dfe1ec7 100644
--- a/resources/js/ext.uls.interface.js
+++ b/resources/js/ext.uls.interface.js
@@ -294,7 +294,6 @@
 		var $triggers,
 			$pLang,
 			$ulsTrigger = $( '.uls-trigger' ),
-			rtlPage = $( 'body' ).hasClass( 'rtl' ),
 			anonMode = ( mw.user.isAnon() &&
 				!mw.config.get( 'wgULSAnonCanChangeLanguage' ) ),
 			ulsPosition = mw.config.get( 'wgULSPosition' );
@@ -337,6 +336,7 @@
 							var caretRadius, caretPosition,
 								$caretBefore = $( '<span>' ).addClass( 'caret-before' ),
 								$caretAfter = $( '<span>' ).addClass( 'caret-after' ),
+								$caretWrapper = $( '<span>' ),
 								ulsTriggerHeight = this.$element.height(),
 								ulsTriggerWidth = this.$element.width(),
 								ulsTriggerOffset = this.$element.offset();
@@ -344,20 +344,24 @@
 							// Add the callout caret triangle
 							// pointing to the trigger icon
 							this.$window.addClass( 'callout' );
-							this.$window.prepend( $caretBefore, $caretAfter );
+							this.$window.prepend( $caretWrapper.prepend( $caretBefore, $caretAfter ) );
 
 							// Calculate the positioning of the panel
 							// according to the position of the trigger icon
 
 							caretRadius = parseInt( $caretBefore.css( 'border-top-width' ), 10 );
-							if ( rtlPage ) {
+
+							if ( ulsTriggerOffset.left > ( this.$window.width() - caretRadius ) / 2 ) {
 								this.left = ulsTriggerOffset.left - this.$window.width() - caretRadius;
+								$caretWrapper.addClass( 'caret-right' );
+								caretPosition = $caretBefore.position();
+
 							} else {
 								this.left = ulsTriggerOffset.left + ulsTriggerWidth + caretRadius;
+								$caretWrapper.addClass( 'caret-left' );
+								caretPosition = $caretAfter.position();
 							}
 
-							caretPosition = $caretBefore.position();
-
 							// The top of the dialog is aligned in relation to
 							// the middle of the trigger, so that middle of the
 							// caret aligns with it. 2 is for border and margin.