Merge "Determine callout directionality based on position as opposed to language"

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"
 			},

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;
 }
 

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.