From 2a9a3f27408d5a5c0109db79cf4ea06ccd76cd96 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Thu, 21 Jan 2016 18:33:49 +0100
Subject: [PATCH] Fixed alignment of interactive dropdown pointer

---
 wcfsetup/install/files/js/WCF.js              | 99 +------------------
 .../files/style/ui/dropdownInteractive.scss   | 34 ++++---
 2 files changed, 23 insertions(+), 110 deletions(-)

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index e8727cd304..1f2763acbf 100755
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -1134,7 +1134,7 @@ WCF.Dropdown.Interactive.Instance = Class.extend({
 			$('<a href="' + options.showAllLink + '" class="interactiveDropdownShowAll">' + WCF.Language.get('wcf.user.panel.showAll') + '</a>').appendTo(this._container);
 		}
 		
-		this._pointer = $('<span class="pointer"><span /></span>').appendTo(this._container);
+		this._pointer = $('<span class="elementPointer"><span /></span>').appendTo(this._container);
 		
 		if (!$.browser.mobile && $itemContainer !== null) {
 			// use jQuery scrollbar on desktop, mobile browsers have a similar display built-in
@@ -1275,100 +1275,11 @@ WCF.Dropdown.Interactive.Instance = Class.extend({
 	 * @param	string		pageDirection
 	 */
 	_renderDesktop: function(pageDirection) {
-		var $elementDimensions = this._triggerElement.getDimensions('outer');
-		var $elementOffsets = this._triggerElement.getOffsets('offset');
-		var $dropdownDimensions = this._container.getDimensions();
-		var $pageWidth = $(window).width();
-		
-		var $left = null;
-		var $right = null;
-		if (pageDirection === 'ltr') {
-			$left = this._getPositionLeft($elementOffsets, $dropdownDimensions, $pageWidth);
-			
-			if (!$left.result) {
-				$right = this._getPositionRight($elementOffsets, $dropdownDimensions, $elementDimensions, $pageWidth);
-				
-				if ($right.result) {
-					$left = null;
-				}
-				else {
-					$right = null;
-				}
-			}
-		}
-		else {
-			$right = this._getPositionRight($elementOffsets, $dropdownDimensions, $elementDimensions, $pageWidth);
-			
-			if (!$right.result) {
-				$left = this._getPositionLeft($elementOffsets, $dropdownDimensions, $pageWidth);
-				if ($left.result) {
-					$right = null;
-				}
-				else {
-					$left = null;
-				}
-			}
-		}
-		
-		if ($right === null) {
-			// align to the left
-			this._container.css({
-				left: $left.left + 'px',
-				top: $elementOffsets.top + $elementDimensions.height + 'px'
-			});
-			
-			this._pointer.css({
-				left: (this._options.pointerOffset ? this._options.pointerOffset : '4px')
+		require(['Ui/Alignment'], (function(UiAlignment) {
+			UiAlignment.set(this._container[0], this._triggerElement[0], {
+				pointer: true
 			});
-		}
-		else {
-			// align to the right
-			this._container.css({
-				right: $right.right + 'px',
-				top: $elementOffsets.top + $elementDimensions.height + 'px'
-			});
-			
-			this._pointer.css({
-				right: (this._options.pointerOffset ? this._options.pointerOffset : '4px')
-			});
-		}
-	},
-	
-	/**
-	 * Calculates the dropdown position aligned with its left side.
-	 * 
-	 * @param	object		elementOffsets
-	 * @param	object		dropdownDimensions
-	 * @param	integer		pageWidth
-	 * @return	object
-	 */
-	_getPositionLeft: function(elementOffsets, dropdownDimensions, pageWidth) {
-		var $left = elementOffsets.left;
-		var $right = elementOffsets.left + dropdownDimensions.width;
-		
-		return {
-			left: $left,
-			result: ($right < pageWidth)
-		};
-	},
-	
-	/**
-	 * Calculates the dropdown position aligned with its right side.
-	 * 
-	 * @param	object		elementOffsets
-	 * @param	object		dropdownDimensions
-	 * @param	object		elementDimensions
-	 * @param	integer		pageWidth
-	 * @return	object
-	 */
-	_getPositionRight: function(elementOffsets, dropdownDimensions, elementDimensions, pageWidth) {
-		var $left = (elementOffsets.left + elementDimensions.width) - dropdownDimensions.width;
-		var $right = pageWidth - (elementOffsets.left + elementDimensions.width);
-		
-		return {
-			result: ($left > 0),
-			right: $right
-		};
+		}).bind(this));
 	}
 });
 
diff --git a/wcfsetup/install/files/style/ui/dropdownInteractive.scss b/wcfsetup/install/files/style/ui/dropdownInteractive.scss
index 0ea41bb109..107f2e3081 100644
--- a/wcfsetup/install/files/style/ui/dropdownInteractive.scss
+++ b/wcfsetup/install/files/style/ui/dropdownInteractive.scss
@@ -12,14 +12,13 @@
 		display: none !important;
 	}
 	
-	> .pointer {
+	> .elementPointer {
 		border: 10px solid transparent;
 		border-bottom-color: $wcfDropdownBorder;
 		border-top-width: 0;
 		content: "";
-		display: inline-block;
+		display: block;
 		position: absolute;
-		top: -10px;
 		z-index: 100;
 		
 		> span {
@@ -27,30 +26,33 @@
 			border-bottom-color: $wcfDropdownBackground;
 			border-top-width: 0;
 			content: "";
-			display: inline-block;
-			left: -8px;
+			display: block;
 			position: absolute;
 			top: 2px;
 			z-index: 101;
 		}
-	}
-	
-	&.interactiveDropdownUserMenu {
-		> .interactiveDropdownItemsContainer {
-			overflow: visible;
-			max-height: none;
+		
+		&.left {
+			left: 16px;
+			
+			> span {
+				left: -8px;
+			}
 		}
 		
-		> .pointer {
-			border-width: 0 7px 7px 7px;
-			top: -7px;
+		&.right {
+			right: 16px;
 			
 			> span {
-				border-width: 0 5px 5px 5px;
-				left: -5px;
+				right: -7px;
 			}
 		}
 	}
+	
+	&.interactiveDropdownUserMenu > .interactiveDropdownItemsContainer {
+		overflow: visible;
+		max-height: none;
+	}
 }
 
 .interactiveDropdownHeader {
-- 
2.20.1