Fix horizontal scroll in rtl

ONLYOFFICE · Sep 4, 2024 · cffbf48 · cffbf48
1 parent a5a4ee0
commit cffbf48
Showing 1 changed file with 26 additions and 14 deletions.
diff --git a/apps/common/main/lib/mods/perfect-scrollbar.js b/apps/common/main/lib/mods/perfect-scrollbar.js
@@ -100,7 +100,8 @@
           scrollbarYTop,
           scrollbarYRight = parseInt($scrollbarYRail.css('right'), 10),
           scrollbarYRailHeight,
-          eventClassName = getEventClassName();
+          eventClassName = getEventClassName(),
+          canScrollX = false;
 
       var updateContentScrollTop = function (currentTop, deltaY) {
         var newTop = currentTop + deltaY,
@@ -122,9 +123,14 @@
       };
 
       var updateContentScrollLeft = function (currentLeft, deltaX) {
-        var newLeft = currentLeft + deltaX,
-            maxLeft = scrollbarXRailWidth - scrollbarXWidth;
+        var maxLeft = scrollbarXRailWidth - scrollbarXWidth;
 
+        if (Common.UI.isRTL()) {
+          currentLeft = maxLeft - currentLeft;
+          deltaX *= -1;
+        }
+
+        var newLeft = currentLeft + deltaX;
         if (newLeft < 0) {
           scrollbarXLeft = 0;
         }
@@ -136,8 +142,9 @@
         }
 
         var scrollLeft = parseInt(scrollbarXLeft * (contentWidth - containerWidth) / (scrollbarXRailWidth - scrollbarXWidth), 10);
-        $this.scrollLeft(scrollLeft);
+        $this.scrollLeft(scrollLeft * (Common.UI.isRTL() ? -1 : 1));
         $scrollbarYRail.css({right: scrollbarYRight - scrollLeft});
+        Common.UI.isRTL() && canScrollX && $scrollbarYRail.css({left: $this.scrollLeft() + 1});
       };
 
       var getSettingsAdjustedThumbSize = function (thumbSize) {
@@ -148,14 +155,16 @@
       };
 
       var updateScrollbarCss = function () {
-        $scrollbarXRail.css({left: $this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: scrollbarXRailWidth, display: scrollbarXActive ? "inherit": "none"});
+        $scrollbarXRail.css({left: Common.UI.isRTL() ? 'auto' : $this.scrollLeft(), right: !Common.UI.isRTL() ? 'auto' : -$this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: scrollbarXRailWidth, display: scrollbarXActive ? "inherit": "none"});
 
         if ($scrollbarYRail.hasClass('in-scrolling'))
             $scrollbarYRail.css({/*top: $this.scrollTop(),*/ right: scrollbarYRight - $this.scrollLeft(), height: scrollbarYRailHeight, display: scrollbarYActive ? "inherit": "none"});
-        else
-            $scrollbarYRail.css({top: $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: scrollbarYRailHeight, display: scrollbarYActive ? "inherit": "none"});
+        else {
+          $scrollbarYRail.css({top: $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: scrollbarYRailHeight, display: scrollbarYActive ? "inherit": "none"});
+          Common.UI.isRTL() && canScrollX && $scrollbarYRail.css({left: $this.scrollLeft() + 1});
+        }
 
-        $scrollbarX && $scrollbarX.css({left: scrollbarXLeft, width: scrollbarXWidth});
+        $scrollbarX && $scrollbarX.css({left: Common.UI.isRTL() ? 'auto' : scrollbarXLeft, right: !Common.UI.isRTL() ? 'auto' : scrollbarXLeft, width: scrollbarXWidth});
         $scrollbarY && $scrollbarY.css({top: scrollbarYTop, height: scrollbarYHeight});
       };
 
@@ -170,7 +179,7 @@
         if (!settings.suppressScrollX && containerWidth + settings.scrollXMarginOffset < contentWidth) {
           scrollbarXActive = true;
           scrollbarXWidth = getSettingsAdjustedThumbSize(parseInt(scrollbarXRailWidth * containerWidth / contentWidth, 10));
-          scrollbarXLeft = parseInt($this.scrollLeft() * (scrollbarXRailWidth - scrollbarXWidth) / (contentWidth - containerWidth), 10);
+          scrollbarXLeft = parseInt($this.scrollLeft() * (Common.UI.isRTL() ? -1 : 1) * (scrollbarXRailWidth - scrollbarXWidth) / (contentWidth - containerWidth), 10);
         }
         else {
           scrollbarXActive = false;
@@ -210,6 +219,7 @@
             currentPageX;
 
         $scrollbarX.bind('mousedown' + eventClassName, function (e) {
+          canScrollX = true;
           Common.NotificationCenter.trigger('hints:clear');
           currentPageX = e.pageX;
           currentLeft = $scrollbarX.position().left;
@@ -360,6 +370,7 @@
             // useBothWheelAxes and only horizontal bar is active, so use both
             // wheel axes for horizontal bar
             if (deltaX) {
+              canScrollX = true;
               $this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));
             } else {
               $this.scrollLeft($this.scrollLeft() - (deltaY * settings.wheelSpeed));
@@ -465,17 +476,16 @@
         $scrollbarX.bind('click' + eventClassName, stopPropagation);
         $scrollbarXRail.bind('click' + eventClassName, function (e) {
           var halfOfScrollbarLength = parseInt(scrollbarXWidth / 2, 10),
-              positionLeft = e.pageX - $scrollbarXRail.offset().left - halfOfScrollbarLength,
               maxPositionLeft = scrollbarXRailWidth - scrollbarXWidth,
-              positionRatio = positionLeft / maxPositionLeft;
-
+              positionLeft = Common.UI.isRTL() ? maxPositionLeft - (e.pageX - $scrollbarXRail.offset().left) + halfOfScrollbarLength : e.pageX - $scrollbarXRail.offset().left - halfOfScrollbarLength,
+              positionRatio = (positionLeft / maxPositionLeft);
+          canScrollX = true;
           if (positionRatio < 0) {
             positionRatio = 0;
           } else if (positionRatio > 1) {
             positionRatio = 1;
           }
-
-          $this.scrollLeft((contentWidth - containerWidth) * positionRatio);
+          $this.scrollLeft((contentWidth - containerWidth) * positionRatio * (Common.UI.isRTL() ? -1 : 1));
         });
       };
 
@@ -589,6 +599,8 @@
         scrollbarYHeight =
         scrollbarYTop =
         scrollbarYRight = null;
+
+        canScrollX = false;
       };
 
       var ieSupport = function (version) {