From: Alexander Ebert <ebert@woltlab.com>
Date: Mon, 4 Dec 2017 12:08:18 +0000 (+0100)
Subject: Added tab menu scrolling by clicking on the overflow indicators
X-Git-Tag: 3.1.0_Beta_4~4^2~4
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=0d5d58340e3a4afefc353ea4ef42824b775cfcd4;p=GitHub%2FWoltLab%2FWCF.git

Added tab menu scrolling by clicking on the overflow indicators
---

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/TabMenu.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/TabMenu.js
index 16e6a2076b..5fd02c07f9 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/TabMenu.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/TabMenu.js
@@ -223,46 +223,50 @@ define(['Dictionary', 'EventHandler', 'Dom/ChangeListener', 'Dom/Util', 'Ui/Clos
 			}
 			
 			if (shouldScroll) {
-				// allow some padding to indicate overflow
-				if (paddingRight) {
-					left -= 15;
-				}
-				else if (left > 0) {
-					left -= 15;
-				}
-				
-				if (left < 0) {
-					left = 0;
-				}
-				else {
-					// ensure that our left value is always within the boundaries
-					left = Math.min(left, scrollWidth - width);
-				}
-				
-				if (scrollLeft === left) {
-					return;
-				}
-				
-				list.classList.add('enableAnimation');
+				this._scrollMenu(list, left, scrollLeft, scrollWidth, width, paddingRight);
+			}
+		},
+		
+		_scrollMenu: function (list, left, scrollLeft, scrollWidth, width, paddingRight) {
+			// allow some padding to indicate overflow
+			if (paddingRight) {
+				left -= 15;
+			}
+			else if (left > 0) {
+				left -= 15;
+			}
+			
+			if (left < 0) {
+				left = 0;
+			}
+			else {
+				// ensure that our left value is always within the boundaries
+				left = Math.min(left, scrollWidth - width);
+			}
+			
+			if (scrollLeft === left) {
+				return;
+			}
+			
+			list.classList.add('enableAnimation');
+			
+			// new value is larger, we're scrolling towards the end
+			if (scrollLeft < left) {
+				list.firstElementChild.style.setProperty('margin-left', (scrollLeft - left) + 'px', '');
+			}
+			else {
+				// new value is smaller, we're scrolling towards the start
+				list.style.setProperty('padding-left', (scrollLeft - left) + 'px', '');
+			}
+			
+			setTimeout(function () {
+				list.classList.remove('enableAnimation');
 				
-				// new value is larger, we're scrolling towards the end
-				if (scrollLeft < left) {
-					list.firstElementChild.style.setProperty('margin-left', (scrollLeft - left) + 'px', '');
-				}
-				else {
-					// new value is smaller, we're scrolling towards the start
-					list.style.setProperty('padding-left', (scrollLeft - left) + 'px', '');
-				}
+				list.firstElementChild.style.removeProperty('margin-left');
+				list.style.removeProperty('padding-left');
 				
-				setTimeout(function () {
-					list.classList.remove('enableAnimation');
-					
-					list.firstElementChild.style.removeProperty('margin-left');
-					list.style.removeProperty('padding-left');
-					
-					list.scrollLeft = left;
-				}, 300);
-			}
+				list.scrollLeft = left;
+			}, 300);
 		},
 		
 		_rebuildMenuOverflow: function (menu) {
@@ -281,6 +285,19 @@ define(['Dictionary', 'EventHandler', 'Dom/ChangeListener', 'Dom/Util', 'Ui/Clos
 				if (overlayLeft === null) {
 					overlayLeft = elCreate('span');
 					overlayLeft.className = 'tabMenuOverlayLeft icon icon24 fa-angle-left';
+					overlayLeft.addEventListener(WCF_CLICK_EVENT, (function () {
+						var listWidth = list.clientWidth;
+						
+						this._scrollMenu(
+							list,
+							list.scrollLeft - ~~(listWidth / 2),
+							list.scrollLeft,
+							list.scrollWidth,
+							listWidth,
+							0
+						);
+					}).bind(this));
+					
 					menu.insertBefore(overlayLeft, menu.firstChild);
 				}
 				
@@ -296,6 +313,19 @@ define(['Dictionary', 'EventHandler', 'Dom/ChangeListener', 'Dom/Util', 'Ui/Clos
 				if (overlayRight === null) {
 					overlayRight = elCreate('span');
 					overlayRight.className = 'tabMenuOverlayRight icon icon24 fa-angle-right';
+					overlayRight.addEventListener(WCF_CLICK_EVENT, (function () {
+						var listWidth = list.clientWidth;
+						
+						this._scrollMenu(
+							list,
+							list.scrollLeft + ~~(listWidth / 2),
+							list.scrollLeft,
+							list.scrollWidth,
+							listWidth,
+							0
+						);
+					}).bind(this));
+					
 					menu.appendChild(overlayRight);
 				}