From: Alexander Ebert <ebert@woltlab.com>
Date: Sat, 30 Jul 2016 14:09:07 +0000 (+0200)
Subject: Improved scrollable dropdown behavior
X-Git-Tag: 3.0.0_Beta_1~878
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=e66d20b0b3f7f520a35ef57b55439b31c8318f68;p=GitHub%2FWoltLab%2FWCF.git

Improved scrollable dropdown behavior
---

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Dropdown/Simple.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Dropdown/Simple.js
index 91d08a296a..d76b98dc3d 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Dropdown/Simple.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Dropdown/Simple.js
@@ -93,6 +93,26 @@ define(
 				if (!containerId.match(/^wcf\d+$/)) {
 					elData(menu, 'source', containerId);
 				}
+				
+				// prevent page scrolling
+				if (menu.childElementCount && menu.children[0].classList.contains('scrollableDropdownMenu')) {
+					menu = menu.children[0];
+					elData(menu, 'scroll-to-active', true);
+					
+					var menuHeight = null, menuRealHeight = null;
+					menu.addEventListener('wheel', function (event) {
+						if (menuHeight === null) menuHeight = menu.clientHeight;
+						if (menuRealHeight === null) menuRealHeight = menu.scrollHeight;
+						
+						// positive value: scrolling up
+						if (event.wheelDelta > 0 && menu.scrollTop === 0) {
+							event.preventDefault();
+						}
+						else if (event.wheelDelta < 0 && (menu.scrollTop + menuHeight === menuRealHeight)) {
+							event.preventDefault();
+						}
+					})
+				}
 			}
 			
 			elData(button, 'target', containerId);
@@ -410,6 +430,23 @@ define(
 					dropdown.classList.add('dropdownOpen');
 					menu.classList.add('dropdownOpen');
 					
+					if (menu.childElementCount && elDataBool(menu.children[0], 'scroll-to-active')) {
+						var list = menu.children[0];
+						list.removeAttribute('data-scroll-to-active');
+						
+						var active = null;
+						for (var i = 0, length = list.childElementCount; i < length; i++) {
+							if (list.children[i].classList.contains('active')) {
+								active = list.children[i];
+								break;
+							}
+						}
+						
+						if (active) {
+							list.scrollTop = Math.max((active.offsetTop + active.clientHeight) - menu.clientHeight, 0);
+						}
+					}
+					
 					this._notifyCallbacks(containerId, 'open');
 					
 					this.setAlignment(dropdown, menu, alternateElement);