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 16e6a2076b767646f22ce54b79d9b2c7d025d933..5fd02c07f9b2c66f362e96d4ab323c710b589be8 100644 (file)
--- 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);
                                }