From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 9 Sep 2016 10:05:21 +0000 (+0200)
Subject: Interactive dropdowns now stick during scroll
X-Git-Tag: 3.0.0_Beta_1~248
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=e1a048dfd5b0e962397881fcbe2859a332cdfcd1;p=GitHub%2FWoltLab%2FWCF.git

Interactive dropdowns now stick during scroll
---

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index 299e3d81bc..e19b619bef 100755
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -1010,12 +1010,6 @@ WCF.Dropdown.Interactive.Handler = {
 		if (this._dropdownContainer === null) {
 			this._dropdownContainer = $('<div class="dropdownMenuContainer" />').appendTo(document.body);
 			WCF.CloseOverlayHandler.addCallback('WCF.Dropdown.Interactive.Handler', $.proxy(this.closeAll, this));
-			
-			window.addEventListener('scroll', (function (event) {
-				if (!document.documentElement.classList.contains('pageOverlayActive')) {
-					this.closeAll();
-				}
-			}).bind(this));
 		}
 		
 		var $instance = new WCF.Dropdown.Interactive.Instance(this._dropdownContainer, triggerElement, identifier, options);
@@ -1156,14 +1150,20 @@ WCF.Dropdown.Interactive.Instance = Class.extend({
 		
 		this._pointer = $('<span class="elementPointer"><span /></span>').appendTo(this._container);
 		
-		require(['Environment'], function(Environment) {
-			if (Environment.platform() === 'desktop' && $itemContainer !== null) {
-				// use jQuery scrollbar on desktop, mobile browsers have a similar display built-in
-				$itemContainer.perfectScrollbar({
-					suppressScrollX: true
-				});
+		require(['Environment', 'EventHandler'], (function(Environment, EventHandler) {
+			if (Environment.platform() === 'desktop') {
+				EventHandler.add('com.woltlab.wcf.pageHeaderFixed', 'change', (function (data) {
+					this.render();
+				}).bind(this));
+				
+				if ($itemContainer !== null) {
+					// use jQuery scrollbar on desktop, mobile browsers have a similar display built-in
+					$itemContainer.perfectScrollbar({
+						suppressScrollX: true
+					});
+				}
 			}
-		});
+		}).bind(this));
 		
 		this._container.appendTo(dropdownContainer);
 	},
@@ -1262,22 +1262,29 @@ WCF.Dropdown.Interactive.Instance = Class.extend({
 	 * Renders the dropdown.
 	 */
 	render: function() {
-		if (window.matchMedia('(max-width: 767px)').matches) {
-			this._container.css({
-				bottom: '',
-				left: '',
-				right: '',
-				top: elById('pageHeader').clientHeight + 'px'
-			});
-		}
-		else {
-			require(['Ui/Alignment'], (function(UiAlignment) {
+		require(['Dom/Util', 'Ui/Alignment', 'Ui/Screen'], (function (DomUtil, UiAlignment, UiScreen) {
+			if (UiScreen.is('screen-lg')) {
+				this._container[0].classList.remove('interactiveDropdownFixed');
+				
 				UiAlignment.set(this._container[0], this._triggerElement[0], {
 					horizontal: 'right',
 					pointer: true
 				});
-			}).bind(this));
-		}
+				
+				if (DomUtil.getFixedParent(this._triggerElement[0]) !== null) {
+					this._container[0].classList.add('interactiveDropdownFixed');
+					this._container[0].style.setProperty('top', this._triggerElement[0].clientHeight + 'px', '');
+				}
+			}
+			else {
+				this._container.css({
+					bottom: '',
+					left: '',
+					right: '',
+					top: elById('pageHeader').clientHeight + 'px'
+				});
+			}
+		}).bind(this));
 	},
 	
 	/**
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Dom/Util.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Dom/Util.js
index da590cb25b..2b14943084 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Dom/Util.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Dom/Util.js
@@ -432,6 +432,24 @@ define(['Environment', 'StringUtil'], function(Environment, StringUtil) {
 		 */
 		isAtNodeEnd: function(element, ancestor) {
 			return _isBoundaryNode(element, ancestor, 'next');
+		},
+		
+		/**
+		 * Returns the first ancestor element with position fixed or null.
+		 * 
+		 * @param       {Element}               element         target element
+		 * @returns     {(Element|null)}        first ancestor with position fixed or null
+		 */
+		getFixedParent: function (element) {
+			while (element && element !== document.body) {
+				if (window.getComputedStyle(element).getPropertyValue('position') === 'fixed') {
+					return element;
+				}
+				
+				element = element.offsetParent;
+			}
+			
+			return null;
 		}
 	};
 	
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Fixed.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Fixed.js
index 2861b35bb9..90c9a085cc 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Fixed.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Fixed.js
@@ -134,14 +134,18 @@ define(['Core', 'EventHandler', 'Ui/Alignment', 'Ui/CloseOverlay', 'Ui/Screen',
 			
 			_isFixed = (window.pageYOffset > _triggerHeight);
 			
-			_pageHeader.classList[_isFixed ? 'add' : 'remove']('sticky');
-			_pageHeaderContainer.classList[_isFixed ? 'add' : 'remove']('stickyPageHeader');
-			
-			if (!_isFixed && wasFixed) {
-				_pageHeader.classList.remove('searchBarOpen');
-				['bottom', 'left', 'right', 'top'].forEach(function(propertyName) {
-					_searchInputContainer.style.removeProperty(propertyName);
-				});
+			if (_isFixed !== wasFixed) {
+				_pageHeader.classList[_isFixed ? 'add' : 'remove']('sticky');
+				_pageHeaderContainer.classList[_isFixed ? 'add' : 'remove']('stickyPageHeader');
+				
+				EventHandler.fire('com.woltlab.wcf.pageHeaderFixed', 'change', { isFixed: _isFixed });
+				
+				if (!_isFixed && wasFixed) {
+					_pageHeader.classList.remove('searchBarOpen');
+					['bottom', 'left', 'right', 'top'].forEach(function(propertyName) {
+						_searchInputContainer.style.removeProperty(propertyName);
+					});
+				}
 			}
 		}
 	};
diff --git a/wcfsetup/install/files/style/ui/dropdownInteractive.scss b/wcfsetup/install/files/style/ui/dropdownInteractive.scss
index 56f03b29b4..425519fd2d 100644
--- a/wcfsetup/install/files/style/ui/dropdownInteractive.scss
+++ b/wcfsetup/install/files/style/ui/dropdownInteractive.scss
@@ -50,6 +50,12 @@
 			-webkit-overflow-scrolling: touch;
 		}
 	}
+	
+	@include screen-lg {
+		&.interactiveDropdownFixed {
+			position: fixed;
+		}
+	}
 }
 
 /* drop down header */